Midscene.js 视觉自动化完整指南用自然语言驱动 Web、App 与桌面端 UI 测试【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene凌晨一点半前端同事顺手把按钮的class名从btn-primary改成了button_main你第二天早上跑回归200 条用例挂了 87 条。看着满屏红叉里那些找不到元素的报错你有没有那么一瞬间想过为什么我写的是测试修起来却像在考古这个场景背后其实藏着一个更深的问题当测试的命脉绑死在选择器、DOM 结构和可访问性树上时每一次重构都是一次连锁地震。而 Midscene.js 给出的答案截然不同——它是一套基于视觉语言模型的 UI 自动化工具不读 DOM不看属性只看屏幕然后听懂你的一句自然语言。为什么写选择器这件事本身就该被淘汰先别急着换工具我们认真聊聊传统自动化到底卡在哪。你大概率经历过下面至少两三条重构即失效。样式库升级、组件改名、加个 wrapper选择器一夜之间全作废维护成本比写用例还高。看不见的摸不到。没有语义标记的 canvas、原生应用里的按钮、跨域 iframe 里的元素传统方案要么抓瞎要么直接放弃。只验证存在不验证好看。元素在 DOM 里不等于用户看得见、看得清、点得中。布局错位、样式被遮挡这类肉眼可见的 Bug结构化断言根本发现不了。Midscene.js 换了一条完全不同的路只基于截图做事。多模态模型对着画面看——认出按钮在哪、输入框在哪、页面状态对不对——然后由你用自然语言下达指令。整个过程不需要任何选择器就像你派了一个能看懂屏幕的助手去操作界面。换句话说人能看见的它就能操作人觉得不对劲的它也能帮你验证。这正好补上了传统方案最痛的那块短板。零基础 10 分钟跑通第一个视觉用例上手这件事Midscene.js 给了你两条路都短得惊人。路线一无代码装个 Chrome 扩展就能玩这是最零门槛的入口。从 Chrome 应用商店装好扩展打开面板点开设置填入你的模型 API 信息然后随便打开一个网页直接输入一句中文指令比如把搜索框里的内容清空再输入机械键盘并回车。扩展会实时展示 AI 的规划、定位和点击过程相当于一个可视化游乐场写代码之前先在这里把玩法摸透。路线二写脚本让自动化进入你的工程体系如果要跑可重复的回归用 JS 脚本是正路npm create midscenelatest # 生成项目骨架 npm install export MIDSCENE_MODEL_PROVIDERopenai export MIDSCENE_API_KEY你的密钥 npm run dev接下来要做的就是打开文档快速上手见apps/site/docs/zh/quick-start.mdx照着写第一个用例。你会发现核心 API 少得可怜三件套就够用await agent.aiAction(在搜索框输入 Midscene.js 并回车); const result await agent.aiQuery(页面第一屏显示了几条搜索结果); await agent.aiAssert(页面标题包含 Midscene);没有#id没有[data-testid]每一行都是人能看懂的话。一张截图走天下从网页到手机再到桌面Midscene.js 最让人上头的是它的能力边界几乎覆盖了你日常要测的所有端。网页连上桌面 Chrome桥接模式接管一切不管是 Puppeteer、Playwright 还是无头浏览器Midscene.js 都能接入。尤其推荐桥接模式它直接连上你已经开着的桌面 Chrome日常调试、随手验证都极其顺手你不用再为测试单独维护一套浏览器环境。Android连上真机指哪打哪通过 ADB 连接手机后原生应用、系统设置、第三方 App 都能操作不需要 root。右侧实时投影设备画面左边是你的指令列表AI 每执行一步都看得清清楚楚。iOS无需越狱iPhone/iPad 都能跑配合 WebDriverAgentiOS 系统界面和各类 App 同样纳入掌控。项目还内置了鸿蒙HarmonyOS支持华为设备也能进同一套体系。桌面端Windows、macOS、Linux 全覆盖基于系统的原生辅助能力连 Electron 应用都能操作相当于给桌面软件也装上了一双会看的眼睛。报告每次运行都是一次可回放的现场跑完不是丢给你一堆日志而是一份带完整时间线的可视化报告——每一步的规划、定位、动作、截图按顺序排好还能一键回放。回归挂了点开报告就像看监控回放问题出在哪一步一目了然。让视觉用例跑得更稳的 4 个进阶技巧上手简单但想跑得又快又稳下面这些经验能帮你少踩坑。1. 给截图加缓存省下真金白银视觉自动化每次动作都要调一次多模态模型重复区域的截图完全可以缓存命中成本和耗时都能明显降下来。项目里提供了相关配置建议在稳定页面上开启参考packages/core里的缓存实现与文档说明。2. 超时和重试按场景而不是按模板配移动端走网络链路延迟天然比本地网页高。给慢速场景留足超时余量关键操作前加上aiAssert做状态确认比盲目加长等待更可靠。3. 断言交给 AI而不是去猜 DOM既然整个体系是视觉驱动的验证也尽量用aiAssert描述页面应该长什么样而不是偷偷回去查 DOM——那等于又绕回老路了。4. 高频报错对照表模型响应异常先查 API 密钥和模型服务状态再看网络是否稳定。Android 连不上确认 USB 调试已开启ADB 能识别设备。iOS 连接失败检查 WebDriverAgent 是否在运行、设备信任是否已确认。对应各平台的详细排查步骤文档里都写了专项章节如apps/site/docs/zh/android-getting-started.mdx照着走基本都能解决。写在最后谁最该立刻试试它回到开头那个凌晨。如果换成 Midscene.js那次前端重构根本不会让你的用例崩掉——因为你的用例从没依赖过那个类名。说到底它适合这几类人测试工程师把精力从修选择器里解放出来去写真正有价值的业务断言。前端/全栈开发者随手验证自己的改动不用再维护一套脆弱的测试基建。想给桌面端、移动端补自动化的人以前够不着的场景现在一条命令就能开始。下一步很简单装个扩展试一句指令或者npm create midscenelatest建个工程跑一个用例。十分钟之后你大概会和我一样再也不想回去写//*[idapp]/div[3]/button这种咒语了。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene.js 视觉自动化完整指南：用自然语言驱动 Web、App 与桌面端 UI 测试
Midscene.js 视觉自动化完整指南用自然语言驱动 Web、App 与桌面端 UI 测试【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene凌晨一点半前端同事顺手把按钮的class名从btn-primary改成了button_main你第二天早上跑回归200 条用例挂了 87 条。看着满屏红叉里那些找不到元素的报错你有没有那么一瞬间想过为什么我写的是测试修起来却像在考古这个场景背后其实藏着一个更深的问题当测试的命脉绑死在选择器、DOM 结构和可访问性树上时每一次重构都是一次连锁地震。而 Midscene.js 给出的答案截然不同——它是一套基于视觉语言模型的 UI 自动化工具不读 DOM不看属性只看屏幕然后听懂你的一句自然语言。为什么写选择器这件事本身就该被淘汰先别急着换工具我们认真聊聊传统自动化到底卡在哪。你大概率经历过下面至少两三条重构即失效。样式库升级、组件改名、加个 wrapper选择器一夜之间全作废维护成本比写用例还高。看不见的摸不到。没有语义标记的 canvas、原生应用里的按钮、跨域 iframe 里的元素传统方案要么抓瞎要么直接放弃。只验证存在不验证好看。元素在 DOM 里不等于用户看得见、看得清、点得中。布局错位、样式被遮挡这类肉眼可见的 Bug结构化断言根本发现不了。Midscene.js 换了一条完全不同的路只基于截图做事。多模态模型对着画面看——认出按钮在哪、输入框在哪、页面状态对不对——然后由你用自然语言下达指令。整个过程不需要任何选择器就像你派了一个能看懂屏幕的助手去操作界面。换句话说人能看见的它就能操作人觉得不对劲的它也能帮你验证。这正好补上了传统方案最痛的那块短板。零基础 10 分钟跑通第一个视觉用例上手这件事Midscene.js 给了你两条路都短得惊人。路线一无代码装个 Chrome 扩展就能玩这是最零门槛的入口。从 Chrome 应用商店装好扩展打开面板点开设置填入你的模型 API 信息然后随便打开一个网页直接输入一句中文指令比如把搜索框里的内容清空再输入机械键盘并回车。扩展会实时展示 AI 的规划、定位和点击过程相当于一个可视化游乐场写代码之前先在这里把玩法摸透。路线二写脚本让自动化进入你的工程体系如果要跑可重复的回归用 JS 脚本是正路npm create midscenelatest # 生成项目骨架 npm install export MIDSCENE_MODEL_PROVIDERopenai export MIDSCENE_API_KEY你的密钥 npm run dev接下来要做的就是打开文档快速上手见apps/site/docs/zh/quick-start.mdx照着写第一个用例。你会发现核心 API 少得可怜三件套就够用await agent.aiAction(在搜索框输入 Midscene.js 并回车); const result await agent.aiQuery(页面第一屏显示了几条搜索结果); await agent.aiAssert(页面标题包含 Midscene);没有#id没有[data-testid]每一行都是人能看懂的话。一张截图走天下从网页到手机再到桌面Midscene.js 最让人上头的是它的能力边界几乎覆盖了你日常要测的所有端。网页连上桌面 Chrome桥接模式接管一切不管是 Puppeteer、Playwright 还是无头浏览器Midscene.js 都能接入。尤其推荐桥接模式它直接连上你已经开着的桌面 Chrome日常调试、随手验证都极其顺手你不用再为测试单独维护一套浏览器环境。Android连上真机指哪打哪通过 ADB 连接手机后原生应用、系统设置、第三方 App 都能操作不需要 root。右侧实时投影设备画面左边是你的指令列表AI 每执行一步都看得清清楚楚。iOS无需越狱iPhone/iPad 都能跑配合 WebDriverAgentiOS 系统界面和各类 App 同样纳入掌控。项目还内置了鸿蒙HarmonyOS支持华为设备也能进同一套体系。桌面端Windows、macOS、Linux 全覆盖基于系统的原生辅助能力连 Electron 应用都能操作相当于给桌面软件也装上了一双会看的眼睛。报告每次运行都是一次可回放的现场跑完不是丢给你一堆日志而是一份带完整时间线的可视化报告——每一步的规划、定位、动作、截图按顺序排好还能一键回放。回归挂了点开报告就像看监控回放问题出在哪一步一目了然。让视觉用例跑得更稳的 4 个进阶技巧上手简单但想跑得又快又稳下面这些经验能帮你少踩坑。1. 给截图加缓存省下真金白银视觉自动化每次动作都要调一次多模态模型重复区域的截图完全可以缓存命中成本和耗时都能明显降下来。项目里提供了相关配置建议在稳定页面上开启参考packages/core里的缓存实现与文档说明。2. 超时和重试按场景而不是按模板配移动端走网络链路延迟天然比本地网页高。给慢速场景留足超时余量关键操作前加上aiAssert做状态确认比盲目加长等待更可靠。3. 断言交给 AI而不是去猜 DOM既然整个体系是视觉驱动的验证也尽量用aiAssert描述页面应该长什么样而不是偷偷回去查 DOM——那等于又绕回老路了。4. 高频报错对照表模型响应异常先查 API 密钥和模型服务状态再看网络是否稳定。Android 连不上确认 USB 调试已开启ADB 能识别设备。iOS 连接失败检查 WebDriverAgent 是否在运行、设备信任是否已确认。对应各平台的详细排查步骤文档里都写了专项章节如apps/site/docs/zh/android-getting-started.mdx照着走基本都能解决。写在最后谁最该立刻试试它回到开头那个凌晨。如果换成 Midscene.js那次前端重构根本不会让你的用例崩掉——因为你的用例从没依赖过那个类名。说到底它适合这几类人测试工程师把精力从修选择器里解放出来去写真正有价值的业务断言。前端/全栈开发者随手验证自己的改动不用再维护一套脆弱的测试基建。想给桌面端、移动端补自动化的人以前够不着的场景现在一条命令就能开始。下一步很简单装个扩展试一句指令或者npm create midscenelatest建个工程跑一个用例。十分钟之后你大概会和我一样再也不想回去写//*[idapp]/div[3]/button这种咒语了。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考