Midscene.js 快速上手教程用截图和自然语言跑通 5 个平台的 UI 自动化【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene写 E2E 测试时你一定遇到过这种局面前端重构一次CSS 选择器全挂Canvas 绘图区、纯图标按钮、原生 App 界面压根没有选择器可写。Midscene.js 换了一条路它自称 GUI Agent for E2E Testing靠一张屏幕截图 视觉语言模型直接看懂界面再用一句自然语言完成点击、输入、滚动和断言。同一套 Agent APIWeb、Android、iOS、HarmonyOS、桌面端通用。它能帮你做什么4 个典型场景Web 端 E2E 回归不再维护#app div:nth-child(3)这类脆选择器。用aiAct描述完整流程搜索耳机并筛选到 100 元以下用aiAssert校验用户肉眼看到的结果——颜色、高亮、布局、报错文案都能断言。移动端 App 测试Android 走 adb scrcpy 投屏流iOS 走 WebDriverAgent鸿蒙走 HDC。aiTap、aiInput、aiQuery一套 API 原样复用登录流、下单流用自然语言描述即可。结构化数据提取aiQuery({name, price}[])让模型把界面上的商品列表直接抽成 JSON适合做价格监控、竞品采集替代脆弱的正则解析页面源码。桌面应用与跨应用工作流在 Windows、macOS、Linux 上用原生键鼠控制 Electron、Qt 和原生程序甚至跨应用操作打开浏览器发帖、拖文件无界面 API 也能自动化。10 分钟上手安装、配模型、跑通第一个任务结论先行装 4 个包、配 4 个环境变量、写 8 行脚本就能跑通第一个任务。1. 安装依赖以 Web 为例并配置模型。官方以豆包 Seed 2.1 Turbo 为例Qwen、GLM、Gemini、UI-TARS 等也支持npm install midscene/web playwright playwright/test tsx --save-dev export MIDSCENE_MODEL_BASE_URLhttps://ark.cn-beijing.volces.com/api/v3 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628 export MIDSCENE_MODEL_FAMILYdoubao-seed2. 编写最小脚本保存为demo.tsimport { 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); await agent.aiAct(在搜索框输入 headphones 并按回车); await agent.aiAssert(页面出现耳机商品列表);3. 运行npx tsx demo.ts。跑完打开自动生成的 HTML 报告能逐步回看截图、元素位置和 AI 的决策过程。想先点着玩再写脚本Web 端直接装 Chrome 扩展当 Playground 用移动端一条命令拉起npx --yes midscene/ios-playground它是怎么工作的截图 → 看懂 → 操作 → 验证闭环只有四步① 截当前屏幕② 视觉模型在截图上定位目标元素并理解界面语义③ 执行层把它翻译成该平台的具体动作——浏览器点击、adb 注入触摸、原生键鼠④ 再截一张图比对预期视觉是否出现。断言aiAssert走同一条路所以校验的是用户看到的而不是 DOM 里写的是什么。平台覆盖速览WebPlaywright / Puppeteer 直接挂到现有pageBridge 模式可无侵入控制你本机已打开的 Chrome集成层代码在 packages/web-integration/src/Androidadb 连接设备 scrcpy 屏幕流实现见 packages/android/src/iOS通过 WebDriverAgent 控制真机/模拟器实现见 packages/ios/src/HarmonyOSHDC 连接鸿蒙设备hdc version能输出版本号即可开始桌面端原生键鼠 截图支持多显示器实现见 packages/computer/src/自定义界面只要你能提供截图 执行动作两个能力就能接入自研平台避坑指南稳定性、成本与速度问题同一脚本偶尔失败→ 别用盲 sleep用aiWaitFor(过滤后的结果已展示)等可见状态失败时打开 HTML 报告看每一步的截图与 AI 决策比猜快得多。问题模型调用贵、慢→ 截图方案本身不传输大 DOM 树成本可控开启内置结果缓存见 缓存文档重复操作直接命中开源模型可自托管压成本。官方基准里 60 个任务的总模型开销仅 $0.59AndroidWorld Pass1 达 93.1%。问题环境权限静默失败→ Windows 上未提权进程无法向管理员窗口发输入点击会被无声丢弃保持两端权限级别一致macOS 记得授辅助功能权限无显示器 CI 服务器装 Xvfb 并开 headless 模式。融入现有工作流Playwright、YAML 与 CIPlaywright / Puppeteer不需要换框架把 Agent 挂到已有page上原有 fixture 和断言照旧。YAML 声明式用例midscene/testBeta把 UI 流程写在 YAML 里数据准备、清理包成可复用的 TypeScript Node适合人机含 AI Agent共同维护用例。Bridge 模式通过本地 Bridge 控制桌面 Chrome不注入页面适合对无侵入有要求的场景。MCP 与 Skills把 UI 操作暴露成 MCP 工具让你的 AI 编码 Agent 也能直接操作界面。CIPlaywright 无头模式、Android 模拟器、桌面 Xvfb 都可在流水线里跑。谁适合用它如果你要维护跨 Web 和移动端的 E2E 用例、被选择器维护成本折磨过、或想给 Canvas/原生界面补上自动化手段Midscene.js 值得进你的技术选型。行动建议很具体今天就装好 Chrome 扩展在你最头疼的那个页面上用一句自然语言跑一次aiAssert——10 分钟后你会有明确判断。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考