如何用自然语言搞定UI自动化测试？Midscene.js 视觉驱动测试完整上手指南

如何用自然语言搞定UI自动化测试Midscene.js 视觉驱动测试完整上手指南【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene如果你写过哪怕一版 UI 自动化脚本一定经历过这样的崩溃时刻需求方轻描淡写地说界面只是微调下一秒你的 200 条用例就红了一半——因为那个用了半年的 CSS 选择器跟着新样式一起消失了。Midscene.js 正是为解决这类痛苦而生的开源框架它把截图 多模态大模型当作测试引擎让你用一句句自然语言描述操作步骤就能在 Web、Android、iOS、桌面应用上完成自动化测试与断言最大的价值是界面怎么改测试脚本都不用重写。一个周五下午的选择器事故先讲个真实到有点扎心的场景。小周是某电商团队的测试工程师某个周五下午产品临时调整了首页搜索框的结构改动其实不大——外层包了一个 div按钮换了图标。但测试仓库里和搜索框相关的 47 条用例有一半当场阵亡。接下来的三小时他做的事是这样的打开 DevTools逐个元素右键 Copy Selector粘贴进脚本跑一遍报错再换 XPath……好不容易修完产品又补了一句对了移动端 H5 也同步改一下。那一刻他感觉自己不是在写测试而是在给代码当人肉补丁师。这不是小周一个人的困境而是整个行业的心照不宣我们花在维护测试脚本上的时间可能比写业务代码还多。先算一笔账基于选择器的自动化到底贵在哪传统 UI 自动化依赖 DOM 结构、可访问性树或者控件 ID这套路线的底层逻辑是找得到才能测。它的脆弱点一张表就能看明白对比维度传统选择器方案Midscene.js 视觉驱动方案脚本维护每次改版都要跟着改选择器界面变样了也不用动脚本元素可及范围纯图标按钮、canvas、无语义标记元素容易失明人眼看得见的AI 基本都能定位原生应用支持需要额外桥接与控件树解析只要有屏幕截图就能驱动断言能力只能验证节点是否存在能验证颜色、高亮、布局等视觉效果上手门槛要懂框架 API、定位语法会打字、会说人话即可一句话总结传统方案是在结构的世界里工作而真实用户只关心画面对不对。当结构频繁变动时脆弱的定位器就成了测试套件里最大的负债。换个思路让 AI 直接看屏幕而不是找标签Midscene.js 的思路其实特别朴素——既然测试的目的是验证用户看到的界面那干脆让模型直接看用户看到的画面。它在底层把界面截图喂给多模态模型比如 Qwen、Doubao、GLM、Gemini以及可自托管的开源模型 UI-TARS由模型自己完成目标在哪、该点什么、输入什么的判断。你用自然语言下达指令剩下的交给视觉理解能力。这就像给测试脚本装上了一双眼睛而不是给它一根永远找不到路的坐标拐杖。脚本从告诉机器去哪里变成了告诉 AI 你想做什么维护成本自然断崖式下降。Midscene.js 的五个过人之处除了不挑界面、不怕重构这个框架还有几个相当能打的特点 一套 API 通吃全端Web 浏览器、Android、iOS、HarmonyOS、桌面应用底层共用同一个视觉驱动引擎学习一次处处可用。 以截图为准的绝对诚实断言的不是DOM 节点存在而是页面上真的显示了这个内容、这个颜色、这个布局。 既智能又可控既可以用 SDK 写进 Playwright / Vitest 测试套件做确定性回归也可以把能力交给 AI Agent 做自主探索式测试两种节奏自由切换。 一次运行一份可回放报告每次执行都会生成带截图的 HTML 报告AI 每一步做了什么、为什么这么选都能逐步回看排查问题不再靠猜。 插件即沙盒Chrome 插件与 SDK 共用同一套核心代码在插件里验证过的指令写成脚本后行为一致从试试看到上线跑无缝衔接。十分钟上手两条路线任你挑无论你写不写代码都能在十分钟内跑起来第一条自然语言测试。路线 A不写一行代码的浏览器体验如果你只是想先感受一下跟 AI 说人话来操作网页是什么体验Chrome 插件是最快的入口从 Chrome 应用商店安装 Midscene 扩展打开插件在浏览器右侧的侧边栏里配置你的模型服务商和 API Key随便打开一个网站输入指令比如点击搜索框输入‘机械键盘’然后回车观察 AI 实时定位、操作并给出反馈全程零代码。路线 B写你的第一条视觉驱动脚本想要可复用的自动化用 JavaScript SDK 也很直接。以浏览器场景为例装好依赖后核心代码长这样import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch(); const page await browser.newPage(); await page.goto(https://www.ebay.com); const agent new PlaywrightAgent(page); // 用大白话让 AI 操作页面 await agent.aiAct(在搜索框里输入 Headphones 并按下回车); // 提取结构化数据 const goods await agent.aiQuery( { title: string, price: number }[], 页面上展示的耳机商品, ); // 用自然语言做断言 await agent.aiAssert(页面左侧有一个分类筛选栏); await browser.close();注意到没有aiAct、aiQuery、aiAssert三个方法就覆盖了操作、提取、断言三大测试动作每一句参数都是人话。跑完后控制台会输出一个midscene_run/report/*.html报告路径打开它就能逐帧回放 AI 的每个动作。一张图看懂移动端也能这么玩视觉驱动的优势在移动端体现得更彻底——原生应用没有 DOM 可言传统方案往往需要控件树、无障碍接口层层解析而 Midscene.js 只要有设备屏幕截图就能开测。Android 和 iOS 的自动化界面几乎一样顺手哪些场景最适合用它视觉驱动不是银弹但它确实在以下几类场景里优势明显高频改版的重前端项目UI 变动的频率越高省下的选择器维护成本越可观组件库与低代码平台DOM 千变万化但看起来对不对始终是硬指标原生 App 与多端一致性验证Android、iOS、桌面端想跑同一套测试逻辑视觉驱动是最省力的交集AI Agent 自主测试把自然语言指令交给 Agent 批量执行模拟真实用户的探索行为。上手前需要知道的几件小事模型是关键变量视觉定位质量直接取决于多模态模型的水平建议优先选用对 UI 定位有专项优化的模型开源方案可以自托管数据不出内网环境配置先行模型服务商、API Key、网络连通性这三样先确认好能让后续体验顺畅很多性能按需取舍截图质量、缓存策略、并发批量都会影响速度与成本实际使用时可以按项目规模做针对性调整。如果你想直接阅读源码或深度定制可以通过git clone https://gitcode.com/GitHub_Trending/mid/midscene拉取仓库。想进一步研究的话几个值得逛的入口核心视觉引擎在packages/core/Web 集成在packages/web-integration/Android 与 iOS 支持分别在packages/android/和packages/ios/桌面客户端在apps/studio/官方文档位于apps/site/docs/zh/其中quick-start.mdx和quick-experience.mdx是新手最友好的起点。写在最后给测试脚本减负从现在开始回到开头的小周。如果他早点用上视觉驱动方案那个周五的下午大概会变成这样产品说改版他打开报告确认一眼新界面然后回复一句脚本不用动跑一遍就知道了——三分钟出结果下班回家。UI 自动化不该是一场和选择器永无止境的拉锯战。当工具开始看懂界面测试脚本才能真正成为业务质量的稳定压舱石而不是每周都要返修的技术债。挑一个周五的下午装个插件、跑通一条指令你会立刻明白原来写测试也可以这么说人话。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考