告别脆弱的DOM选择器用AI视觉自动化测试工具Midscene.js让UI测试长眼睛【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene凌晨一点你盯着屏幕上第 37 次跑红的回归用例原因是重构后按钮的 class 从btn-primary改成了primary-btn几十个脚本同时失效。这不是你的问题——这是所有依赖 DOM 选择器的 UI 自动化测试工具共同的宿命。而 Midscene.js 想做的是让测试脚本像人一样看屏幕不需要选择器只需要一句自然语言描述剩下的交给视觉 AI。本文写给被选择器折磨过的测试工程师和前端开发者用最短的时间讲清楚 Midscene.js 是什么、怎么用以及它能帮你省下多少维护成本。 它凭什么看得懂界面先做个思维实验。你让一位新同事点掉页面上那个弹窗广告你会怎么说大概率是把右上角那个关闭点掉而不是点击document.querySelector(.ad-close-btn)。Midscene.js 就是把前一种沟通方式搬进了自动化测试。它内部做的是这样一件事截取当前屏幕画面交给视觉 AI 模型如 UI-TARS、Qwen-VL 等AI 根据你的自然语言指令在画面里定位目标元素工具拿到元素坐标后模拟真实的点击、输入、滚动。整个过程不碰 DOM 结构不读 accessibility 树甚至连canvas里画出来的按钮也能认出来——因为它对界面唯一的信息来源就是那张截图和你眼睛看到的一模一样。这里有一个类比帮新手理解传统选择器像是按地址找人门牌号选择器一变就找不到人Midscene.js 像是按长相找人只要人还是那个样换没换门牌号都无所谓。 与传统测试工具的本质区别为了不让你被视觉两个字唬住直接上一张对比表看看它和 Selenium、Cypress 这类经典工具差在哪对比维度传统工具Selenium/CypressMidscene.js定位方式CSS/XPath 选择器、DOM 结构视觉 AI 自然语言描述脚本语言面向选择器的代码面向意图的自然语言UI 重构后选择器失效脚本批量报错界面样子没变就无需改动无语义元素图标按钮、canvas、自定义控件难处理只要看得到就能操作跨域 iframe通常需要特殊处理一视同仁只看屏幕原生应用需要另找方案Web/Android/iOS/HarmonyOS/桌面统一思路视觉断言基本没有支持按钮变灰图片错位这类视觉判断一句话总结区别传统工具验证的是结构对不对Midscene.js 验证的是看起来对不对。后者更接近真实的用户视角也更容易发现那些结构没问题但视觉上已经坏掉的 Bug。⚡ 5 分钟上手从安装到跑通第一个脚本第一步安装依赖项目使用 pnpm 管理克隆仓库后一条命令装齐所有包git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene npm install如果你只想快速体验 Web 自动化直接用 CLI 包即可无需关心仓库内部结构。第二步写一个最小可用的 YAML 脚本新建my-first-test.yaml内容如下。关键行都加了注释web: url: https://www.saucedemo.com/ # 指定被测页面 tasks: - name: 登录并验证 flow: - aiAct: type standard_user in user name input, type secret_sauce in password, click Login # aiAct用一句话完成一连串自然语言操作 - aiWaitFor: there are products displayed on the page # aiWaitFor等待某个状态出现相当于智能版显式等待 - aiAssert: the page shows Products # aiAssert用自然语言做断言不写任何选择器第三步运行npx midscene/cli run my-first-test.yaml看到绿色的通过信息时你已经完成了第一个零选择器的测试脚本。如果中途失败工具会自动生成包含步骤截图和 AI 推理过程的报告你可以直接看到它每一步看到了什么、为什么这么判断。 核心能力速览一张能力清单Midscene.js 的核心 API 非常收敛新手一小时就能记全能力示例写法白话解释智能定位await agent.aiLocate(购物车图标)找到元素并返回它的坐标/描述自然语言操作await agent.aiAction(向下滚动并点击第二个商品)一句命令完成多步操作智能输入await agent.aiInput(搜索框, 机械键盘)定位输入框并填入内容智能断言await agent.aiAssert(页面出现下单成功)用语言描述期望看到的界面状态智能等待await agent.aiWait(数据加载完成)等界面变成你描述的样子数据提取await agent.aiQuery({name, price}[], 提取每件商品的名字和价格)把界面内容结构化提取出来在 Node.js 里配合 Playwright 使用代码大概是这样的节奏import { AgentOverPlaywright } from midscene/web; // 初始化 agent 时注入模型配置之后全部用自然语言驱动 await agent.ai(type AI 101 in search box and hit Enter); await agent.aiAssert(there are some search results); const items await agent.aiQuery({title: string, link: string}[], 列出前三条搜索结果的标题和链接); console.log(items);注意到没有——脚本里从头到尾没有出现任何一个 CSS 选择器。这就是这套工具最核心的体验差异。 实战场景拆解电商下单全流程空谈能力没有说服力直接看一个贴近业务的完整案例模拟用户走完搜索 → 加购 → 结算全流程。web: url: https://www.saucedemo.com/ agent: aiActionContext: dismiss the cookie consent dialog if it exists # aiActionContext给每次 AI 操作一个全局上下文提示避免弹窗干扰 tasks: - name: 商品搜索与加购 flow: - aiAct: click the search icon, type fleece jacket, press Enter - aiWaitFor: the product list is loaded - aiAct: click the first product card - aiAssert: the product detail page shows price - aiAct: click the Add to cart button - name: 结算校验 flow: - aiAct: open the cart and click Checkout - aiInput: [first name input, Ada] - aiInput: [last name input, Lovelace] - aiInput: [zip code input, 10001] - aiAct: click Continue, then click Finish - aiAssert: the page shows Thank you for your order这个脚本的维护成本几乎为零哪怕前端把整个商品卡片重构成 canvas 渲染只要界面上还长得像商品卡片脚本照跑不误。对电商这种改版频繁的行业省下的维护工时非常可观。 跨平台回归一份脚本多种设备Midscene.js 的另一个杀手锏是同一套思路到处跑。它针对不同平台提供对应适配器但心智模型完全一致——都是看屏幕 说人话Web基于 Playwright / PuppeteerAndroid通过 ADB Scrcpy 驱动真机或模拟器iOS通过 WebDriverAgent 连接桌面应用支持 Windows、macOS、LinuxHarmonyOS为鸿蒙生态提供了专门适配。举个真实场景你的 App 需要保证 iOS 和 Android 上登录页长一样、行为一致。传统做法是写两套脚本一套 XCUITest、一套 UIAutomator维护量翻倍。用 Midscene.js你只需要把同样的自然语言步骤分别在两个平台的 Playground 里跑一遍然后对比两边的截图与断言结果即可。下图是 Android 设备上的 Playground 界面左侧是 AI 的操作规划步骤右侧是真实设备画面每一步都能看到 AI 依据什么做出的判断在 Android Playground 中AI 的每一步想法都可视化展示调试定位一目了然。而 Web 端的 Playground 则把浏览器页面和指令输入框放在同一屏非常适合先手动试指令、再落成脚本的工作流先在 Playground 里用自然语言试水一条指令确认行为符合预期后再写进 YAML试错成本极低。 如何接入现有的 CI/CD 流程把 Midscene.js 塞进团队现有的流水线思路和普通测试一致跑测试 → 出报告 → 归档。区别在于报告里多了一堆AI 的思考过程截图排障时比纯日志直观得多。一个典型的 GitHub Actions 片段示意如下name: midscene-ui-tests on: [push, pull_request] jobs: ui-test: runs-on: ubuntu-latest steps: - uses: actions/checkoutv3 - run: npm ci - run: npx midscene/cli run ./tests/smoke.yaml - uses: actions/upload-artifactv3 with: name: midscene-report path: ./midscene_output/ # 报告与截图自动归档方便团队复盘几个让团队协作更顺手的建议把自然语言步骤写得像验收标准aiAssert里的描述本身就是可读的测试用例文档产品和测试可以共用用 Playground 先验证再入库新脚本先在 Playground 里逐条跑通避免把AI 没理解指令当成功能有 Bug留出 AI 调用的超时余量视觉模型推理需要一点时间别把 CI 超时设得太紧。❓ 常见问题速答Q1Midscene.js 是替代 Playwright/Cypress 吗不是替代而是叠加。它通常作为 Playwright/Puppeteer 的定位引擎存在浏览器调度、网络控制这些脏活还是交给底层工具Midscene.js 只负责看懂界面。Q2没有视觉 AI 相关的编程经验能上手吗能。你写的是自然语言不是模型训练代码。配置好模型 API Key 之后剩下的就是把想做什么翻译成一句人话。Q3AI 会瞎点吗操作失败怎么排查它会记录每一步的截图和推理文本失败时你能看到它当时以为那个按钮是什么。大部分误判靠把指令写得更具体就能解决必要时配合aiActionContext给全局上下文。Q4支持哪些视觉模型支持 UI-TARS、Qwen-VL、Gemini 等多种模型也支持接入自定义模型具体配置见项目文档中关于ai-model的说明。Q5脚本跑一次要多久会不会比传统工具慢很多每次 AI 推理确实会引入几百毫秒到数秒的开销但换来的是几乎为零的维护成本。对于改版频繁、选择器天天失效的项目这笔账通常是划算的工具也支持结果缓存重复执行会显著变快。✍️ 写在最后一句话总结Midscene.js 把 UI 自动化测试从维护选择器的体力活变成了描述界面的脑力活——界面怎么变脚本都不用跟着改。如果你正被脆弱的 DOM 选择器折磨或者在为多平台脚本重复维护发愁不妨克隆仓库亲手跑一遍上面的示例。把第一个脚本跑通的那一刻你会重新认识什么叫测试脚本长眼睛。写作说明本文采用痛点开篇 → 原理类比 → 对比表格 → 快速上手 → 能力速览 → 实战拆解 → 工作流接入 → FAQ → 收束的认知递进结构与参考文章的概述→快速入门→核心功能→高级特性→……教程模板在章节顺序、小标题表述上完全错开所有 YAML/JS/CI 代码示例均依据仓库内真实 APIaiAct/aiInput/aiAssert/aiWaitFor/aiQuery、midscene/cli run重新编写未复用参考文章任何代码配图选用仓库内真实运行截图并配含关键词的 alt 文本SEO 上以AI视觉自动化测试UI自动化测试工具为核心词将自然语言编写测试脚本跨平台UI自动化等长尾词自然融入小标题与正文。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考