Midscene.js 完整指南：用视觉识别跑通 Web 到 App 的 UI 测试

Midscene.js 完整指南用视觉识别跑通 Web 到 App 的 UI 测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene前端一改版你精心维护的 200 个 CSS 选择器集体失效整条 E2E端到端测试脚本从绿灯变满屏红。这正是 Midscene.js 视觉驱动 UI 自动化测试要处理的问题它不读 DOM、不认选择器只靠屏幕截图理解界面你写一句话它自己点。项目定位Midscene.js 是一个 GUI Agent图形界面智能体把自动化测试变成给 AI 一句话它自己操作。它和传统方案最大的不同是把目标从 DOM 节点挪到了屏幕像素上Midscene.js 的视觉驱动 UI 自动化测试认的是看到的画面不是背后的结构。一个没有文案、纯图标的按钮选择器往往摸不到它但它长得像个齿轮模型就能点中。原理它每一步先截一张图把这张图和你的自然语言指令一起交给多模态大模型既能看图又能读文字的 AI 模型模型回答目标元素在哪、该点还是该输入框架再把坐标翻译成一次真实点击。整条链路就是「截图 → 理解 → 执行」的循环。这套模型调用与任务编排的大脑放在 核心服务层Web、Android、iOS、桌面各自挂一个执行器所以同一份脚本能换端跑。快速上手 配置模型环境变量先告诉它用哪个模型、密钥是什么以豆包 Seed 为例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-seed最小可跑 YAML 测试脚本声明式脚本只描述要做什么这里让它在 Bing 上搜天气并断言结果page: url: https://www.bing.com tasks: - name: 搜索并验证 flow: - ai: 在搜索框输入今日天气并回车 - aiAssert: 结果中展示了天气信息运行并查看报告全局装一次 CLI跑脚本报告会自动生成到midscene_run/report/用浏览器打开即可回放每一步的截图与耗时npm i -g midscene/cli midscene ./bing-search.yaml能力全景 同一份 YAML换个前缀就能跨平台换端Web接 web-integration对接 Playwright / Puppeteer跨域 iframe、拖拽、快捷键都能处理。Android走 scrcpy 投屏控制android:前缀指定设备。iOS走 WebDriverAgentios:前缀指定设备。桌面Win / macOS / Linux 都能开应用、输入、断言。调优与避坑 ️四条最常见的情况统一按现象 → 原因 → 怎么办列定位失败描述太模糊模型猜不准位置 → 换成带颜色和方位的锚点右上角蓝色圆形设置图标必要时把timeout调大。跑一半卡住页面还没加载完就截图了 → 把大动作拆成小步断言前用aiWaitFor或sleep等渲染。重复跑太贵每次都重新问模型 → 脚本里加cache: { id: xxx }命中缓存后跳过模型调用。模型怎么选没有万能模型 → 轻量场景用 Qwen / Seed 这类快模型复杂 UI 用定位更强的 UI-TARS先拿小样本试一轮再定。想让 UI 测试少维护选择器、一套脚本跨端跑的前端与测试同学最该试试它尤其是界面常重构或要覆盖原生 App 的团队。模型能看懂的界面越多这套视觉驱动 UI 自动化测试只会越省事。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考