企业官网建设流程全解析

Midscene.js AI 视觉 UI 自动化实操指南：用自然语言操作任何界面

【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene

Midscene.js 是一款AI 视觉 UI 自动化工具：你用自然语言说出目标，它看一张界面截图，就能找到按钮、填好输入框、点下确认。不写选择器，不碰 DOM 结构（页面在浏览器里的内部树形组织），也不用知道某个元素挂在哪个 class 名下。

它专为 E2E 测试（端到端测试，即模拟真实用户从头到尾走一遍流程）而生，但同一套引擎也能承担各类 UI 自动化任务。

当选择器救不了你

传统 UI 自动化的通病，不是写脚本难，而是维护难。它依赖页面内部结构，哪怕有些 AI 工具改读了 DOM 或无障碍树，本质上还是同一套路数：

• 前端一改样式，选择器批量失效，测试脚本跟着重写；
• 纯图标按钮、自定义控件、Canvas（网页里画游戏用的标签）这类没有语义标注的元素，直接“看不见”；
• 原生 App、跨域 iframe 难以触达；
• 就算元素存在，也说不清页面“看起来”到底对不对。

Midscene 换了个思路：只凭截图干活。截图交给多模态模型（一种能“看懂”图片的 AI），由模型告诉它按钮在哪、该点什么、结果对不对。

打个比方：传统自动化像背下座位排号进场找座，座牌一换就懵；Midscene 像扫一眼屏幕直接找到目标，座牌怎么换都不影响。

这带来两个直接好处：维护少（界面改版不用追选择器），断言真（颜色、高亮、布局都能验证，而不只是“节点在不在”）。

🖥️ 一套 API，覆盖所有界面

Midscene 对目标界面只有一个要求：能截图。

满足这一点，同一套接口就能通吃。浏览器里，它可以配合 Playwright 或 Puppeteer（两个主流浏览器自动化框架）接管页面；手机上，Android 走 adb（安卓调试通道）、iOS 走 WebDriverAgent（苹果官方自动化通道）控制本地真机和模拟器；HarmonyOS（鸿蒙系统）与桌面端（Windows、macOS、Linux）都有对应实现；你自己开发的界面，只要能传进一张截图，就能接入。

换句话讲：网页、手机、车机、桌面工具，过去要学四五套工具，现在一套接口、同一批指令。

源码布局也清晰：引擎在 packages/core/src/，浏览器集成在 packages/web-integration/src/，安卓控制在 packages/android/src/。

三种写法：说、写、或交给 AI

不写代码：Chrome 扩展里打字

浏览器装个扩展，侧边栏直接输入指令，例如“点击登录按钮”“页面顶部是否显示导航栏”。适合零经验用户先试水。

写 JS：三类方法各管一摊

• aiAct：给目标，AI 自己规划多步操作，直到完成；
• aiTap、aiInput：即时动作，先定位再点一下或输入一次；
• aiQuery、aiAssert：只看不做，提取结构化数据或校验界面是否符合描述。

写 YAML：像读文档一样维护脚本

一个.yaml文件描述目标页面加一串步骤，人读得懂，改动成本极低，适合回归流程这类“跑起来就行”的场景。

更省事：交给 AI Agent

Midscene 还能把原子操作暴露为 MCP 工具（一种让 AI 应用互相调用的标准接口），上层 Agent 就能用自然语言直接检查和操作界面。

⏱️ 五分钟上手：Chrome 扩展

最快路径是官方的 Playground（试验场），三步走完：

1. 在 Chrome 扩展商店安装 Midscene 扩展；
2. 把多模态模型的接入配置粘贴进扩展设置（支持 Qwen-VL、UI-TARS 等，也可接 OpenAI 兼容接口）；
3. 打开任意网页，在侧边栏输入第一条自然语言指令。

扩展和后续要写的脚本共享同一套核心能力——在 Playground 里验证过的指令，原样搬进代码就能用，试错成本很低。

🔌 桥接模式：让脚本操作你自己的浏览器

自动化脚本通常控制一个“干净”浏览器：没登录态、没插件、没之前积累的状态。很多真实流程卡在这里。

桥接模式让本地脚本连上你正在用的桌面 Chrome，操作当前标签页或新标签页，Cookie、登录态、插件全部复用。连接前扩展会弹窗征求许可，点“允许”才生效，不会悄悄被接管。

重复跑同一批脚本时，缓存上场

AI 视觉方案的主要开销是模型调用次数。Midscene 会缓存两类结果：AI 规划出的步骤，以及定位过的元素位置（Web 端的 XPath 信息）。

同一指令在相似页面重跑时直接命中缓存、跳过模型调用；缓存过期就自动回退，让 AI 重新分析，不会拿错结果。官方文档给出的例子里，某段脚本启用缓存后耗时从51 秒降到 28 秒。

对每天都要跑的回归测试，省的是时间和 API 账单。

📊 每一步都留痕：可视化回放报告

每次运行都会生成回放报告：按时间轴铺开，每一步配截图、说明和耗时，像一段可逐帧检查的操作录像。

哪一步出了问题，打开报告一目了然，不用靠猜。

哪些人适合上手

• 测试工程师：不写选择器也能做 UI 回归，还能验证“看起来对不对”；
• 前端/全栈开发：验收测试、数据抓取、跨浏览器行为抽查；
• 非开发角色：从 Chrome 扩展入手，不搭项目、不装依赖；
• 自动化爱好者：自定义界面接进来，把网页、手机、桌面的操作串成一条工作流。

最小示例：从安装到第一条指令

// 先安装：npm install @midscene/web import { PlaywrightAgent } from '@midscene/web/playwright'; const agent = new PlaywrightAgent(page); // page 为 Playwright 的页面对象 await agent.aiAct('搜索耳机，点击第一个商品'); await agent.aiAssert('页面显示商品标题与价格');

给目标、它规划并动手、顺手验证结果——这就是全部的样子。

想继续往下走，中文文档在 apps/site/docs/zh/；而最快的第一步，永远是装上 Chrome 扩展，敲下你的第一句指令。

【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene