Midscene.js 视觉自动化测试：3 步跑通 Web、App 和桌面，维护成本能省多少

Midscene.js 视觉自动化测试3 步跑通 Web、App 和桌面维护成本能省多少【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneUI 测试最怕的不是写是养。选择器散落在几百个用例里一次页面改版就要全线排查换个平台iOS 一套、Android 一套、桌面还有一套。Midscene.js 走的是另一条路它不读 DOM只看屏幕截图每一步操作用一句自然语言描述。同一个 YAML 脚本Web、Android、iOS、桌面都能跑断言的也是用户实际看到的内容。3 步跑通第一个用例不需要理解任何内部机制先让脚本动起来git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene npm install export OPENAI_API_KEYyour_key # 或 Qwen / GLM 等支持的多模态模型然后写一个 YAML 脚本。这是仓库测试目录里的真实写法见 packages/cli/tests/midscene_scripts/核心就两行target: serve: ./tests/server_root url: index.html tasks: - name: click title flow: - aiTap: click the title - name: check title flow: - aiAssert: the content title is My App常用指令就四个记住它们就能写大多数用例指令干什么例子aiAct多步复合操作输入用户名密码并登录aiTap点一个元素点击右上角的加号aiQuery按结构提取页面数据返回商品名、价格数组aiAssert/aiWaitFor断言 / 等待某个画面出现价格显示为 49.99更完整的指令语义可以参考 核心代理实现 中的方法签名。跑完后自动产出一份带截图步骤的报告出问题直接翻报告不用盯着终端猜。一句话说清它是怎么工作的别把它想成高级选择器它其实是一个循环看 → 想 → 做 → 验。看对当前界面截图交给多模态模型想你说点击登录按钮模型在图里找到按钮位置返回坐标做框架把坐标换算后真正执行点击、输入验再截一张图确认动作生效再进入下一步。这就是为什么图标按钮、Canvas 画布、跨域 iframe 甚至原生 App 都不在话下——只要人眼能看见模型就能定位不需要任何 DOM 语义标注。需要结构化数据时aiQuery也可以选带 DOM 一起判断。模型层是可插拔的Qwen、GLM、Gemini、UI-TARS 等都能接配置集中在 模型适配层。平台差异则被封装在各自的适配包里Web 走 packages/web-integration/Playwright / PuppeteerAndroid 走 packages/android/ADB scrcpyiOS 走 packages/ios/WebDriverAgent桌面走 packages/computer/。对上层的任务流来说它们长得一模一样。3 个最值得用的落地场景场景一Web 回归测试嵌进现有 CI。不用推倒重来在 Playwright 用例里加一个 agent 即可import { PlaywrightAgent } from midscene/web/playwright; const agent new PlaywrightAgent(page); await agent.aiAct(输入用户名 standard_user 并登录); await agent.aiAssert(登录后展示商品列表);页面改版后大概率只是某句描述需要微调不用满世界找选择器。场景二移动端一套脚本多端复用。同一个tasks流程切换 target 就能分别指向 Android 真机或 iOS 设备。对设置这类跨平台界面操作步骤天然一致维护成本直接砍半。Android 端如何配置设备可看 Android Playground 源码 周边的示例工程。场景三把人肉目检变成自动断言。传统断言只能验证节点在不在Midscene 的aiAssert验证的是看起来对不对——高亮色、布局顺序、渲染状态。视觉回归验收第一次可以不靠人眼。提速技巧清单让 AI 测试更快更省✅开任务缓存相同步骤 相似画面的定位结果会复用重复用例的模型调用量明显下降缓存配置见 缓存实现。✅按难度配模型简单点击用响应快的模型复杂页面理解上强定位模型。仓库测试里就通过strategy字段控制策略参考 extended-options.yml。✅把长流程拆短一条aiAct塞十个动作失败一次全白跑。拆成小步定位问题更快报告里也更清楚是哪步挂了。✅断言写看到的aiAssert: 标题显示为 My App比aiAssert: 存在 h1更稳也更贴近用户视角。4 个高频坑点与对策① 元素定位失败—— 原因描述太笼统点一下登录或目标根本不在当前画面里。对策加视觉特征蓝色的圆形设置图标必要时先滚动再定位。② 某一步卡住超时—— 原因页面还在加载、动画没收尾模型拿到的图是半成品。对策在关键步骤前用aiWaitFor显式等待画面就绪并给足超时时间。③ AI 调用费用失控—— 原因每条aiAct背后都是模型请求用例多了费用会滚雪球。对策开缓存、精简冗余步骤、对高频回归用例换轻量模型。④ 跨平台行为不一致—— 原因不同平台的输入机制不同Android 走 ADBiOS 走 WebDriverAgent手势细节有差异。对策平台相关的描述单独拆出来共用逻辑保持平台无关的写法。小结Midscene.js 的价值很实在用看屏幕替代读结构让 UI 测试从追选择器的体力活变成改句子的脑力活一套脚本同时覆盖 Web、移动端和桌面报告自动生成可回放。模型每半年就强一截这个框架的天花板会跟着一起抬。代码在 packages/ 下按平台清晰分包文档在 apps/site/docs/想动手时从 Playground 开始最顺。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考