Midscene.js 视觉AI驱动UI自动化测试入门指南Web、Android、桌面三端实践【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene上周一你的 UI 回归套件又红了。前端同学把登录按钮从button换成了带图标的a#login-btn这个选择器一夜之间全部失效五十多条用例无一幸免。更糟的是游戏页面上那些画在 Canvas 里的按钮你连选择器都写不出来——DOM 里根本没有它们。如果你的自动化测试只能看见 DOM那么画布里的按钮、原生 App 上的控件谁来点Midscene.js 给出的答案是不看 DOM只看截图。它用多模态视觉模型理解屏幕画面你用自然语言描述点击登录按钮它自己规划、自己点。这套跨平台的视觉 AI 方案让你不用再追着选择器跑。核心原理像人看屏幕而不是读 CSS这一节先帮你搞懂它凭什么工作省得后面全是玄学。传统方案包括很多读 DOM 或 accessibility tree 的 AI 工具都依赖页面结构选择器、data-testid、语义标签。结构一变就崩无语义的图标按钮、Canvas、跨域 iframe 全部看不见而且它无法判断界面看起来对不对。Midscene 把输入收窄到一样东西——截图。它把画面交给视觉语言模型模型返回登录按钮在哪个坐标框架负责把点击落到对应位置。打个比方老方案像是背下菜单编号再点菜厨房一改号你全傻眼Midscene 像是直接看着菜品下指令把红烧肉端给我服务员模型自己判断是哪一盘。UI 改版、样式重排只要按钮看起来还是那个按钮脚本就不用改。技术架构三层分工每层各管一段这一节用一张图加三层列表帮你建立整体印象不用深入源码。Midscene.js Android Playground 界面展示视觉AI驱动的移动端UI自动化测试流程视觉理解层截图 你的自然语言指令交给多模态模型输出元素位置和操作规划。核心代码在packages/core/src/agent/下。操作执行层把规划拆成 tap、type、assert 等原子动作按序执行执行中每步再截图、再校验发现跑偏会重新规划。平台适配层WebPlaywright/Puppeteer/桥接、Androidadb scrcpy、iOSWebDriverAgent、HarmonyOShdc、桌面端各自封装截屏与输入对上暴露同一套 Agent API。真实场景三个平台长什么样这一节看实际界面建立直观印象每个场景只给最多两行示意。Web 浏览器通过 Playwright 或 Puppeteer 驱动真实浏览器适合端到端回归。await agent.aiAct(在搜索框输入无线耳机并点击搜索按钮);Midscene.js Web Playground展示视觉AI对网页界面的理解与操作Android 移动端连上 adb 设备即可不需要额外装 App。await agent.aiAct(打开设置进入关于手机);Midscene.js Android Playground展示视觉AI驱动的移动端UI自动化测试流程桌面端Electron、Qt、WPF 构建的应用都能自动化输入走系统级驱动。Midscene.js 桥接模式控制面板展示通过代码控制本地 Chrome 浏览器的能力快速上手一条命令跑通第一个视觉测试这一节带你从零到跑通全程不超过四步。装 CLInpm i -g midscene/cli需要 Node 20.19。配置模型在运行目录放一个.env填四个变量。MIDSCENE_MODEL_BASE_URLhttps://你的模型服务地址/v1 MIDSCENE_MODEL_API_KEY你的API Key MIDSCENE_MODEL_NAME你的模型名 MIDSCENE_MODEL_FAMILY模型系列写 YAML 脚本tasks下写- ai: 打开设置应用这类自然语言步骤Web 场景用page.url指定地址。执行midscene ./bing-search.yaml命令行输出进度跑完自动生成可视化报告每一步的截图和时间都在里面。不想写代码也可以先在 Chrome 扩展里体验把验证过的指令直接搬进脚本。更多细节见快速开始文档。实战建议缓存、模型与CI这一节给几条能直接落地、帮你省时间和钱的建议。 开缓存给 Agent 配cache: { id: my-cache }相同指令相似页面会命中缓存官方案例里执行时间从 51 秒降到 28 秒。查询类操作aiQuery、aiAssert不缓存保证结果实时。模型按场景选重 UI 定位的用定位能力强的模型Qwen3、Doubao-Seed-2.1、GLM-4.6V、UI-TARS 等含可自部署的开源选项页面理解、数据提取可以按需把 DOM 也喂给模型省纯视觉的误判。CI 里用只读缓存配strategy: read-only跑稳了再flushCache()写入避免并发写脏缓存文件。报告进流水线生成的可视化报告作为 artifact 上传失败时直接看图定位不用复现。局限与成本先看清边界再上这一节说点参考文章不会替你想到的——什么场合别硬用。识别吃力的场景纯像素级的小图标、密集同构列表100 个长得一样的格子、文字极小或低分辨率界面模型定位准确率会下降可能需要拆分步骤或改用aiQuery兜底。API 调用成本每一步都要截图、调模型长流程的 token 开销是实打实的。用缓存能砍掉一大块但首次跑和 UI 大改后必然重新计费。速度视觉链路比纯 DOM 操作慢毫秒级敏感的自动化不适合。适用边界它擅长 UI 交互与断言但看起来对不等于业务对——后端数据正确性还是得靠接口测试兜底。Midscene 是补齐视觉这块短板的不是替代整套测试体系。下一步挑一条路径今天就跑通想零成本先感受装 Chrome 扩展配好模型在任意网页里敲一句点击登录按钮。想接进现有回归把最脆弱的三条用例改写成 YAML配好缓存跑一次看报告。想压成本对比一次带缓存和不带缓存的执行时间与 token 消耗心里有数再推广。从最疼的那条选择器开始改——那是它最能帮到你的地方。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考