Midscene.js 实战指南3 步跑通 AI 视觉 UI 自动化测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene上周我给一个电商页面补 UI 回归测试写 XPath 选择器写了一整天界面一改版又得返工。换成 Midscene.js 之后我只用一句中文告诉它在搜索框输入关键词并回车它就看懂页面截图完成了搜索、提取商品价格、判断价格是否超过 1000 元还自动生成了带截图的执行报告全程没写一个 CSS 选择器。一、项目定位与核心价值Midscene.js 是一款面向端到端E2E测试的开源 GUI Agent它把 AI 视觉模型接进 UI 自动化不依赖 DOM 结构或选择器而是直接读取界面截图用一句自然语言描述做什么由模型规划并执行点击、输入、滚动等操作再把结果提取成结构化数据、用断言校验界面。它的定位是只要人眼能看到它就能定位同一套 API 覆盖网页、Android、iOS、HarmonyOS 与桌面端。维度传统做法Midscene.js 做法元素定位手写 CSS / XPath 选择器一句自然语言描述靠截图定位界面改动选择器失效逐个修复元素仍可被看见、描述不变即可断言校验判断 DOM 节点是否存在校验颜色、高亮、布局等实际呈现运行平台每平台各一套工具链同一套 API 覆盖 Web / 移动 / 桌面二、真实场景演练 Midscene.js 的三类高频用法——网页脚本、真机驱动、本地浏览器桥接——都能用同一套 Agent 方法覆盖。场景一用 Playwright 自动化网页并提取商品这是最常用的入门路径用 Playwright 打开页面交给 Agent 用自然语言操作并提取数据。import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch(); 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); const items await agent.aiQuery({title: string, price: number}[]);这段代码先起一个 Chromium 页面并打开 eBay再让 Agent 执行输入关键词并回车最后用aiQuery把列表读成[{title, price}]数组运行后命令行会打印出商品标题与价格例如JBL Tour Pro 2对应551.21。场景二控制 Android 真机查看系统信息通过 adb 连接真机后用midscene/android的 Agent 即可驱动手机无需写控件树。import { AndroidAgent, AndroidDevice, getConnectedDevices } from midscene/android; const [dev] await getConnectedDevices(); const device new AndroidDevice(dev.udid); const agent new AndroidAgent(device); await agent.aiAct(打开设置应用); const version await agent.aiQuery(当前 Android 版本号);这段代码列出已连接设备并创建真机 Agent先执行打开设置再用aiQuery读出系统版本运行后手机自动进入设置页version返回类似MIUI 14 / Android 14的字符串。场景三桥接模式复用已登录的本地浏览器需要复用已有登录态和 Cookie 时用桥接模式让本地 SDK 接管正在使用的桌面 Chrome。import { AgentOverChromeBridge } from midscene/web; const agent new AgentOverChromeBridge(); await agent.connectCurrentTab(); // 在已登录的会话中执行 await agent.aiAct(打开 Gmail 收件箱); await agent.aiAssert(页面显示未读邮件列表);这段代码连接当前 Chrome 标签页并在该会话中操作不新开浏览器、不重复登录aiAssert会校验未读邮件列表是否出现失败时报告里保留当时的截图。三、适用边界与注意事项Midscene.js 的强项是看得懂就点得到但定位精度与速度都依赖背后的多模态模型存在明确的边界与坑点。定位精度取决于视觉模型弱模型会点偏查询类操作不缓存频繁调用更慢更贵原生下拉、Canvas、跨域 iframe 难定位XPath 缓存不保证长期稳定改页后失效Web 需 Chromium、Android 需 adb 环境准备其中后两条值得多说一句缓存命中只在 DOM 结构不变时生效页面大改后会自动回退到 AI 重新分析所以别把它当成一次录好永远可用的方案而aiQuery、aiAssert这类查询不参与缓存密集调用会直接推高 token 消耗与耗时。四、选型与组合建议Midscene.js 适合作为 AI 视觉层补进现有测试栈而不是替换已有的浏览器驱动或 CI 基础设施。什么时候选它界面频繁改版、选择器难维护有自定义控件或跨域 iframe需要校验视觉呈现而不只是节点存在要用同一套方法跨平台。怎么和现有工具搭网页侧继续用 Playwright / Puppeteer 负责导航与等待Midscene 负责看和做把aiAssert结果接回原有断言报告可独立查看或用?player-only1嵌入到其它页面。迁移成本现有 Playwright 用例只需引入PlaywrightAiFixture扩展test旧的选择器用例保持不动从零接入约装依赖 配模型 建 Agent三步。五、常见问题 ❓以下是实践中最常遇到的几个问题。Q需要联网调用云端模型吗A取决于模型。自托管的开源模型如 UI-TARS、Qwen-VL可离线运行用云端 API 才需要联网。Q支持哪些编程语言A官方为 JavaScript / TypeScript SDK 与 YAML 脚本社区另有 Python、Java 封装。Q定位不准、点偏了怎么办A先升级midscene/web到最新版再换更强的视觉模型并核对MIDSCENE_MODEL_FAMILY提示词加入视觉特征与位置如右上角的人形头像小元素可开启deepLocate或把 dpr 提到 2。Q如何提速、降本A用即时接口aiTap代替通用aiAct降低截图分辨率对重复执行的流程开启缓存CI 需把缓存文件提交到仓库才能命中。Q截图会发到哪里A默认把页面截图发给配置的模型若aiAsk/aiQuery传domIncluded: true会额外附带 DOM 信息敏感数据场景可关闭。Midscene.js 把看得懂界面做成了可复用的 API适合选择器难维护、需要校验视觉呈现的自动化场景。下一步先按场景一装好midscene/web和一个可用模型把 eBay 搜索示例跑通、看到报告生成再决定是否接入自己的用例。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考