从0到1用AI视觉自动化搞定跨平台UI测试的实战指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一款基于视觉AI与自然语言自动化驱动的 UI 自动化测试工具它让测试脚本不再依赖脆弱的选择器而是像人一样看界面、说操作。无论你是被选择器折磨的测试工程师还是想给 Web、Android、iOS 应用找一套统一自动化方案的开发者这篇文章都能带你从零跑通第一个脚本再一路进阶到视觉回归、AI 生成用例等高级玩法。先讲个真实加班故事凌晨一点小周盯着屏幕上第 37 次失败的用例日志欲哭无泪——前端同事下午只是把登录按钮的class从btn-login改成了login-btn她维护了三周的 200 条选择器脚本就崩了三分之一。这场景是不是很眼熟传统 UI 自动化测试就像在玻璃桥上走路DOM 结构、xpath、id、class 随便动一下你的脚本就得跟着返工。更难受的是遇到图标按钮、canvas绘制的复杂控件、没有语义标签的自定义组件选择器干脆直接失灵连桥都没有。那如果……我们让机器直接用眼睛看呢第一关摸清 Midscene.js 的底细Midscene.js 的定位一句话就能说清一个 GUI Agent for E2E Testing——给测试套上一双AI 眼睛从屏幕截图里理解界面然后用自然语言驱动操作、查询和断言。打个比方传统测试是给机器递一张图纸DOM让它在图纸上找螺丝Midscene.js 是直接让机器看实物螺丝长什么样它自己认。只要人眼能看到的它基本都能定位。这套设计带来了三个实打实的好处选择器维护成本归零——界面改版脚本不用跟着改因为脚本里根本没有选择器覆盖面远超传统方案——图标按钮、canvas 图表、自定义控件、跨域 iframe、原生 App 统统能测门槛低到像说话——不需要会写复杂的选择器语法中文描述即可上图是 Midscene.js 的 Playground 调试台左边输入自然语言指令右边实时高亮界面元素并反馈执行结果。第二关三步搭好运行环境别被跨平台三个字吓到安装其实很简单核心就一条命令。第一步装依赖# 克隆项目仓库 git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene npm install如果你不想克隆整个仓库也可以按需安装对应的 npm 包# Web 自动化基于 Playwright / Puppeteer npm i midscene/web第二步准备模型密钥Midscene.js 需要接一个大模型的视觉能力支持 UI-TARS、Qwen-VL、Gemini 等在项目根目录建一个.env文件填入你的密钥# .env 文件填入你使用的视觉模型 API 密钥 OPENAI_API_KEYsk-your-key第三步验证环境# 检查模型是否连通 npx midscene model verify看到连通成功的提示环境就齐活了。这段在做什么用官方 CLI 先跑一次模型连通性检查避免后面写半天脚本才发现密钥没配对。第三关写出第一个自动化脚本Midscene.js 支持两种写脚本的方式YAML 脚本适合测试用例沉淀和JavaScript SDK适合深度集成。先看 YAML五分钟就能上手# login-test.yaml一个完整的登录流程脚本 web: url: https://www.saucedemo.com/ # 指定被测页面 tasks: - name: 用户登录 flow: # 一句自然语言描述一串操作输入账号、密码并点击登录 - aiAction: type standard_user in user name input, type secret_sauce in password, click Login # 等页面出现商品列表相当于智能等待 - aiWaitFor: there are products displayed on the page # 断言核心数据夹克衫价格必须是 49.99 - aiAssert: The price of Sauce Labs Fleece Jacket is 49.99跑起来同样是一条命令# 用 CLI 直接执行 YAML 脚本 npx midscene ./login-test.yaml这段在做什么一个脚本里同时覆盖了操作 等待 断言三个环节而且全程没有出现任何一个 CSS 选择器——这就是自然语言驱动测试的直观体验。升一级核心能力逐个拆解1. 视觉元素定位看人下菜碟aiLocate是 Midscene.js 的看家本领它不吃样式这一套只认长得像什么// 定位一个元素不管 class 叫什么只要它长得像搜索框就行 const searchBox await aiLocate(页面顶部的搜索框); // 带上下文的定位更精准 const submitBtn await aiLocate(登录表单里那个蓝色的提交按钮);这段在做什么用自然语言描述这个东西长什么样、在哪视觉模型在截图上找到并返回坐标后端再驱动鼠标键盘去操作。改版换样式不存在的。2. 自然语言操作一句话干一串活aiAction支持把多个步骤塞进一句话非常接近指挥真人操作的体验// 一步到位的复合操作 await aiAction(点击右上角设置图标然后向下滚动到页面底部); // 输入类操作单独拆出来便于传参 await aiInput(用户名输入框, testuserexample.com);3. 智能断言不只验证在不在传统断言只能验证元素是否存在、文本是否相等Midscene.js 可以验证视觉状态// 断言业务文案 await aiAssert(页面出现操作成功的提示); // 断言视觉状态按钮灰没灰、弹窗居不居中都能看 await aiAssert(登录按钮处于不可点击的置灰状态);4. 多平台一套逻辑同一份脚本跑三端这是 Midscene.js 最值钱的能力之一——跨平台一致性测试。Android 通过 ADB Scrcpy 驱动真机iOS 走 WebDriverAgent桌面端也有专门适配器而脚本逻辑几乎不用改# Web 自动化 npx midscene/web run login-test.yaml # Android 自动化需要连接真机或模拟器 npx midscene/android run login-test.yaml # iOS 自动化需要 Xcode WebDriverAgent npx midscene/ios run login-test.yaml左侧是 Android Playground 的步骤面板右侧是 Redmi 真机的实时画面一句打开设置检查版本号就能驱动手机。iOS 端同样支持自然语言描述步骤模拟器画面实时反馈Android 和 iOS 的脚本结构完全一致。再升一级进阶玩法让效率起飞1. 缓存优化把重复识别成本砍掉视觉模型每次识别都要消耗 tokens 和耗时Midscene.js 支持缓存历史识别结果同一画面第二次识别直接秒回const agent new Agent({ cache: { enabled: true, // 开启识别缓存 ttl: 3600000 // 缓存 1 小时 }, timeout: 30000 // 单次操作 30 秒超时 });实测感受启用缓存后重复执行同一段用例的时间能缩短一大截适合日常回归这种画面变化不大的场景。2. 并行执行多任务同时跑测试套件多了之后串行执行太浪费机器。Midscene.js 支持多 worker 并行# 4 个 worker 并行执行整个测试套件目录 npx midscene run ./test-suite --workers 43. 视觉回归测试让 AI 盯着 UI 不跑偏除了功能断言还能做视觉层面的回归——截图对比 AI 判定防止功能没坏但界面歪了的隐性回归// 视觉回归配置示例 const visualConfig { threshold: 0.01, // 允许 1% 的像素差异 ignoreRegions: [顶部广告位], // 忽略动态区域 baselinePath: ./baselines // 基线截图目录 };4. AI 自动生成测试用例最省事的是这个给一张应用截图让 CLI 直接生成可执行的 YAML 测试用例# 传入截图输出一份带注释的 YAML 用例 npx midscene generate-tests --screenshot ./app.png --output ./generated.yaml生成的脚本会包含识别到哪些元素、可以执行哪些操作的完整描述适合作为初版用例底稿再人工精修。5. 浏览器插件零环境快速验证不想搭环境、只想快速试一条指令Chrome 扩展装上就能用在页面里直接输中文指令执行扩展面板支持 Action / Query / Assert 三种模式输入指令后立刻高亮目标元素并执行适合调试和演示。Bridge 模式让浏览器扩展与本地 SDK 打通扩展负责看本地代码负责跑适合把浏览器操作嵌进自己的自动化链路。实战案例一个完整的电商回归脚本把上面的能力串起来写一个能直接进 CI的电商购物回归用例# checkout-regression.yaml电商购物全流程回归 web: url: https://example-shop.com tasks: - name: 搜索并加购 flow: - aiAction: 在顶部搜索框输入智能手机并回车 - aiWaitFor: 搜索结果列表加载完成 - aiAction: 点击第一个商品的加入购物车按钮 - aiAssert: 页面出现已加入购物车的角标提示 - name: 结算与确认 flow: - aiAction: 进入购物车点击去结算 - aiAssert: 订单确认页展示正确的商品名称和总价 # 用 aiQuery 抽取结构化数据方便后续断言 - aiQuery: 提取订单中的商品名称、单价、数量输出为 JSON 数组 name: orderItems跑起来并输出报告# 执行回归 生成 HTML 测试报告 npx midscene ./checkout-regression.yaml --report --output ./report.html避坑问答新手最常踩的四个坑Q1为什么我用aiLocate定位不准A指令越具体越准。别只写按钮要写购物车页面右下角红色的结算按钮。另外不同模型能力差异明显UI 理解类的任务优先选 UI-TARS 系或 Qwen-VL 系模型。Q2动态内容和懒加载页面怎么办A用aiWaitFor描述等待什么状态出现Midscene.js 会基于视觉轮询等待比固定sleep更稳。必要时可以调整 agent 的整体超时时间。Q3能接进现有的 CI/CD 吗A能。YAML 脚本 CLI 天然适合流水线跑完输出 HTML 报告并上传为构建产物即可。Web 端还提供了 Playwright 官方的 reporter 集成可以直接复用你已有的报告体系。Q4多语言界面支持吗A支持指令用中英文都行甚至中英混写也没问题。但注意指令语言和界面语言越一致识别越稳。写在最后该行动了回头看小周的故事——如果她当时用的是 Midscene.js那 37 次失败大概会变成 0 次。选择器崩了脚本里根本没有选择器。这就是视觉 AI 自动化的底气只要人眼能看见测试就能跑起来。Midscene.js 把 UI 自动化测试从维护选择器的泥潭里彻底解放出来让测试回归本质——描述业务、验证结果。现在你有两条路可以走想快速体验直接装 Chrome 扩展打开任意页面输一句中文指令想落地到项目按上面的三步搭环境把第一个 YAML 脚本跑通再逐步接入多平台和 CI工具的价值在于用起来。挑一个本周要回归的页面用自然语言写下第一条测试指令你会回来感谢自己的。延伸阅读平台与 SDK 集成文档apps/site/docs/zh/Web 自动化源码packages/web-integration/YAML 脚本与 CLI 实现packages/cli/【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
