Midscene.js 快速上手指南：AI 视觉做浏览器自动化，不写一个选择器-育师

Midscene.js 快速上手指南：AI 视觉做浏览器自动化，不写一个选择器

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

写 UI 自动化脚本时，最耗时的往往不是操作本身，而是定位元素：写好一个 CSS 选择器，等页面一改版，整段脚本就失效。Midscene.js 是一个 AI 视觉驱动的 UI 自动化工具——你用自然语言描述任务（比如“点击登录按钮”），它基于截图识别界面元素并直接执行，全程不依赖 DOM 结构。

和传统选择器有什么区别

传统做法	Midscene.js
元素怎么找到	手写 CSS 选择器或 XPath	AI 看截图直接定位
页面改版后	脚本跟着失效，要逐个修	走纯视觉路径，不受布局影响
Canvas、游戏界面	没有 DOM，基本做不了	截图能看清就能操作

🚀 先试后学：三个零门槛体验入口

Chrome 扩展，不写代码。装好扩展，打开任意网页，在提示框里输入想做的事，Midscene 截图并代你执行。不用装依赖，也不用写一行代码。

Android Playground，控制真机。手机用 USB 连上电脑，打开内置的 Android Playground。它通过 adb 控制本地设备，你输入自然语言指令，就能操作屏幕上的应用。

iOS Playground，真机与模拟器。iOS 侧有对应的 Playground，走 WebDriverAgent 控制本地 iOS 设备和模拟器，使用方式与前两个一致。

⚡ 安装与第一段代码

安装 Web 包：

npm install @midscene/web

最小可运行示例，用自然语言驱动浏览器：

import { AgentOverPlaywright } from '@midscene/web'; const agent = new AgentOverPlaywright(); await agent.launch({ headless: false }); await agent.aiAction('打开 GitHub 并搜索 Midscene.js'); await agent.aiAction('点击第一个搜索结果');

桥接模式复用本机浏览器。如果你要用已打开的 Chrome 里现成的登录态和 Cookie，不必新起浏览器：在本地终端跑起 Midscene SDK，连接到现有桌面浏览器，再下发指令即可。需要复用 Cookie 或做复杂浏览器操作时，这个模式比较合适。

🖥️ 能力一览：各平台能做什么

平台	接入方式	适用情况
Web	Puppeteer / Playwright / 桥接模式	浏览器页面自动化、端到端测试
Android	JavaScript SDK + adb	本地安卓真机
iOS	JavaScript SDK + WebDriverAgent	本地 iOS 设备与模拟器
任意自定义界面	JavaScript SDK	内部系统、游戏界面

API 分三类：交互 API 负责点击、输入、滚动等操作；数据提取 API 从界面和 DOM 中取出结构化信息；工具函数如aiAssert()、aiLocate()、aiWaitFor()覆盖断言、定位和等待。

📷 它怎么工作：只看截图

Midscene.js 的元素定位和交互走纯视觉路径：把截图交给视觉语言模型，模型直接返回元素位置，不读取任何 DOM。Canvas 和游戏这类没有 DOM 的界面因此也能操作。目前支持的模型包括 Qwen3-VL、Doubao-1.6-vision、gemini-3-pro 和 UI-TARS。

源码按职责拆分：核心引擎在 packages/core/src/，负责视觉定位与任务执行；Web、Android、iOS 的接入层分别在 packages/web-integration/src/、packages/android/src/、packages/ios/src/；回放与可视化界面在 packages/visualizer/src/。

两个机制值得了解。一是缓存：同一个脚本重复执行时复用之前算好的结果，重跑更快也更省开销。二是可视化回放报告：按时间轴回放每一步的描述、执行时间和截图，出问题时容易定位在哪一步。