ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

3 条命令跑通 UI 自动化:Midscene.js 用自然语言驱动 Web、Android、iOS

3 条命令跑通 UI 自动化:Midscene.js 用自然语言驱动 Web、Android、iOS 3 条命令跑通 UI 自动化Midscene.js 用自然语言驱动 Web、Android、iOS【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个基于视觉语言模型的 UI 自动化工具你用自然语言或简短 YAML 描述操作它靠看屏幕定位元素并执行同一套方法覆盖 Web、Android、iOS 与桌面应用不依赖任何 CSS 选择器。它到底解决什么麻烦做 UI 自动化最头疼的两件事一是选择器一改就失效——前端同学重构一次样式测试脚本里的选择器大面积报错二是同一个业务流程Web 端、Android、iOS 要分别写三套脚本逻辑基本一样却用三种技术栈。Midscene.js 的思路是绕开页面结构它像真人一样读屏幕截图来定位元素。搜索框挪了位置、类名换了前缀脚本不用改没有 id、没有语义标记的图标按钮只要人在截图里能看见它就能点中。5 分钟跑通第一个脚本git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install echo page: url: https://www.bing.com tasks: - name: Search for weather flow: - ai: Search for todays weather - sleep: 3000 - aiAssert: The results show weather information bing-search.yaml midscene ./bing-search.yamlCLI 会拉起浏览器执行脚本实时打印进度跑完后在midscene_run目录生成可视化报告。模型服务通过.env里的MIDSCENE_MODEL_BASE_URL、MIDSCENE_MODEL_NAME等环境变量指定完整格式见 apps/site/docs/en/model-common-config.mdx。它是怎么看懂界面的每一步执行前Midscene 先截一张图交给多模态模型判断搜索框在哪个坐标然后执行动作再截一张图确认结果。整个过程不解析 DOM页面上有什么按钮、输入框全部从像素层面读出来。所以 CSS 类名变化、图标按钮、canvas 绘制的界面都不会让它失效——这也是它维护成本低的原因。模型侧可选 Qwen3.x、Doubao-Seed、GLM-4.6V、UI-TARS 等也支持 Ollama 自部署的开源模型数据面默认只发送截图个别接口可选带上 DOM。两个值得细看的能力自然语言定位Chrome 扩展即开即用装好 Chrome 扩展后右侧会弹出 Midscene 侧边栏直接输入type Midscene.js and click search它就在当前页面执行还可以提取结构化数据aiQuery、检查界面aiAssert。验证过的指令可以原样搬进代码调通再写进脚本不用先盲写。Bridge 模式本地脚本远程控制你的 Chrome在扩展里打开 Bridge Mode 后本地脚本可以通过AgentOverChromeBridge连接到你正在使用的桌面版 Chrome接管当前标签页或新开一个。你已登录的账号、Cookie、插件状态全部保留脚本执行期间人还可以随时手动介入。需要登录态的场景——内网系统、带验证码的注册页——就靠这个模式。一个完整小例子page: url: https://www.bing.com tasks: - name: Search for weather flow: - ai: Search for todays weather - sleep: 3000 - aiAssert: The results show weather information这 10 行脚本完成打开 Bing、搜索todays weather、等 3 秒、断言结果页出现天气信息一条midscene ./bing-search.yaml命令即可跑完并出报告。你大概率会问Q不联网能用吗每执行一步都要调用多模态模型默认需要网络。想本地化可以把模型指向 Ollama配置里填本地服务地址并按文档要求设置OLLAMA_ORIGINS*截图就不会出内网。Q跑得比传统自动化工具慢能优化吗单步确实比点击选择器慢因为每步都要过一次模型。官方给出的加速手段有四种用aiTap等即时动作接口替代ai的完整规划流程、降低截图分辨率、换更快的模型服务、开启缓存机制。Q团队怎么协作维护这些脚本YAML 脚本不要求写的人懂 API任何人都能读改天然适合放进版本控制CI 里跑完midscene_run目录里生成的可视化报告会逐步展示截图和执行结果不用登录测试环境就能排查失败原因。下一步先读 apps/site/docs/en/quick-start.mdx中文版在 apps/site/docs/zh/配好模型。参考 packages/cli/tests/midscene_scripts/ 里的真实脚本把你手上的一条冒烟测试改写出来。模型选不准时对照 apps/site/docs/en/model-common-config.mdx 的推荐列表挑一个。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进