Midscene.js 视觉自动化测试一招告别选择器维护四步解锁跨平台 UI 自动化【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene前端一重构测试脚本里的 CSS 选择器就集体失效面对原生 App更是连 DOM 都摸不到。Midscene.js 正是为这类困境而生的视觉自动化测试工具——它绕开选择器直接基于屏幕截图让 AI 读懂自然语言指令并操作界面。换句话说你像指挥人类测试员一样说话它负责看见与执行。为什么选择器驱动测试总在重构后崩盘先讲一个几乎人人都踩过的场景产品改版按钮换了样式、层级调整、文案微调你的测试脚本开始大面积标红。原因很直白——传统工具靠 CSS 选择器、XPath 或可访问性树定位元素这些坐标与页面实现细节强耦合页面一变定位即失效。更棘手的是三类摸不到的目标没有语义标记的元素比如 canvas 自绘控件原生应用与跨域 iframe根本没有可注入的 DOM以及界面看起来对不对这类视觉问题DOM 永远答不上来。选择器本质是在猜实现而人类测试员靠的是眼睛。Midscene.js 的思路只有一句话把 AI 训练成测试员的眼睛。视觉驱动与选择器驱动一张对比表看清差异对比维度传统选择器方案Midscene.js 视觉方案定位依据CSS / XPath / 可访问性树屏幕截图 多模态模型重构后表现选择器失效脚本重写界面可见即可继续运行原生 App / iframe基本不可达看得见就能操作结果校验判断 DOM 节点是否存在验证用户真正看到的内容脚本表达一行行坐标命令一句句自然语言一句话概括传统方案问这个节点在不在视觉方案问用户看到了什么、能不能点它。测试的焦点从维护实现细节转移到了描述业务意图这正是它能抗住频繁迭代的底层原因。零基础第一条路Chrome 扩展三步试跑自然语言指令想先感受效果、不写一行代码走扩展这条路全程三分钟从 Chrome Web Store 安装 Midscene 扩展打开侧边栏面板它可能折叠在浏览器扩展图标下点设置齿轮粘贴模型配置OpenAI、豆包、GLM、Gemini 等主流多模态模型均可用在任意网页输入一句指令比如点击搜索框输入 Midscene.js 并回车看它自动执行。扩展会实时展示 AI 的定位、操作与断言全过程像 API Playground 一样即时反馈、随时调试。在扩展里验证过的指令写成脚本后行为完全一致因为两者共用同一套核心。完整教程见 apps/site/docs/en/quick-experience.mdx。可复用第二条路四步跑通一条自动化脚本需要可重复执行的自动化就走 JavaScript SDK 路线四步收工装依赖、配模型环境变量、写脚本、运行看报告。核心代码只有几行import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const page await chromium.launch().then(b b.newPage()); await page.goto(https://www.ebay.com); const agent new PlaywrightAgent(page); await agent.aiAct(type Headphones in the search box, then hit Enter); const items await agent.aiQuery({ title: string, price: number }[], the headphone products in the list); await agent.aiAssert(There is a category filter on the left side);aiAct负责操作、aiQuery提取结构化数据、aiAssert做断言三个方法就覆盖了绝大多数测试场景。官方从零起步示例在 apps/site/docs/en/quick-start.mdx。按平台拆解Web、移动端、桌面各自怎么用Web 端既支持 Playwright、Puppeteer 驱动也能通过桥接模式直接控制本地 Chrome——适合无缝接入现有测试框架一条连接命令即可接管当前标签页。Android 与 iOS通过 ADB 或 WebDriverAgent 连接真机和模拟器无需 root、无需越狱任何应用都能直接操作。比如打开设置查看当前系统版本号这类操作一句指令完成还能断言结果。桌面应用Windows、macOS、Linux 三端覆盖原生程序与 Electron 应用均可操控HarmonyOS 设备同样在支持列表内。一张表看懂项目架构与模块源码位置能力模块路径说明视觉 AI 核心引擎packages/core/Agent、报告生成、YAML 执行等基础能力Web 集成packages/web-integration/Playwright / Puppeteer / 桥接模式Android 支持packages/android/ADB、scrcpy 设备控制iOS 支持packages/ios/WebDriverAgent、模拟器支持桌面自动化packages/computer/三平台桌面控制可视化客户端apps/studio/桌面端图形化操作台想深挖某个平台的实现直接钻进对应目录即可模块边界清晰按图索骥很轻松。上线前的避坑清单配置、超时与报告解读几个真实项目里容易踩的坑提前记下能省不少事模型先行所有能力都依赖多模态模型先在简单页面上验证 API Key 与网络连通性再铺开用例超时留余量视觉识别天然比 DOM 定位慢aiWaitFor的等待时间按业务复杂度放宽别按直觉设短值报告当体检报告读每次运行都会生成可视化回放报告元素高亮、步骤耗时、失败原因一目了然调试时先看报告再改脚本。高频问题速答模型、成本、迁移一次说清Q已有选择器测试需要全部推倒重写吗A不必。Midscene 可以与传统断言并存先拿它覆盖易变、难定位的模块验证效果后再逐步迁移。QAI 调用成本会不会很高A可控。项目支持结果缓存并兼容豆包、GLM、GPT、Gemini 等多款模型重复截图可以交给更便宜的模型处理成本按需调配。Q只做 Web 测试引入它值不值A值。单是重构不再破坏测试这一条长期维护成本就省回来了何况后续要测移动端或桌面时能力已经就位。现在就开始给测试项目装上一双 AI 眼睛过去一年自动化测试的主线悄悄从写脚本找元素切换到了说人话驱动界面。Midscene.js 的价值不在于取代传统框架而在于把测试从实现细节中彻底解放出来——你只负责描述意图AI 负责看见与执行。✨ 自然语言即脚本选择器零维护 ✨ 截图级视觉校验验证真实所见 ✨ Web / Android / iOS / 桌面全覆盖 ✨ 可视化回放报告失败一眼定位装个扩展试两分钟或跑通一个四步的脚本比任何长篇介绍都更有说服力。选一条路现在就开始。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考