视觉AI自动化测试实战让UI测试告别脆弱的CSS选择器【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene如果你维护过一套跑了两年以上的UI自动化用例大概率经历过这样的场景某个周一早上构建脚本突然红了定位日志里躺着一行找不到元素。查了半天发现是前端同事把按钮的class从btn-primary改成了btn-main仅此而已。改回选择器跑通然后祈祷下次重构别再来一次。这套改选择器—跑测试—再改选择器的循环正是传统UI测试最消耗耐心的地方。一、传统自动化测试的痛点到底痛在哪1. 选择器像玻璃一碰就碎不管是 Selenium 还是 Cypress主流的UI测试思路都是先定位、再操作。定位依赖 DOM 结构或无障碍树。问题在于前端代码只要发生一次 class 重命名、一次 DOM 层级调整测试脚本就得跟着改。界面本身没变变的只是实现细节但测试却先破防了。2. 有些元素你根本选不到更麻烦的是那些没有语义标注的元素一个纯图标的分享按钮、一个用canvas绘制的图形、一个自定义控件里的内部区域。它们在 DOM 里可能是空壳也可能压根不存在。你没法给一个不存在的节点写选择器。3. 原生应用和跨域 iframe传统工具够不着网页里的跨域 iframe 受同源策略限制原生 AppAndroid、iOS更没有 DOM 可言。这类场景要么换工具、要么放弃自动化最后退化回人工点点点。二、换个思路让模型直接看界面1. 从找节点变成看截图Midscene.js 的思路完全不同——它不再尝试解析 DOM 或无障碍树而是把屏幕截图交给多模态视觉模型让模型理解当前界面长什么样、元素在什么位置。你只需要用自然语言描述目标剩下的定位工作交给视觉AI。比如点击右上角的设置图标模型会从截图里认出那个齿轮图标在哪里而不是去查它的class是什么。这正好覆盖了上一节提到的三个痛点选择器不脆了、无语义元素能识别了、原生界面也能测了。2. 开源、可自托管不是黑盒Midscene.js 是开源项目模型通过标准接口接入你可以选择云端多模态大模型也可以接本地部署的模型。脚本和数据都掌握在自己手里适合对数据敏感的内部系统。上面这张图是 Midscene 面向 Web 的 Playground左侧输入一句自然语言指令右侧就是被测网页的实时画面。不需要先搭项目就能先体验说一句话、操作一步的流程。三、五步跑通第一个自然语言UI测试1. 准备好一个多模态模型Midscene 需要具备 UI 定位能力的视觉模型。最简单的做法是在运行目录下放一个.env文件声明模型服务地址和密钥MIDSCENE_MODEL_BASE_URLhttps://你的模型服务地址/v1 MIDSCENE_MODEL_API_KEY替换为你的 API Key MIDSCENE_MODEL_NAME你的模型名称 MIDSCENE_MODEL_FAMILY你的模型系列这段配置的作用是告诉 Midscene 该找谁看图。如果你还没想好用哪个模型官方文档里有一份支持的模型清单可以参考。2. 安装命令行工具npm i -g midscene/cli全局安装后你就拥有了一个名为midscene的命令。Node.js 建议使用 20.19、22.12 或 24 版本太旧的 patch 版本可能跑不动。3. 写一个 YAML 脚本Midscene 定义了一套 YAML 格式的脚本语言一个最小脚本长这样page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果显示天气信息解释一下这段脚本在做什么page.url声明被测页面tasks里是一个任务列表flow是步骤序列——先执行一次交互ai是aiAct的简写表示规划并执行一次操作等三秒最后断言结果页确实展示了天气信息。4. 用一条命令执行midscene ./bing-search.yaml命令行会输出每一步的执行进度跑完后自动生成一份可视化报告包含每一步的截图、模型思考过程和定位结果。这个执行完顺手出报告的特性对排查问题非常有用——你不用靠脑补直接翻截图看模型当时看到了什么。5. 换个平台换一行配置而已同一套 YAML 语法把page段换成android、ios或computer段就能指向不同终端。这也是 Midscene 跨平台自动化设计上最顺手的一点脚本语法是统一的差异被收敛在环境配置里。四、三条核心API覆盖日常八成场景跑通 CLI 之后如果你想把能力集成进自己的测试代码Midscene 提供了 Agent API。以 Playwright 为例const agent new PlaywrightAgent(page); // 规划并执行一次交互 await agent.aiAct(点击登录按钮); // 提取结构化数据 const products await agent.aiQueryArray{ name: string; price: number }( 页面中的商品{name: string, price: number}[], ); // 检查界面状态 await agent.aiAssert(页面顶部显示导航栏);aiAct描述一个目标模型自己规划操作步骤并执行适合打开设置页然后点击编辑这类多步操作。aiQuery按你声明的结构从界面提取数据返回 JSON适合做数据采集或断言前的准备。aiAssert验证某个自然语言描述的条件是否成立不成立就抛错错误信息里会带上模型判断的原因。YAML 脚本里还有aiTap、aiInput、aiScroll、aiWaitFor这类即时操作粒度更细适合对某一步做精确控制。日常绝大多数自动化需求这几条 API 基本够用了。五、同一份思路五种终端跨平台自动化是 Midscene 的另一个卖点但这里的跨平台不是套壳的一次编写处处运行而是一套方法论适配多种终端Web 走 Playwright/PuppeteerAndroid 走 ADB 与 ScrcpyiOS 走 WebDriverAgent再加上 HarmonyOS 和 Windows/macOS/Linux 桌面端。上面两张图分别是 Android 和 iOS 的 Playground左侧是模型每一步的思考与定位结果右侧是真机或模拟器的实时画面。同一个打开设置并查看版本号的指令在两个平台上的运行逻辑是镜像的只是底层驱动不同。对于需要多端回归的团队来说这意味着测试思路可以沉淀为一套团队通用的语言而不是每种设备学一套定位语法。另外如果你希望用自己本地的 Chrome 而非脚本启动的浏览器可以走 Bridge 模式在浏览器里开一个监听通道代码通过桥接对象控制桌面 Chrome适合调试已有登录态的页面。六、实战一个完整的电商下单流程把前面几节串起来写一个完整的 YAML 脚本——模拟用户从搜索到结算的完整链路page: url: https://example-shop.com tasks: - name: 搜索商品 flow: - ai: 在搜索框输入 智能手机 并回车 - sleep: 3000 - aiAssert: 搜索结果列表已展示 - name: 加入购物车 flow: - ai: 点击第一个商品进入详情页 - ai: 点击 加入购物车 按钮 - aiAssert: 页面出现 已加入购物车 提示 - name: 结算 flow: - ai: 进入购物车页面 - ai: 点击 结算 按钮 - aiAssert: 订单确认页显示了商品名称与价格注意这里的写法每个ai步骤都描述做什么而不是点哪个选择器。所以即便商品卡片的结构改了、按钮换了个位置只要界面上的文案和布局还是人能看懂的样子脚本大概率不用动。这就是视觉方案最实在的收益——测试跟着用户视角走而不是跟着代码实现走。七、客观聊聊边界什么场景该用什么场景慎用任何方案都有适用范围视觉AI自动化也不例外这里说几点实话准确率取决于模型而不是工具。Midscene 负责把截图和指令交给模型但看图说话的能力上限由模型决定。界面越复杂、元素越密集定位出错的概率越高。建议在正式投入前用你真实的业务页面先跑一批样例评估。每次操作都有成本。视觉识别需要调用多模态模型相比纯 DOM 定位单次操作更慢、也涉及模型 API 费用。对于几千条用例的巨型回归套件需要评估整体成本。好在 Midscene 提供了元素定位缓存同一类定位在 XPath 仍有效时会直接复用能省下不少调用。它不擅长精确到像素的校验。需要断言某元素宽度恰好是 320px这类强精确需求视觉模型给不了确定性答案这类场景更适合保留传统断言。数据敏感的团队。界面截图会离开本机送到模型服务端如果被测系统对画面内容有保密要求需要确认模型的部署方式是否合规。一句话总结边界视觉AI自动化擅长描述性、变化频繁、多终端的回归测试不适合精确性、超大规模、离线确定性的硬校验。二者并不互斥混着用往往才是真实团队的姿态。八、下一步从官方文档的第一个demo开始如果你被上面的思路打动建议直接动手验证打开项目里的官方快速开始文档apps/site/docs/zh/quick-start.mdx照着配置模型、安装 Chrome 扩展在任意网页上输入一句点击登录按钮试试。跑通之后再去读 YAML 脚本和 Agent API 的完整参考apps/site/docs/zh/automate-with-scripts-in-yaml.mdx。如果你已经跑通了第一个脚本会发现自己最深的感受可能不是自动化真神奇而是原来测试脚本可以写成给人读的说明书。这大概就是视觉AI自动化测试这件事最值得的地方——它让测试代码重新变得像文档一样可读而不是一串脆弱的、只有机器才懂的定位表达式。而这一切的起点只是你第一次向模型描述我想做什么。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考