视觉自动化测试实战Midscene.js 让 UI 测试从改版就崩到说人话就行【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene做 UI自动化测试的人多半经历过这样的深夜产品只改了一个按钮样式几十条写好的用例却集体阵亡。不是功能坏了而是选择器找不到了。Midscene.js 想从根上解决这件事——它把测试从结构定位切换到视觉理解让 AI 像人一样看着屏幕操作界面。下面用一条从体验到落地的完整路线带零基础读者认识这个开源工具并评估它能否接进你手头的项目。先看翻车现场结构驱动测试的三个死穴传统 UI 自动化测试的思路是先给页面元素起外号——一条 CSS 选择器#submit-btn或一段 XPath。测试执行时代码靠这些外号在 DOM 里对号入座。这套办法沿用多年但三个死穴越来越明显改版即失效。类名、层级、文案一变外号就对不上号了。改页面的人毫不知情测试却在第二天红成一片排查半天才发现是定位问题根本不是功能问题。看不见的够不着。没有语义标记的元素、canvas 画布里的内容、跨域 iframe 内部的区域结构驱动统统无能为力——DOM 里压根没有可用的坐标。验证不了看起来怎样。结构测试只能断言某个节点存在回答不了登录按钮是不是醒目的蓝色弹窗有没有挡住关键内容——而这些恰恰是用户真正在乎的。一句话总结结构驱动把测试拴在了实现细节上而实现细节恰恰是整个项目里变动最频繁的部分。换个思路让 AI 直接看屏幕Midscene.js 走了另一条路不读 DOM只看截图。它的工作流程可以拆成三步截屏——把当前界面拍成一张图理解——交给多模态视觉模型让 AI 认出图上哪里是搜索框、哪个是登录按钮执行——你用自然语言下达指令AI 边看边判断完成操作并继续下一步。打个比方相当于给 AI 装上眼睛再配一本说明书。你说的每句话它都是先看、再想、后动手。这套机制带来的直接收益是✅重构免疫样式怎么改都不怕AI 认的是长什么样而不是叫什么名✅触达无死角人眼能看到的界面它基本都能操作包括 iframe、原生控件、画布内容✅能验观感基于视觉做查询和断言可以直接核对界面是否出现了预期元素、状态是否符合描述。上图是 Midscene.js 的 Web 操作台左边输入一句大白话右边浏览器立刻照做。这种说一句、看一眼的交互就是它的日常形态。零基础体验三步在 Chrome 扩展里跑通自然语言指令怕上手门槛完全不必。最轻量的入口是一个 Chrome 扩展装好它你就拥有了一个交互式游乐场——在真实网页上反复试、随手改提示词、立刻看结果。第一步从 Chrome 应用商店安装 Midscene 扩展第二步打开扩展面板在浏览器工具栏的扩展图标下进入设置填好模型参数——例如模型提供商和 API Key第三步打开任意网页在面板里输入一句自然语言指令回车观察 AI 的定位与操作过程。全程不用写一行代码。你可以在这一步顺手验证两件事模型链路是否顺畅以及用大白话描述操作到底符不符合你的直觉。从体验走向脚本一条命令创建自动化项目扩展适合试水要沉淀成可重复执行的回归用例还是得靠脚本。Midscene.js 提供完整的 JavaScript SDK用法相当克制一条命令即可初始化项目npm create midscenelatest接着在环境变量里配置模型信息export MIDSCENE_MODEL_PROVIDERopenai export MIDSCENE_API_KEY你的密钥然后在代码里用自然语言驱动测试await agent.aiAct(点击搜索框输入 Midscene.js 并回车);aiAct是说一步、做一步的入口同类 API 还覆盖了信息提取aiQuery与断言aiAssert。写测试的感觉从翻译页面结构变成了口述操作步骤。另外如果不希望被测页面跑在脚本内置的浏览器里还可以用桥接模式——直接连接你日常使用的桌面 Chrome让脚本在你熟悉的浏览器环境里工作。一套心智模型四个平台跨平台 UI 自动化测试盘点Midscene.js 真正拉开差距的地方在于跨平台能力Web、Android、iOS、桌面应用共用同一套看图说话的心智模型接口风格也保持一致。平台连接方式典型场景WebPlaywright / Puppeteer / 桥接模式网页回归、跨域 iframe、视觉断言AndroidADB 连接设备原生 App 操作、系统设置验证iOSWebDriverAgentiPhone / iPad 上的 App 与系统界面测试桌面应用屏幕级控制Windows / macOS / Linux 原生程序、Electron 应用上面两张图分别是 Android 与 iOS 的自动化现场左侧是步骤与指令右侧是设备真实屏幕。无论手机还是桌面交互方式统一为描述 → 执行 → 查看。这意味着你在 Web 上积累的自然语言用例写法几乎可以平移给移动端学习成本被压到最低。值得一提的是项目对 HarmonyOS 设备也提供了支持国产系统生态同样在覆盖范围内。实战避坑清单模型、设备与性能工具再顺手用不好也会翻车。结合社区反馈和项目文档重点盯住三块模型配置类模型提供商与 API Key 必须与项目要求一致先确认环境变量真的被读到了网络不通或服务商限流时先排查基础连通性再查代码不同模型对视觉任务的理解力有差异选型前先用几条典型用例做横向对比。设备连接类Android确认已开启 USB 调试adb devices能看到设备再往下走iOS检查设备信任设置确认 WebDriverAgent 处于运行状态连接正常但操作异常时优先看设备屏幕是否处于亮起、解锁状态。性能与稳定性类截图质量直接决定识别精度但分辨率越高耗时越长需按场景取舍重复执行的断言可以引入缓存减少重复的模型调用网络波动大时把超时时间调宽比反复重试更省心把相关的多个操作合并成一条指令减少交互轮数往往能明显提速。文档、示例与社区入口想深入官方文档是最完整的起点入门指南在 apps/site/docs/en/quick-start.mdxAPI 细节在 apps/site/docs/en/api.mdxAndroid 起步教程在 apps/site/docs/en/android-getting-started.mdx。源码仓库本身就是一座用例金矿核心能力测试在 packages/core/tests/ai/浏览器场景示例在 packages/web-integration/tests/ai/移动端 demo 在 packages/android/demo/。想通读完整代码git clone https://gitcode.com/GitHub_Trending/mid/midscene后按目录浏览即可。遇到问题可以到官方 Discord 实时交流或在项目 Issue 区搜索、提交问题——大多数连不上识别不准的坑前人已经踩过并留下了答案。最后说一句回头看UI 自动化测试困住大家太久的其实不是自动化本身而是如何告诉机器界面长什么样。Midscene.js 给出的答案是别费劲翻译了让它自己看。从今天打开那个 Chrome 扩展、输入第一句帮我点击登录按钮开始你离说人话做测试就只差这一小步。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考