Midscene.js AI 视觉 UI 自动化实操指南用自然语言操作任何界面【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.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 AgentMidscene 还能把原子操作暴露为 MCP 工具一种让 AI 应用互相调用的标准接口上层 Agent 就能用自然语言直接检查和操作界面。⏱️ 五分钟上手Chrome 扩展最快路径是官方的 Playground试验场三步走完在 Chrome 扩展商店安装 Midscene 扩展把多模态模型的接入配置粘贴进扩展设置支持 Qwen-VL、UI-TARS 等也可接 OpenAI 兼容接口打开任意网页在侧边栏输入第一条自然语言指令。扩展和后续要写的脚本共享同一套核心能力——在 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene.js AI 视觉 UI 自动化实操指南：用自然语言操作任何界面
Midscene.js AI 视觉 UI 自动化实操指南用自然语言操作任何界面【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.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 AgentMidscene 还能把原子操作暴露为 MCP 工具一种让 AI 应用互相调用的标准接口上层 Agent 就能用自然语言直接检查和操作界面。⏱️ 五分钟上手Chrome 扩展最快路径是官方的 Playground试验场三步走完在 Chrome 扩展商店安装 Midscene 扩展把多模态模型的接入配置粘贴进扩展设置支持 Qwen-VL、UI-TARS 等也可接 OpenAI 兼容接口打开任意网页在侧边栏输入第一条自然语言指令。扩展和后续要写的脚本共享同一套核心能力——在 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考