一张截图跑通 UI 测试Midscene.js AI 视觉自动化实战指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个由 AI 视觉驱动的 UI 自动化工具它不靠 CSS 选择器和 XPath而是用截图加自然语言完成点击、输入与校验。这篇文章带你从零跑通第一个自动化脚本。我试的场景是让它在一个电商网站上搜索headphones返回商品标题和价格并断言价格是否超过 1000 美元。全程没有一行代码去描述哪个按钮、哪个输入框每一步只说人话。这就是 Midscene.js 的工作方式——把界面当成人眼看到的画面模型先看懂截图再决定怎么操作。 不写代码先体验一遍最轻量的路径是官方 Chrome 扩展源码在仓库的 apps/chrome-extension/ 目录。安装后在设置里粘贴一段模型配置浏览器右侧就会出现 Midscene 指令面板。打开任意网页在侧边栏输入一句自然语言比如点击登录按钮提取页面上的商品列表页面顶部有导航栏它会对照当前截图自己判断并完成操作。这一步的价值在于先验证指令。找到一句好用的描述后直接把它写进脚本即可。如果更想进入代码世界一条安装命令就够了npm install midscene/web # 配置视觉模型以 Qwen 为例 export MIDSCENE_MODEL_BASE_URLhttps://dashscope.aliyuncs.com/compatible-mode/v1 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAMEqwen3.7-plus export MIDSCENE_MODEL_FAMILYqwen3跑完之后终端会打印报告文件路径用浏览器打开就能看到 AI 每一步看到了什么、点在了哪里。和写选择器相比实际好在哪传统 UI 自动化基本是选择器路线脚本靠 CSS 或 XPath 路径找到元素再操作。这条路线有两个结构性短板——路径脆弱页面结构一改就失效视野有限纯图标按钮、canvas 画出来的游戏画面、原生应用界面它都看不见。Midscene.js 走另一条路只看截图。模型先看懂界面理解指令定位目标元素再模拟鼠标或触摸操作。选择器路线Midscene.js 视觉路线元素定位手写 CSS / XPath 路径凭截图定位不依赖 DOMUI 改版后选择器失效逐个修脚本基本不用改canvas、原生应用覆盖不到人眼能看到就能操作结果校验只能判断节点是否存在可校验颜色、布局、渲染效果对维护脚本的人来说最实际的影响是前端做一轮视觉改版后你不用再对着开发者工具找新路径脚本大概率原样能跑。你能拿 Midscene.js 做什么三种基本操作aiAct用自然语言描述目标AI 自行拆解并完成多步操作aiQuery从画面提取结构化数据可指定 JSON 返回格式aiAssert校验界面状态是否符合预期失败直接抛错。另有aiTap点击、aiInput输入、aiWaitFor等待某状态出现等即时方法一次只做一个小动作比多步规划更快。跨平台同一套 APIWeb、Android、iOS、HarmonyOS、桌面应用调用的是同一批方法仓库为每个平台配了 Playground接上真机就能先试指令再写代码。YAML 脚本用文本文件描述自动化流程不需要学任何 API详见 YAML 脚本指南。HTML 报告每次运行生成可视化报告逐步回放截图、时间轴和 AI 的规划过程。结果缓存重复执行相同指令时复用之前的规划与定位结果官方示例里同一流程的耗时从 51 秒降到 28 秒。三个实战场景场景一给 Playwright 测试加一层自然语言最典型的用法是把 Midscene.js 接进已有的 Playwright 测试。把页面包进一个 Agent之后的操作就都变成一句话。下面这段脚本在 eBay 上搜耳机、提取前两件商品的标题和价格并断言左侧存在分类筛选import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch({ headless: true }); const page await browser.newPage(); await page.goto(https://www.ebay.com); const agent new PlaywrightAgent(page); await agent.aiAct(type Headphones in search box, hit Enter); await agent.aiWaitFor(there is at least one headphone item on page); const items await agent.aiQuery({itemTitle: string, price: Number}[]); console.log(headphones in stock, items); await browser.close();跑完约一分钟终端直接打印出aiQuery提取到的商品数组同时midscene_run/report目录下生成一份报告。用例失败时打开报告能看到 AI 当时的截图和推理定位问题不用猜。场景二不写代码的冒烟测试另一类高频场景是不动代码的冒烟验证发版前想确认首页还能正常搜索但不想为它维护一个测试工程。这时写一个 YAML 文件用 CLI 执行即可。下面这个脚本打开必应、搜索天气并断言结果页有天气信息page: url: https://www.bing.com tasks: - name: Search for weather flow: - ai: Search for todays weather - sleep: 3000 - name: Check results flow: - aiAssert: The results show weather informationYAML 脚本对非工程师友好在这一点换测试页面时只改一行url改断言时只改一句中文描述不用了解测试框架。场景三移动端验证以及速度问题目标换成手机时思路完全一致Android 通过 USB 连接需要 adbiOS 通过 WebDriverAgent然后同样调用aiAct、aiQuery。仓库里有现成案例比如在 Android 手机上打开懂车帝查看小米 SU7 的参数。需要提醒的是速度AI 每次调用都是一次模型往返脚本整体比纯选择器慢。如果同一流程要在 CI 里反复跑开启缓存能明显提速配置上只多一个字段——给 Agent 加上cache: { id: 你的测试标识 }首次运行写入缓存之后命中即复用。常见问题能离线运行吗能。所谓视觉模型是具备图像理解能力的多模态模型Midscene.js 除了调用云端 API也支持自托管的开源模型如 UI-TARS、Qwen-VL 系列。模型部署在内网时截图不出内网适合涉及敏感数据的内部工具。执行速度慢吗一次aiAct通常要数秒因为它包含多轮模型调用。想更快用aiTap、aiInput这类即时方法替代多步规划降低截图分辨率换响应更快的模型服务开启缓存。这几项叠加后简单流程的单次操作接近普通脚本的速度。会不会点错稳定性如何内置两层保险一是aiAct每完成一步都基于最新画面重新规划页面状态和预期不符时会重新决策二是可以把断言写进指令例如点击后购物车数量应变成 1AI 会执行中校验不符合预期立即报错。目标元素小、和周围元素容易混淆时可加deepLocate选项提高定位精度。怎么接进 CIPlaywright 版提供 reporter在配置里加一行midscene/web/playwright-reporter多条用例可合并成一份报告。流水线里照常跑测试命令把midscene_run/report里的 HTML 上传为构建产物失败后直接看回放即可。会向模型发送什么数据默认是页面截图在aiQuery等调用中打开domIncluded选项时才会附带 DOM 文本。介意的话选择自托管模型。想动手的话执行git clone https://gitcode.com/GitHub_Trending/mid/midscene拉取完整仓库按 快速开始指南 配好模型先在你每天用的一个网页上跑通第一条指令再逐步接入 Playwright 或 YAML 脚本。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考