如何用 Midscene.js 视觉自动化测试让 AI 替你看界面、写脚本【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene写自动化测试最折磨人的时刻往往不是逻辑写不出来而是刚写好没两周前端改了个 class所有定位全崩了。你不得不翻出几十条选择器一条条修周而复始。Midscene.js 是一款基于视觉语言模型的开源 UI 自动化测试工具它直接看屏幕截图来完成元素定位和操作用自然语言描述步骤即可驱动测试帮你彻底摆脱选择器维护的泥潭。本文将带你了解它的工作原理、能力边界并给出最快上手的完整路径。为什么传统 UI 自动化越写越痛大部分自动化框架包括一部分号称 AI 的工具本质上还在依赖页面结构DOM 树、可访问性树、XPath。这套思路有三个绕不开的硬伤结构脆弱UI 一重构选择器就失效测试维护成本跟着前端开发一起水涨船高覆盖有盲区纯图标按钮、自定义控件、canvas绘制的内容在 DOM 里看不见原生 App、跨域 iframe 更是直接够不着验证不到视觉你无法断言按钮颜色对不对、弹窗是不是真的盖住了内容、布局有没有错位——因为这些只存在于渲染之后。换句话说结构驱动的测试从来都是在猜界面而不是看界面。而人类测试员从来不看 DOM只看屏幕。Midscene.js 想做的就是让机器也学会这件事。一句话理解 Midscene.js 的核心理念只认截图不认结构。Midscene.js 的 UI 自动化测试完全基于屏幕截图运行你用自然语言描述点击搜索框并输入关键词多模态大模型看一眼截图自己判断元素在哪、该怎么点。数据提取和页面理解需要时也可以选择性地补充 DOM 信息但元素定位的主路径始终是纯视觉的。这套设计带来的收益很直接前端重构不再牵动测试代码少维护一大堆废选择器人类肉眼能看到的界面它都能操作包括无语义标记的元素和原生应用可以断言用户实际看到的样子比如高亮、颜色、渲染状态而不是某个节点是否存在测试方式灵活既能嵌入 Playwright / Vitest 等现有测试套件也能交给 AI Agent 自主执行。视觉驱动 vs 结构驱动一张表看懂差距对比维度传统结构驱动Midscene.js 视觉驱动定位依据DOM / 可访问性树 / XPath屏幕截图 多模态模型UI 重构影响选择器失效测试大面积返工界面能看懂就能继续跑无语义元素无法识别看得见即可操作原生应用、跨域 iframe通常难以触及截图即可覆盖视觉断言基本不支持支持颜色、布局、高亮等脚本编写方式手写定位器 逻辑自然语言描述步骤对测试工程师来说这意味着写脚本的方式从跟浏览器结构打交道变成了跟产品经理说话。Midscene.js 能自动化哪些平台Midscene.js 的能力边界是只要能截图就能自动化一套 API 打通所有平台 网页浏览器支持通过 Puppeteer、Playwright 或桥接模式Bridge Mode连接浏览器。桥接模式特别适合本地调试浏览器开着终端里写代码AI 直接操作当前打开的标签页。 手机 AppAndroid / iOS / HarmonyOS不用 root、不用越狱Android 通过 ADB 连接设备iOS 借助 WebDriverAgent兼容华为鸿蒙设备。下面两张图分别是 Android 和 iOS 设备上的真实执行效果AI 先规划步骤再逐步操作手机界面。️ 桌面应用Windows、macOS、Linux 桌面程序包括 Electron 应用和系统级界面都在覆盖范围内。最快的接入方法两条路任选Midscene.js 特意设计了两条入门路径按你的偏好挑一条就行路径一Chrome 扩展零代码体验如果你不想写任何代码先装 Midscene 的 Chrome 扩展。它相当于一个交互式游乐场打开扩展面板、配置好 AI 模型参数然后在任意网页上用自然语言下指令立刻就能看到 AI 的规划、执行和结果预览。适合先验证想法、熟悉交互模式。路径二npm 初始化直接写脚本如果你要的是可重复的自动化流程走 SDK 路线# 创建新项目 npm create midscenelatest # 安装依赖 npm install # 配置 AI 模型 export MIDSCENE_MODEL_PROVIDERopenai export MIDSCENE_API_KEYyour_api_key # 运行示例脚本 npm run dev最小可运行示例看懂一次调用下面这段代码展示了视觉自动化测试最核心的三个 API操作aiAct、查询aiQuery和断言aiAssert// 点击搜索框并输入关键词然后回车搜索 await agent.aiAct(Click the search bar and type Midscene.js tutorial) await agent.aiAct(Press Enter to search) // 查询页面上的搜索结果标题 const titles await agent.aiQuery(List all search result titles) // 断言页面确实渲染出了结果 await agent.aiAssert(The search results are visible on the page)白话解释aiAct是让 AI 动手aiQuery是让 AI 汇报看到什么aiAssert是让 AI 判断对不对。三句话就把一次完整的测试流程写完了。常见问题排查清单模型返回异常时按顺序检查✅ API 密钥是否正确配置模型服务商当前是否可用✅ 网络连接是否正常代理是否拦截了请求✅ 多模态模型是否具备较强的 UI 定位能力官方推荐 Qwen、GLM、Gemini 等视觉模型也支持自托管的开源模型。移动设备连不上时逐项排查Android确认已开启 USB 调试adb devices能看到设备iOS检查设备信任设置与 WebDriverAgent 运行状态鸿蒙确认 hdc 工具与设备连接正常。想让测试更快可以试试适当调整截图质量平衡速度与识别精度复用缓存减少重复的模型调用把相关的多个操作合并成一句指令减少交互轮次。进阶玩法Skills 与自定义界面Midscene.js 不止能测标准平台。它的视觉驱动引擎可以接入任何能出截图的界面配合 Midscene Skills 还能让 AI Agent如 OpenClaw直接控制多个平台自主执行任务。项目仓库里有大量现成示例可以参考Web 测试案例在packages/web-integration/tests/ai/移动端脚本在packages/android/demo/和packages/ios/demo/核心引擎实现位于packages/core/。官方文档按平台拆分得很细建议按需取用快速开始apps/site/docs/zh/quick-start.mdxAPI 参考apps/site/docs/zh/api.mdx各平台指南apps/site/docs/zh/下的 android / ios / harmonyos / desktop 分册写在最后让 AI 成为你的测试搭子Midscene.js 把 UI 自动化测试从结构驱动的脆弱工程带向了视觉驱动的智能协作你负责用自然语言描述意图模型负责看、想、做、验。它未必取代测试工程师但一定能帮你省下大量修选择器、补定位、写断言的时间把精力放回真正有价值的地方——测试策略和业务逻辑本身。现在就可以开始装个扩展打开任意网页说一句点击右上角的登录按钮然后亲眼看看 AI 是怎么看懂你的界面的。马上试试你会上瘾的。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何用 Midscene.js 视觉自动化测试，让 AI 替你“看“界面、写脚本
如何用 Midscene.js 视觉自动化测试让 AI 替你看界面、写脚本【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene写自动化测试最折磨人的时刻往往不是逻辑写不出来而是刚写好没两周前端改了个 class所有定位全崩了。你不得不翻出几十条选择器一条条修周而复始。Midscene.js 是一款基于视觉语言模型的开源 UI 自动化测试工具它直接看屏幕截图来完成元素定位和操作用自然语言描述步骤即可驱动测试帮你彻底摆脱选择器维护的泥潭。本文将带你了解它的工作原理、能力边界并给出最快上手的完整路径。为什么传统 UI 自动化越写越痛大部分自动化框架包括一部分号称 AI 的工具本质上还在依赖页面结构DOM 树、可访问性树、XPath。这套思路有三个绕不开的硬伤结构脆弱UI 一重构选择器就失效测试维护成本跟着前端开发一起水涨船高覆盖有盲区纯图标按钮、自定义控件、canvas绘制的内容在 DOM 里看不见原生 App、跨域 iframe 更是直接够不着验证不到视觉你无法断言按钮颜色对不对、弹窗是不是真的盖住了内容、布局有没有错位——因为这些只存在于渲染之后。换句话说结构驱动的测试从来都是在猜界面而不是看界面。而人类测试员从来不看 DOM只看屏幕。Midscene.js 想做的就是让机器也学会这件事。一句话理解 Midscene.js 的核心理念只认截图不认结构。Midscene.js 的 UI 自动化测试完全基于屏幕截图运行你用自然语言描述点击搜索框并输入关键词多模态大模型看一眼截图自己判断元素在哪、该怎么点。数据提取和页面理解需要时也可以选择性地补充 DOM 信息但元素定位的主路径始终是纯视觉的。这套设计带来的收益很直接前端重构不再牵动测试代码少维护一大堆废选择器人类肉眼能看到的界面它都能操作包括无语义标记的元素和原生应用可以断言用户实际看到的样子比如高亮、颜色、渲染状态而不是某个节点是否存在测试方式灵活既能嵌入 Playwright / Vitest 等现有测试套件也能交给 AI Agent 自主执行。视觉驱动 vs 结构驱动一张表看懂差距对比维度传统结构驱动Midscene.js 视觉驱动定位依据DOM / 可访问性树 / XPath屏幕截图 多模态模型UI 重构影响选择器失效测试大面积返工界面能看懂就能继续跑无语义元素无法识别看得见即可操作原生应用、跨域 iframe通常难以触及截图即可覆盖视觉断言基本不支持支持颜色、布局、高亮等脚本编写方式手写定位器 逻辑自然语言描述步骤对测试工程师来说这意味着写脚本的方式从跟浏览器结构打交道变成了跟产品经理说话。Midscene.js 能自动化哪些平台Midscene.js 的能力边界是只要能截图就能自动化一套 API 打通所有平台 网页浏览器支持通过 Puppeteer、Playwright 或桥接模式Bridge Mode连接浏览器。桥接模式特别适合本地调试浏览器开着终端里写代码AI 直接操作当前打开的标签页。 手机 AppAndroid / iOS / HarmonyOS不用 root、不用越狱Android 通过 ADB 连接设备iOS 借助 WebDriverAgent兼容华为鸿蒙设备。下面两张图分别是 Android 和 iOS 设备上的真实执行效果AI 先规划步骤再逐步操作手机界面。️ 桌面应用Windows、macOS、Linux 桌面程序包括 Electron 应用和系统级界面都在覆盖范围内。最快的接入方法两条路任选Midscene.js 特意设计了两条入门路径按你的偏好挑一条就行路径一Chrome 扩展零代码体验如果你不想写任何代码先装 Midscene 的 Chrome 扩展。它相当于一个交互式游乐场打开扩展面板、配置好 AI 模型参数然后在任意网页上用自然语言下指令立刻就能看到 AI 的规划、执行和结果预览。适合先验证想法、熟悉交互模式。路径二npm 初始化直接写脚本如果你要的是可重复的自动化流程走 SDK 路线# 创建新项目 npm create midscenelatest # 安装依赖 npm install # 配置 AI 模型 export MIDSCENE_MODEL_PROVIDERopenai export MIDSCENE_API_KEYyour_api_key # 运行示例脚本 npm run dev最小可运行示例看懂一次调用下面这段代码展示了视觉自动化测试最核心的三个 API操作aiAct、查询aiQuery和断言aiAssert// 点击搜索框并输入关键词然后回车搜索 await agent.aiAct(Click the search bar and type Midscene.js tutorial) await agent.aiAct(Press Enter to search) // 查询页面上的搜索结果标题 const titles await agent.aiQuery(List all search result titles) // 断言页面确实渲染出了结果 await agent.aiAssert(The search results are visible on the page)白话解释aiAct是让 AI 动手aiQuery是让 AI 汇报看到什么aiAssert是让 AI 判断对不对。三句话就把一次完整的测试流程写完了。常见问题排查清单模型返回异常时按顺序检查✅ API 密钥是否正确配置模型服务商当前是否可用✅ 网络连接是否正常代理是否拦截了请求✅ 多模态模型是否具备较强的 UI 定位能力官方推荐 Qwen、GLM、Gemini 等视觉模型也支持自托管的开源模型。移动设备连不上时逐项排查Android确认已开启 USB 调试adb devices能看到设备iOS检查设备信任设置与 WebDriverAgent 运行状态鸿蒙确认 hdc 工具与设备连接正常。想让测试更快可以试试适当调整截图质量平衡速度与识别精度复用缓存减少重复的模型调用把相关的多个操作合并成一句指令减少交互轮次。进阶玩法Skills 与自定义界面Midscene.js 不止能测标准平台。它的视觉驱动引擎可以接入任何能出截图的界面配合 Midscene Skills 还能让 AI Agent如 OpenClaw直接控制多个平台自主执行任务。项目仓库里有大量现成示例可以参考Web 测试案例在packages/web-integration/tests/ai/移动端脚本在packages/android/demo/和packages/ios/demo/核心引擎实现位于packages/core/。官方文档按平台拆分得很细建议按需取用快速开始apps/site/docs/zh/quick-start.mdxAPI 参考apps/site/docs/zh/api.mdx各平台指南apps/site/docs/zh/下的 android / ios / harmonyos / desktop 分册写在最后让 AI 成为你的测试搭子Midscene.js 把 UI 自动化测试从结构驱动的脆弱工程带向了视觉驱动的智能协作你负责用自然语言描述意图模型负责看、想、做、验。它未必取代测试工程师但一定能帮你省下大量修选择器、补定位、写断言的时间把精力放回真正有价值的地方——测试策略和业务逻辑本身。现在就可以开始装个扩展打开任意网页说一句点击右上角的登录按钮然后亲眼看看 AI 是怎么看懂你的界面的。马上试试你会上瘾的。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考