Midscene 完整指南：3 步让 AI 听懂人话、替你操作浏览器
【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene
以前写浏览器自动化，第一件事是找选择器——页面一改版，脚本就挂。Midscene 换了一种思路：它不读 DOM，而是像人一样先看屏幕截图、理解界面上有什么，再点击、输入、验证结果。你用自然语言说"搜索耳机，把结果筛到 100 美元以下"，它就替你一步步做完。读完这篇，你就能跑起第一条指令。
零搭建，先让它动起来
最快的入口是 Chrome 扩展，官方叫它 Web Playground，不需要建项目、不需要跑构建：
- 在 Chrome 商店搜索并安装 Midscene，浏览器右侧会出现侧边栏；
- 点设置，粘贴一份模型配置——它需要一个能"看懂界面"的多模态模型；
- 打开任意网页，输入"点击登录按钮"，回车。
Agent 会截当前页面的图、定位按钮、完成点击，整个过程中你看不到一行选择器代码。
想直接跑脚本或看源码，把仓库拉下来：
git clone https://gitcode.com/GitHub_Trending/mid/midscene三个核心能力，对应测试里的三步
它把"操作、取数、验证"拆成三个 API，刚好覆盖你日常测试的全部动作。
aiAct：一句话完成一整条流程。它不是一步一点，而是自己规划路径。比如"打开搜索页，搜'今日天气'，确认结果区显示了温度"，中间要输几个字、等页面加载，它自己处理。
aiQuery：把页面内容变成结构化数据。你给它一句"页面中的商品，{name: string, price: number}[]"，它返回一个数组，不用再手写正则或 XPath 去抠页面。
aiAssert：断言"用户能看到什么"。传统断言查 DOM 里的文本，Midscene 断言的是视觉结果——"选中的套餐带有蓝色边框和勾选标记""错误提示显示在邮箱输入框下方"。canvas 画出来的内容、原生 App 界面，它也能验证。
这套 API 不绑定浏览器。同一套写法可以直接换到 Android、iOS、桌面端，换的只是驱动层。
进阶：从一次操作到可维护的测试项目
跑通一条指令只是开始。真正干活时有两个组合用法值得了解。
YAML 脚本：不想维护测试框架时，一个.yaml文件就够了——写个页面地址，再列一串自然语言步骤（ai、aiAssert、sleep），命令行执行即可。它支持批量跑多个脚本、失败重试、并发，跑完自动产出 HTML 报告。
回放式 HTML 报告：每一步的截图、点击位置、AI 的决策过程都记录在案。测试失败时，你在浏览器里逐帧回放，就能看到 Agent 当时"看见"了什么、为什么点错了。
另外，通过 Playwright 集成文档 可以把这些能力嵌进你现有的测试工程；桥接模式还能让脚本直接驱动你已登录的浏览器会话，省掉重新登录的麻烦。
新手最容易卡住的四个问题
Q：模型去哪配？用什么模型？A：Midscene 自己不内置模型，需要接入一个多模态模型。Gemini、豆包、Qwen、GLM-4.6V，以及可自托管的开源 UI-TARS 都支持，环境变量方式配置，模板在模型配置文档里。
Q：页面截图会不会泄露？A：Midscene 发给模型的默认就是页面截图（个别取数场景可选带上 DOM）。如果数据敏感，自托管一个开源视觉模型即可，数据不出本地。
Q：点击总是偏一点，怎么办？A：先升级到最新版，定位精度一直在改；再换成视觉能力更强的模型。分辨率越高 token 越贵，按需调低截图分辨率能提速省钱。
Q：跑起来贵不贵？A：因为发的是截图而不是整棵 DOM 树，token 消耗比传统方案低很多。官方 AppControlBench 评测里，60 个任务的模型调用总成本约 0.59 美元。
下一步
今天就把 Chrome 扩展装上，打一条"点击登录按钮"试试手感；顺手把某个每天重复的操作写成 YAML 脚本，你会发现它比你想象得更省时间。想深挖实现，从核心源码目录看起。
【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
