Midscene.js让 AI 用眼睛做 UI 自动化测试的完整指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene前端一重构300 多个选择器跟着失效UI 回归测试一夜爆红修到凌晨第二天产品又改了一版布局——这是做 UI 测试绕不开的日常。Midscene.js 是为此而生的视觉驱动 UI 自动化测试框架它不解析 DOM而是让 AI 多模态模型直接看屏幕截图来定位元素、执行操作。换句话说只要画面里能看到的东西它就能点、能读、能断言界面怎么改都不影响那几行用例。和传统工具的本质区别传统工具的定位依据是代码长什么样选择器、DOM 树、可访问性节点。界面一重构这些坐标就全飘了。视觉驱动的依据是屏幕上看到什么跟底层结构解耦于是有三件事明显更顺图标、Canvas、跨域 iframe这类没有语义标签、取不到 DOM 的元素只要像素上能被辨认AI 就能操作。一套脚本跨平台同一句点击右上角的登录按钮在 Web、Android、iOS、桌面端含义一致不必为每个平台重写定位逻辑。用意图而非实现写用例写的是输入用户名并登录而不是定位#username、#password再点.btn维护成本从跟结构赛跑变成改一句话。内部怎么运转把一次测试请求拆成数据流来看比静态讲分层更清楚。以一次aiAct(登录并进入首页)为例数据是这样流动的截图平台适配层Web 走 packages/web-integration/src/ 的 Playwright/Puppeteer移动端走 scrcpy 或 WebDriverAgent把当前屏幕抓成一张图连同可选的 DOM 片段一起打包。规划与识别智能代理层 packages/core/src/agent/ 把登录并进入首页这句话喂给多模态模型模型返回一份分步计划——先定位用户名框、再输入、再点登录定位那一步模型在截图上直接框出元素坐标。动作执行执行器拿到坐标回到平台适配层去真实地tap/type/click而不是改 DOM。结果校验aiAssert或aiWaitFor再截一次图让模型判断是否已显示登录后的首页把通过/失败连同证据截图一起记下。报告核心服务层 packages/core/src/service/ 把每一步的截图、耗时、模型 token 消耗串成一份可回放的 HTML 报告失败的步骤能一眼停在出错那一帧。三层各管一段适配层管手和眼截图 执行动作代理层管大脑调模型、拆任务、定位元素核心服务管账本任务编排、缓存、报告。它们通过一份标准化任务协议协作所以换平台时只换适配层大脑不用动。10 分钟跑通第一个用例最短路径是装依赖 → 配模型密钥 → 写一个 YAML → 跑 CLI → 看报告。先装 CLI并配好至少一个多模态模型的 API key以 OpenAI 为例npm install -g midscene/cli export OPENAI_API_KEYyour_keyYAML 用例把要做什么写成自然语言。下面这个最短用例就是登录 Sauce Demo 并校验商品列表web: url: https://www.saucedemo.com/ tasks: - name: 登录并校验 flow: - aiAct: 输入用户名 standard_user 和密码 secret_sauce点击登录按钮 - aiWaitFor: 页面显示商品列表 - aiAssert: 商品列表不为空用 CLI 执行跑完会在本地生成 HTML 报告midscene run ./sauce-demo.yaml midscene report ./midscene_run/打开报告能看到每一步的截图回放、模型返回的坐标、token 消耗失败的步骤直接停在出错那一帧。不想配环境的话也可以起本地 Playground用浏览器界面手动喂一句指令、看 AI 一步步执行npx midscene/web-playground离开浏览器之后移动端和桌面端换的是手和眼大脑完全复用。Web 上截图靠浏览器、动作靠click/typeAndroid 通过 scrcpy 投屏加 ADB 注入事件iOS 走 WebDriverAgent桌面端则直接抓屏加合成输入事件。定位逻辑、任务编排、报告格式三者保持一致所以同一个aiAct在三个端能共用一句话。差异主要在感知质量移动端分辨率低、有系统栏遮挡建议在aiActionContext里补一句背景说明比如底部是应用抽屉桌面端 DPI 缩放会影响坐标换算跨机执行时留意一下。整体体验如下图左侧是自然语言指令和分步进度右侧是实时设备画面调优与排坑模型怎么选症状用例多、追求便宜快。→ 处理轻量任务用 Qwen-VL / Gemini Flash 档速度快、单价低。症状图标按钮、密集小控件老是点偏。→ 处理换 UI-TARS 这类专门做元素定位的模型或开deepThink: true让模型多想一步。缓存症状同样的用例反复跑每次都烧 token。→ 处理开启缓存后规划与定位结果由task-cache.ts落盘复用命中时直接跳过模型调用同一用例能从约 7 秒压到 1 秒内。症状页面改版后缓存命中了旧结果。→ 处理缓存按版本加内容哈希失效升级 Midscene 版本即可或删掉对应的.cache.yaml。元素定位失败症状AI 找不到指定元素。→ 处理把描述写具体右上角蓝色圆形头像比设置图标稳确认截图没被遮挡、分辨率别太低。症状步骤卡住超时。→ 处理把长操作拆成多步给aiWaitFor调大超时并确认模型服务网络可达。跨平台偶发失败症状同一脚本一端过、另一端挂。→ 处理在aiActionContext里补该端的布局背景说明别指望一份描述覆盖所有平台的差异。接下来会怎样判断是两条线。一是模型侧多模态 UI 模型的定位精度还在快速爬坡现在偶尔点偏的元素过几个版本大概率不用deepThink兜底了。二是用例侧录制 → 自动生成 YAML → 回放这条链路已经成型维护重心会从手写定位逐步转向审校 AI 生成的脚本。短期内最实际的变化是你写测试的字数会越来越少改起来也越来越像改一句话。把最头疼的那个页面——就是每次重构都挂的那一个——丢给它跑一遍用自然语言写两句指令看看它能不能绕过你那套已经维护不动的选择器。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考