Midscene.js：让一句自然语言完成 UI 测试与自动化的视觉 GUI Agent

Midscene.js让一句自然语言完成 UI 测试与自动化的视觉 GUI Agent【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene 是一个面向端到端测试的开源 GUI Agent你用一句自然语言描述要做什么、期望看到什么它就通过看屏幕截图来定位元素、执行点击和输入并检查页面是否真的符合预期。同一套 Agent API 可以驱动浏览器、Android、iOS、HarmonyOS 和桌面应用Web、移动端、桌面端的 UI 自动化不再各写各的脚本。过去做浏览器自动化绕不开选择器。页面一改版div:nth-child(3)这类定位就集体失效纯图标按钮、canvas 画出来的内容、跨域 iframe 里的控件更是选择器难以覆盖的盲区。Midscene 的思路是把这件事交还给视觉它像人一样先截图、理解界面再决定点哪里、输什么。你写的是在搜索框输入关键词并点击搜索而不是 XPath。 先装好 Chrome 扩展5 分钟跑通第一条指令想确认一个想法可不可行最快的方式不是先搭工程而是直接试。Midscene 把 Chrome 扩展做成了 Web 端的 Playground装好扩展、在设置里粘贴一份多模态模型的配置打开任意网页在侧边栏里输入指令就能跑。扩展面板提供三类指令对应三种最常用的自动化诉求Action规划并执行交互比如点击登录按钮Midscene 会自行拆解步骤、定位元素、逐步完成Query提取结构化数据比如页面中的商品返回名称和价格直接得到可消费的 JSONAssert检查界面状态比如页面顶部显示导航栏让断言也建立在用户真正看到的东西上。运行之后可以看到每一步的截图、元素定位和 AI 的决策过程调一句指令的成本几乎为零。如果你更习惯从本地仓库构建进入 apps/chrome-extension/ 目录安装依赖并执行构建再把产物作为未打包扩展加载进 Chrome 即可。pnpm install pnpm run build指令调顺之后还可以用它内置的录制能力操作一遍页面扩展会整理出可复用的自动化脚本省去逐句手写指令的过程。扩展面板的完整形态可以在下图中看到左侧是指令与模型配置右侧是浏览器实时画面 指令验证过之后如何搬进你的测试工程Playground 里跑通的那句话就是测试代码里要写的那句话。扩展与midscene/web共享核心能力aiAct、aiQuery、aiAssert等 Agent API 可以直接嵌进 Playwright 或 Puppeteer 流程先用 API 造好数据再用自然语言描述 UI 操作最后用视觉断言收尾。已有的测试框架、fixtures 和断言都不用推倒重来视觉能力是加进来的不是换掉的。每次运行都会生成一份交互式 HTML 报告截图、元素位置、AI 的推理过程、操作与断言结果都在里面。失败的时候不用猜打开报告就能回溯到具体是哪一步、哪个元素出了问题。对 AI 编程助手来说报告同样是排查失败时的重要上下文。 Bridge 模式让本地终端接管桌面 Chrome只操作浏览器还不够用的时候Bridge 模式补上了关键一环脚本可以连接你日常在用的桌面 Chrome复用它的登录态、cookies 和插件状态也可以附着到当前激活的标签页。脚本负责跑流程人可以随时接手再交还给脚本——文档里称之为 man-in-the-loop。使用方式是装好扩展后在本地终端引入桥接 Agent运行脚本时扩展会弹出确认窗口同意后脚本就能打开新标签页或直接控制当前页面。扩展图标上的状态徽标很直观黄点表示正在监听连接绿点表示已连上。模型配置写在终端环境变量里而不是浏览器侧这一点初次使用时容易踩坑。跨机器场景脚本在服务器、浏览器在本机也可以配置远程访问但官方提醒只在可信网络里开启。细节都在 Bridge 模式文档 里。 不止浏览器Android、iOS 与桌面的同一套 API浏览器之外Midscene 在移动端和桌面端同样提供完整的 Playground 与 Agent 能力。以 Android 为例接好 adb 设备后打开 Android Playground输入打开设置查看当前系统版本左侧时间线会逐步展示规划、定位、点击的每个环节右侧则是手机实时画面。iOS、HarmonyOS 和桌面端的体验是同构的换的是设备不换的是指令写法和报告格式。这套视觉定位方式对测试团队还有一个实际好处同一句断言既能在网页上验证选中的套餐带有蓝色边框也能在原生 App 里验证视觉反馈无需为不同端维护两套定位逻辑。 从一次性指令到 E2E 测试工程指令式的 Playground 解决跑起来Midscene 还准备了工程化的部分。midscene/testBeta把测试拆成两层UI 流程和预期结果写在 YAML 里API 调用、数据准备、清理等工程逻辑封装成可复用的 TypeScript 节点。一条退款用例可以先通过接口造单再从 UI 发起退款并验证结果。框架自带项目脚手架、生命周期钩子、重试和并发隔离还会根据注册的节点生成参考文档人和 AI 助手看到的是同一份能力清单可以共同维护用例。YAML 脚本的写法与更多说明见 YAML 自动化脚本文档packages/cli/tests/midscene_scripts/ 目录里还有覆盖常见场景的示例脚本可以直接参考。效果方面官方给出了公开基准成绩AndroidWorld 评测 Pass1 达到 93.1%AppControlBench 中 60 个任务通过 58 个且 60 个任务的模型调用总费用仅 0.59 美元——基于截图而非整棵 DOM 树是成本能压下来的原因之一。你的下一个重复操作也许就是下一句指令如果此刻你正在手动点一个固定流程不妨先把它写成一句话放进 Chrome 扩展的侧边栏里试跑一次。跑通之后再决定它要不要进 Playwright、要不要变成 YAML 用例、要不要覆盖到手机端——Midscene 的进阶路径本来就是按从一句话开始设计的。打开 快速开始文档配置好模型今天就能让浏览器替你点完第一组按钮。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考