Midscene.js 快速上手指南用自然语言跑通跨平台 UI 自动化测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene想象这样一个画面AI 打开浏览器看了一眼屏幕自己找到了登录框填入账号密码提交后确认商品列表出现了——全程没有任何选择器只有一句自然语言指令。这就是 Midscene.js一个靠视觉看懂界面、用自然语言驱动操作的跨平台 UI 自动化测试框架。Midscene.js 是什么和传统做法差在哪一句话定位Midscene.js 是一个面向端到端测试的GUI Agent——它不关心页面底层长什么样只关心屏幕显示了什么。传统 UI 测试工具的路子你大概很熟写 CSS 选择器、挂 DOM 节点、依赖可访问性树。这条路的问题是结构一变测试全崩。Midscene 换了个思路说白了它像人一样工作截图 → 看懂 → 操作。对比项传统工具Midscene.js定位元素选择器 / DOM / 可访问性树只看截图界面重构后选择器批量失效视觉没变就还能跑能力边界图标按钮、canvas、跨域 iframe 基本够不着人眼能看见它就能操作断言内容这个节点存不存在用户实际看到了什么颜色、高亮、布局这意味着它天然适合传统工具够不到的场景没有语义标记的图标按钮、Canvas 绘图、原生 App、跨域 iframe一个接口全通吃。它是怎么看懂界面的一次操作的完整生命周期 不看目录结构跟着一次真实操作走一遍就懂了。假设你下达指令点击登录按钮截图框架先对当前屏幕截一张图这是它唯一的信息来源理解界面截图交给多模态大模型模型用视觉定位出登录按钮在哪、周围还有什么决定动作模型规划出点击坐标和交互方式必要时拆成多个子步骤执行通过平台适配层把动作打到真实设备上——浏览器里是 Playwright/PuppeteerAndroid 走 scrcpy 投屏控制iOS 走 WebDriverAgent校验结果用aiAssert再看一次屏幕确认结果符合预期才算通过。整个调度逻辑在packages/core/src/agent/里YAML 脚本解析在packages/core/src/yaml/各平台的手脚则分别放在packages/web-integration/、packages/android/、packages/ios/、packages/computer/这些包里。你能直接用的核心 API 就三个aiAct操作、aiQuery提取数据、aiAssert断言换个说法就是做、取、验。模型方面Midscene 支持 UI-TARS、Qwen-VL、Gemini、GLM-4.6V 等多模态模型也包含可自托管的开源选项配置时按自己手头有的密钥来即可。快速上手跑通第一个测试 ⚡准备三步就够拿到代码、配好模型密钥、写一条 YAML。第一步拿到项目git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene npm install第二步配置模型密钥# 设置你手头模型的环境变量任选其一 export OPENAI_API_KEYyour_api_key_here # export QWEN_API_KEYyour_qwen_key第三步写一个最小 YAML 用例# 登录 Sauce Demo 并验证商品列表 web: url: https://www.saucedemo.com/ agent: aiActionContext: 如果存在cookie同意对话框请关闭它 tasks: - name: 用户登录 flow: - aiAct: 在用户名输入框输入standard_user在密码框输入secret_sauce点击登录按钮 planningStrategy: fast # 快速规划策略简单页面更省时间 - aiWaitFor: 页面显示商品列表第四步执行并看报告npm install -g midscene/cli midscene run ./your-test.yaml # 执行测试 midscene report ./test-results/ # 查看可视化报告跑完后你会拿到一份带截图时间线的 HTML 报告每一步 AI 看到了什么、做了什么、断言是否通过一目了然。如果你更习惯写代码Playwright/Puppeteer 集成同样直接从midscene/web创建一个 Agent 后agent.aiAct(点击登录按钮)、agent.aiQuery(页面中的商品{name: string, price: number}[])、agent.aiAssert(页面顶部显示导航栏)三个方法覆盖绝大多数场景。一套用例多端怎么跑 Midscene 最省事的地方在于一套逻辑三端复用。任务描述是自然语言和平台无关所以换平台只需要换头部配置任务本身几乎不动。举个例子打开设置应用并确认进入设置页这个任务# Android 端指定设备号即可 android: deviceId: emulator-5554 tasks: - name: 打开设置应用 flow: - aiAct: 在主屏幕找到设置图标并点击 - aiAssert: 设置页面已打开同样的任务逻辑把头部换成ios: deviceId: iPhone-15就跑在 iPhone 上桌面端则用computer: platform: windows指定操作系统任务流完全一样。三个平台对应的 Playground可视化调试台也各自独立也就是说Web 里验证过的操作意图搬到手机和桌面上基本不用重写这对回归测试是实打实的成本节省。跑得更快、更省模型、缓存与并行怎么调性能这块不用记参数记住什么情况 → 怎么调就行用例多、重复多→ 开缓存。同一个界面反复执行时Midscene 可以复用之前的视觉定位结果AI 调用次数直接砍下来web: url: https://example.com cache: true # 启用结果缓存 cacheTtl: 3600 # 缓存有效期 1 小时界面简单、求快→ 换轻量模型。Flash 级别的快速模型响应快、成本低适合表单操作这类常规用例界面复杂、定位难→ 换 UI 理解专精的模型比如 UI-TARS-1.5-7B专门优化了 UI 元素定位高精度断言→ 上 GLM-4.6V 或 GPT-4V 这类识别准确率更高的模型。测试套件大、等得久→ 开并行。多条用例互不依赖时直接并行跑midscene run --parallel 4 ./tests/*.yaml # 4 条用例同时执行它看走眼了怎么办三个最常见的坑各给一条最快解法元素定位失败AI 找不到按钮先查提示词够不够具体——提交按钮改成页面右上角的蓝色圆形提交图标定位成功率会明显提升。再确认截图分辨率适中、不模糊界面特别复杂的加上deepThink: true让模型多想一想同时把timeout放宽到 10 秒。某一步卡住、执行超时先怀疑指令太贪心。把注册并填完所有信息拆成三四个小步骤分步执行等待类的aiWaitFor单独加大超时还卡住就检查下模型服务网络是否通畅——大部分卡死其实是请求没回来。一个平台过、另一个平台挂说明用例里混进了平台特有假设。给不同平台配独立的头部配置把平台相关的描述比如在开始菜单搜索抽成条件化步骤让任务主体保持平台无关。Midscene.js 把 UI 测试从维护一堆脆弱选择器拉回到了用一句话描述意图Web、移动端、桌面端一套 API 全打通报告还自动可视化。随着多模态模型对界面的理解越来越准这类视觉驱动的测试会成为 E2E 测试的常态。现在就从一个最小的 YAML 用例开始把你的第一批测试交给眼睛试试。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考