视觉UI自动化测试终极入门如何用一句话驱动 Web、Android 与 iOS 的界面操作【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene你有没有过这样的经历写好的 UI 测试用例因为前端改了个 class 名、按钮挪了个位置第二天就全线飘红或者遇到一个纯图标按钮、一段 canvas 绘制的图表怎么也定位不到再或者你想测的是原生 App却发现传统自动化工具根本够不着。维护选择器的时间比写测试的时间还长很多人最后干脆放弃了自动化。如果你正在被这类问题折磨那么Midscene.js 这款开源的视觉UI自动化测试工具很可能是你需要的答案。它的思路很特别不读 DOM、不看结构树只看截图用自然语言让多模态模型理解界面、规划操作实现真正意义上的所见即可测。一句话认识它3 秒判断适不适合你Midscene.js 是一个纯视觉驱动的跨平台自动化测试 SDK。你用中文或英文描述做什么它通过截图 多模态模型自行理解界面并执行操作覆盖 Web、Android、iOS、HarmonyOS 与桌面应用。亮点速览自然语言驱动测试aiAct、aiQuery、aiAssert三个核心 API 覆盖操作、提取、断言纯截图工作不依赖选择器元素重构不再导致用例失效跨平台自动化测试工具同一套 API 跑遍浏览器、手机、桌面可视化报告每次运行生成可逐步回放的报告AI 行为不再是黑盒零代码体验Chrome 插件即装即用不写一行代码就能试开源免费MIT 协议支持 Qwen、GLM、Gemini、UI-TARS 等多种模型实操演示8 步跑通你的第一个自然语言自动化脚本我们以最常用的 Web 场景Playwright 驱动为例带你把第一个脚本完整跑起来。整个过程只需几分钟。第一步创建项目并安装依赖npm init -y npm install midscene/web playwright tsx dotenv --save-dev第二步配置 AI 模型Midscene 的元素定位依赖多模态模型的视觉能力所以这一步很关键。以 OpenAI 兼容接口为例写入.env文件export MIDSCENE_MODEL_PROVIDERopenai export MIDSCENE_MODEL_API_KEY你的密钥 export MIDSCENE_MODEL_NAMEqwen3-vl-plus export MIDSCENE_MODEL_FAMILYqwen不同服务商Doubao、GLM、Gemini、UI-TARS 等的配置略有差异官方文档的支持的模型与配置页面可以直接复制对应配置。第三步编写脚本新建demo.ts你会发现整段代码里几乎没有选择器——所有关键步骤都是大白话import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; import dotenv/config; const sleep (ms: number) new Promise((r) setTimeout(r, ms)); (async () { const browser await chromium.launch({ headless: false }); // 实时观察运行 const page await browser.newPage(); await page.goto(https://www.ebay.com); await sleep(3000); const agent new PlaywrightAgent(page); // 用自然语言执行操作 await agent.aiAct(在搜索框输入 Headphones然后回车); await agent.aiWaitFor(列表中至少出现一个耳机商品); // 提取结构化数据 const items await agent.aiQuery( { title: string, price: number }[], 列表中的耳机商品, ); console.log(headphones in stock:, items); // 用自然语言做断言 await agent.aiAssert(页面左侧有一个分类筛选栏); await browser.close(); })();第四步运行npx tsx demo.ts第五步查看报告运行结束后控制台会打印一行类似midscene_run/report/xxx.html的路径。用浏览器打开它就能看到每一步操作的截图、AI 的规划思路、执行耗时与最终结果可以像看录像一样逐帧回放。这个报告也是排查AI 为什么点错了的核心工具。第六步试试零代码路径可选如果你连脚本都不想写可以直接安装 Chrome 扩展打开任意网页在侧边栏输入点击搜索框并输入 xxx就能立即看到效果。插件与 SDK 共用同一套核心引擎在插件里验证通过的指令写进脚本后行为一致。第七步换个平台继续跑跑通 Web 之后你会发现 Android、iOS 的玩法几乎一样——换一个 Agent 实现API 完全不变。文档里给出了各平台的接入指南Android 通过 ADB 连接设备iOS 借助 WebDriverAgent均无需 root 或越狱。第八步接入你的测试套件Midscene 可以嵌入现有的 Playwright 测试用例中作为测试代码的一部分来使用与常规断言协同工作。比如用 AI 完成登录 → 用普通断言校验数据这种混合写法是很多团队喜欢的模式。进阶技巧让 AI 更聪明、更快、更省钱的 5 个技巧跑通之后下面几个技巧能明显提升你的使用体验1. 用即时操作 API替代通用ai()。agent.aiTap(登录按钮)、agent.aiQuery(...)这类即时接口把规划 定位 执行拆得更细每一步目的单一成功率比笼统的ai(点击登录按钮并进入主页)更高也更省 token。2. 开启缓存加速调试。重复调试同一脚本时AI 每次重新规划很费时间。给 Agent 配置cache: { id: my-test }后规划与元素定位结果会被缓存到midscene_run/cache官方实测同类任务耗时可从 51 秒降到 28 秒。注意查询与断言类操作不会被缓存保证结果总是新鲜的。3. 定位不准时试试deepLocate。如果 AI 大致点对了目标、但总偏几个像素可以在定位操作上加deepLocate: true对边界敏感的小元素有明显改善。4. 用 JavaScript 拆分复杂任务。与其让 AI 一次干十件事不如把它拆成多步循环。例如先用aiQuery拿到列表再用for循环逐条判断、逐条点击。可控性更强出错了也知道是哪一步的问题。5. 善用 YAML 脚本与报告播放器。复杂流程可以写成 YAML 结构化脚本交给 CLI 执行报告页面还支持player-only1之类的参数嵌入到你的内部平台团队评审时直接看回放。横向对比和传统方案比它赢在哪里、输在哪里为了让你判断得清楚我把它和两类常见方案放在一起看对比维度传统选择器方案Selenium/Playwright读 DOM/无障碍树的 AI 工具Midscene.js 纯视觉方案元素定位依据CSS/XPath 选择器页面结构屏幕截图页面重构后选择器失效需逐个修结构变化可能失效视觉不变即稳定纯图标按钮 / canvas难以定位常看不见人眼可见即可操作原生 App / 跨域 iframe大多够不着难以触达能截图就能测视觉效果校验颜色、布局做不到做不到天然支持执行速度与成本快、便宜中每次操作都调用模型相对慢、有成本确定性高中依赖模型能力偶有波动结论很直白如果你的界面高度稳定、追求极致的执行速度与零成本传统选择器依然是性价比之王但如果你受够了选择器维护、要覆盖原生应用与复杂 UI、或者想验证用户真正看到的效果纯视觉方案的优势是碾压性的。Midscene 也允许你在同一脚本里混合两种风格——稳定路径用普通断言复杂交互交给 AI两头的好处都拿到。适用人群这几类人最该立刻上手测试工程师写用例像写需求文档重构不再背锅前端开发者自测、跨浏览器验证、canvas/图表场景一把梭做 AI Agent 的开发者通过 Skills 让 AI 编程助手直接驱动各平台界面想零成本验证产品的人装个 Chrome 插件就能让 AI 帮你走查页面中小团队没有专职测试基建用自然语言快速搭建可复用的自动化脚本避坑指南新手最常见的 5 个坑坑 1模型没有视觉能力或MIDSCENE_MODEL_FAMILY配错。元素定位完全依赖多模态模型务必选支持视觉的模型并核对 family 配置与文档一致否则可能出现诡异的定位失败。坑 2提示词只写功能、不写视觉特征。aiTap(个人中心)模型可能不知道图标长什么样改成aiTap(人形头像 icon)或aiTap(页面右上角的人形头像图标)命中率立刻提升。多用位置 视觉特征描述。坑 3Chrome 插件与其它扩展冲突。报错Cannot access a chrome-extension:// URL of different extension时多半是别的插件注入了 iframe/script。到chrome://extensions/找到对应 ID 的插件禁用即可。坑 4截图分辨率太低导致小元素定位偏移。网页里可以把 devicePixelRatio 调到 2画面更清晰、定位更准代价是多耗 token也可以用小分辨率截图降低成本按场景取舍。坑 5用旧版本踩新坑。定位算法随版本持续优化遇到奇怪问题先npm install midscene/weblatest升级再排查。下一步行动从 30 分钟体验开始别急着写复杂脚本。我的建议是先装 Chrome 插件花 10 分钟在你自己最常用的网页上玩几条指令感受过一句话操作界面的爽感后再照着官方快速开始文档把 demo 脚本跑一遍然后挑一个你正在维护的页面写一条真实用例。Midscene.js 目前的想象空间很值得期待多模态模型越来越强意味着定位精度、复杂任务规划能力会持续提升社区已出现 Python、Java 等语言 SDK以及面向车机、PC 的扩展方案当视觉 自然语言成为 UI 自动化的默认范式测试工程师的工作重心将从维护定位符转向设计更贴近用户的验收描述——这大概就是自动化测试的下一个十年。现在开始成本不过是一个周末的下午。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 视觉UI自动化测试终极入门：如何用一句话驱动 Web、Android 与 iOS 的界面操作？
视觉UI自动化测试终极入门如何用一句话驱动 Web、Android 与 iOS 的界面操作【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene你有没有过这样的经历写好的 UI 测试用例因为前端改了个 class 名、按钮挪了个位置第二天就全线飘红或者遇到一个纯图标按钮、一段 canvas 绘制的图表怎么也定位不到再或者你想测的是原生 App却发现传统自动化工具根本够不着。维护选择器的时间比写测试的时间还长很多人最后干脆放弃了自动化。如果你正在被这类问题折磨那么Midscene.js 这款开源的视觉UI自动化测试工具很可能是你需要的答案。它的思路很特别不读 DOM、不看结构树只看截图用自然语言让多模态模型理解界面、规划操作实现真正意义上的所见即可测。一句话认识它3 秒判断适不适合你Midscene.js 是一个纯视觉驱动的跨平台自动化测试 SDK。你用中文或英文描述做什么它通过截图 多模态模型自行理解界面并执行操作覆盖 Web、Android、iOS、HarmonyOS 与桌面应用。亮点速览自然语言驱动测试aiAct、aiQuery、aiAssert三个核心 API 覆盖操作、提取、断言纯截图工作不依赖选择器元素重构不再导致用例失效跨平台自动化测试工具同一套 API 跑遍浏览器、手机、桌面可视化报告每次运行生成可逐步回放的报告AI 行为不再是黑盒零代码体验Chrome 插件即装即用不写一行代码就能试开源免费MIT 协议支持 Qwen、GLM、Gemini、UI-TARS 等多种模型实操演示8 步跑通你的第一个自然语言自动化脚本我们以最常用的 Web 场景Playwright 驱动为例带你把第一个脚本完整跑起来。整个过程只需几分钟。第一步创建项目并安装依赖npm init -y npm install midscene/web playwright tsx dotenv --save-dev第二步配置 AI 模型Midscene 的元素定位依赖多模态模型的视觉能力所以这一步很关键。以 OpenAI 兼容接口为例写入.env文件export MIDSCENE_MODEL_PROVIDERopenai export MIDSCENE_MODEL_API_KEY你的密钥 export MIDSCENE_MODEL_NAMEqwen3-vl-plus export MIDSCENE_MODEL_FAMILYqwen不同服务商Doubao、GLM、Gemini、UI-TARS 等的配置略有差异官方文档的支持的模型与配置页面可以直接复制对应配置。第三步编写脚本新建demo.ts你会发现整段代码里几乎没有选择器——所有关键步骤都是大白话import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; import dotenv/config; const sleep (ms: number) new Promise((r) setTimeout(r, ms)); (async () { const browser await chromium.launch({ headless: false }); // 实时观察运行 const page await browser.newPage(); await page.goto(https://www.ebay.com); await sleep(3000); const agent new PlaywrightAgent(page); // 用自然语言执行操作 await agent.aiAct(在搜索框输入 Headphones然后回车); await agent.aiWaitFor(列表中至少出现一个耳机商品); // 提取结构化数据 const items await agent.aiQuery( { title: string, price: number }[], 列表中的耳机商品, ); console.log(headphones in stock:, items); // 用自然语言做断言 await agent.aiAssert(页面左侧有一个分类筛选栏); await browser.close(); })();第四步运行npx tsx demo.ts第五步查看报告运行结束后控制台会打印一行类似midscene_run/report/xxx.html的路径。用浏览器打开它就能看到每一步操作的截图、AI 的规划思路、执行耗时与最终结果可以像看录像一样逐帧回放。这个报告也是排查AI 为什么点错了的核心工具。第六步试试零代码路径可选如果你连脚本都不想写可以直接安装 Chrome 扩展打开任意网页在侧边栏输入点击搜索框并输入 xxx就能立即看到效果。插件与 SDK 共用同一套核心引擎在插件里验证通过的指令写进脚本后行为一致。第七步换个平台继续跑跑通 Web 之后你会发现 Android、iOS 的玩法几乎一样——换一个 Agent 实现API 完全不变。文档里给出了各平台的接入指南Android 通过 ADB 连接设备iOS 借助 WebDriverAgent均无需 root 或越狱。第八步接入你的测试套件Midscene 可以嵌入现有的 Playwright 测试用例中作为测试代码的一部分来使用与常规断言协同工作。比如用 AI 完成登录 → 用普通断言校验数据这种混合写法是很多团队喜欢的模式。进阶技巧让 AI 更聪明、更快、更省钱的 5 个技巧跑通之后下面几个技巧能明显提升你的使用体验1. 用即时操作 API替代通用ai()。agent.aiTap(登录按钮)、agent.aiQuery(...)这类即时接口把规划 定位 执行拆得更细每一步目的单一成功率比笼统的ai(点击登录按钮并进入主页)更高也更省 token。2. 开启缓存加速调试。重复调试同一脚本时AI 每次重新规划很费时间。给 Agent 配置cache: { id: my-test }后规划与元素定位结果会被缓存到midscene_run/cache官方实测同类任务耗时可从 51 秒降到 28 秒。注意查询与断言类操作不会被缓存保证结果总是新鲜的。3. 定位不准时试试deepLocate。如果 AI 大致点对了目标、但总偏几个像素可以在定位操作上加deepLocate: true对边界敏感的小元素有明显改善。4. 用 JavaScript 拆分复杂任务。与其让 AI 一次干十件事不如把它拆成多步循环。例如先用aiQuery拿到列表再用for循环逐条判断、逐条点击。可控性更强出错了也知道是哪一步的问题。5. 善用 YAML 脚本与报告播放器。复杂流程可以写成 YAML 结构化脚本交给 CLI 执行报告页面还支持player-only1之类的参数嵌入到你的内部平台团队评审时直接看回放。横向对比和传统方案比它赢在哪里、输在哪里为了让你判断得清楚我把它和两类常见方案放在一起看对比维度传统选择器方案Selenium/Playwright读 DOM/无障碍树的 AI 工具Midscene.js 纯视觉方案元素定位依据CSS/XPath 选择器页面结构屏幕截图页面重构后选择器失效需逐个修结构变化可能失效视觉不变即稳定纯图标按钮 / canvas难以定位常看不见人眼可见即可操作原生 App / 跨域 iframe大多够不着难以触达能截图就能测视觉效果校验颜色、布局做不到做不到天然支持执行速度与成本快、便宜中每次操作都调用模型相对慢、有成本确定性高中依赖模型能力偶有波动结论很直白如果你的界面高度稳定、追求极致的执行速度与零成本传统选择器依然是性价比之王但如果你受够了选择器维护、要覆盖原生应用与复杂 UI、或者想验证用户真正看到的效果纯视觉方案的优势是碾压性的。Midscene 也允许你在同一脚本里混合两种风格——稳定路径用普通断言复杂交互交给 AI两头的好处都拿到。适用人群这几类人最该立刻上手测试工程师写用例像写需求文档重构不再背锅前端开发者自测、跨浏览器验证、canvas/图表场景一把梭做 AI Agent 的开发者通过 Skills 让 AI 编程助手直接驱动各平台界面想零成本验证产品的人装个 Chrome 插件就能让 AI 帮你走查页面中小团队没有专职测试基建用自然语言快速搭建可复用的自动化脚本避坑指南新手最常见的 5 个坑坑 1模型没有视觉能力或MIDSCENE_MODEL_FAMILY配错。元素定位完全依赖多模态模型务必选支持视觉的模型并核对 family 配置与文档一致否则可能出现诡异的定位失败。坑 2提示词只写功能、不写视觉特征。aiTap(个人中心)模型可能不知道图标长什么样改成aiTap(人形头像 icon)或aiTap(页面右上角的人形头像图标)命中率立刻提升。多用位置 视觉特征描述。坑 3Chrome 插件与其它扩展冲突。报错Cannot access a chrome-extension:// URL of different extension时多半是别的插件注入了 iframe/script。到chrome://extensions/找到对应 ID 的插件禁用即可。坑 4截图分辨率太低导致小元素定位偏移。网页里可以把 devicePixelRatio 调到 2画面更清晰、定位更准代价是多耗 token也可以用小分辨率截图降低成本按场景取舍。坑 5用旧版本踩新坑。定位算法随版本持续优化遇到奇怪问题先npm install midscene/weblatest升级再排查。下一步行动从 30 分钟体验开始别急着写复杂脚本。我的建议是先装 Chrome 插件花 10 分钟在你自己最常用的网页上玩几条指令感受过一句话操作界面的爽感后再照着官方快速开始文档把 demo 脚本跑一遍然后挑一个你正在维护的页面写一条真实用例。Midscene.js 目前的想象空间很值得期待多模态模型越来越强意味着定位精度、复杂任务规划能力会持续提升社区已出现 Python、Java 等语言 SDK以及面向车机、PC 的扩展方案当视觉 自然语言成为 UI 自动化的默认范式测试工程师的工作重心将从维护定位符转向设计更贴近用户的验收描述——这大概就是自动化测试的下一个十年。现在开始成本不过是一个周末的下午。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考