Midscene.js 完整指南如何用自然语言做浏览器与应用 UI 自动化测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是面向 GUI Agent UI 自动化的开源 SDK由多模态大模型驱动直接基于屏幕截图理解界面点按、输入、提取数据都能用一句自然语言表达。它覆盖 Web、Android、iOS 与桌面端适合想为 E2E 测试引入 AI 的开发者与测试人员也适合自动化爱好者。一、它解决什么问题 UI 自动化测试有三个常见且顽固的痛点。第一个是选择器维护。一次界面重构后整批用例随之失效追改选择器的成本常常超过自动化本身带来的收益。第二个是元素定位盲区。纯图标按钮、canvas 绘制的控件、跨域 iframe对依赖页面结构的工具来说基本“看不见”无法被定位。第三个是断言与用户所见脱节。DOM 节点存在但颜色、布局或渲染状态已经错了基于结构的断言无法发现而用户的体验已经坏了。二、工作原理速览 Midscene 走的是纯视觉路线多模态模型直接分析屏幕截图来规划步骤、定位元素全程不读取 DOM页面元素结构树。可以这样理解它像一位只“看屏幕”而不看源码的新员工人眼能看到的东西它就能操作界面是用什么技术渲染的并不重要。这对你意味着什么测试对象从“节点是否存在”变成了“用户看到了什么”只改样式或类名的重构不再弄坏用例断言也能校验颜色、高亮和布局这类视觉结果。三、最快上手路径 ⚡先跑起来再深入。最短路径分两步。第一步是零代码体验安装 Midscene Chrome 扩展粘贴多模态模型配置后在任意网页输入“点击登录按钮”这类指令即可直接观察 AI 执行过程快速开始文档里有完整的配置说明。第二步是写进代码安装midscene/web在 Playwright 页面对象上创建 Agent 即可import { PlaywrightAgent } from midscene/web/playwright; const agent new PlaywrightAgent(page); await agent.aiAct(type headphones in search box, hit Enter); const items await agent.aiQuery({title: string, price: number}[], 商品列表); await agent.aiAssert(搜索结果中至少有一件商品);三个 API 分别对应“做、取、查”aiAct自主完成多步操作aiQuery提取结构化数据aiAssert条件不成立时直接抛错。Web 集成模块还展示了它与 Puppeteer、Bridge 模式的组合方式。四、能力版图 ️同一套 API 可以驱动不同平台的界面按真实使用场景分组来看。用 Bridge 模式驱动真实桌面浏览器任务需要已登录会话时可以经本地终端控制你自己的 Chrome 实例不必在脚本里重新登录。Android 应用自动化测试设备通过 adb安卓调试桥连接后启动应用、点按图标、填写表单都用同一组 AI 指令完成Android 模块封装了设备连接、截屏与输入注入的细节。iOS 真机与模拟器测试iOS 走 WebDriverAgent 通道支持模拟器与真机操作体验和 Android 侧一致。执行报告怎么看每次运行都会生成可逐步回放的可视化报告每一步附截图与 AI 的推理说明用例失败时打开报告即可定位断在哪一步。五、工程化落地技巧 ️从“能跑”到“稳定且省钱”重点做四件事。开启规划缓存。相同指令二次运行会命中缓存省去重复的模型调用官方示例中执行耗时从 51 秒降到 28 秒const agent new PlaywrightAgent(page, { cache: { id: search-flow } });按任务难度选模型。默认单个多模态模型即可覆盖大多数场景规划或数据提取遇到瓶颈时再叠加专用的 Planning 与 Insight 模型。需要数据不出内网时可选 Qwen3.x、UI-TARS 等可自托管的开源模型。目标元素小或易混淆时用deepLocate增加一次定位校验含分支的复杂任务用deepThink强化规划。关键操作后补一条aiAssert页面加载等待用aiWaitFor代替固定 sleep失败信息会直接说明模型认为不成立的原因。失败先看报告再看脚本。问题通常出在某一步的推理上报告里能看到当时的截图与判断依据。Midscene.js 的价值是把 UI 自动化测试中最耗时的三件事——定位、断言、排查失败点——压缩成“描述界面”这一种表达。如果已有 Playwright 用例只需补几行 Agent 代码就能接入进一步可以从 Playwright 集成文档 查阅参数细节或直接浏览 报告应用 的源码了解报告是如何生成的。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
