Midscene.js：用自然语言驱动 AI 操作浏览器，3 个场景 30 分钟跑通 E2E 自动化
【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene
Midscene.js 让 AI 像人一样看屏幕、点按钮、填表单，不用写选择器就能操作浏览器和移动端做 E2E 测试。跟着做完，你能跑通第一条自然语言指令，并拿到可视化运行报告。
它到底能干什么
- 看屏幕理解界面，定位按钮和输入框
- 用自然语言驱动点击、输入、滚动
- 提取页面结构化数据并做断言
- 生成 HTML 报告，逐步复盘 AI 决策
- 跨 Web、Android、iOS 复用同一套 API
它把 UI 自动化从"维护一堆 CSS 选择器"变成"描述你要的结果"，适合写 E2E 测试、做数据抓取和自动化脚本的开发者。
30 秒跑通第一个 Demo
最快的路径是 Chrome 扩展，零代码。
- 从 Chrome 商店安装 Midscene 扩展，点扩展图标，浏览器右侧出现侧边栏。
- 进侧边栏设置，粘贴模型配置（
MIDSCENE_MODEL_API_KEY、MIDSCENE_MODEL_NAME等四个变量）并保存。 - 打开任意网页，在输入框敲一句"点击登录按钮"。
你会看到：侧边栏里 Planning、Locate、Action 等步骤依次打勾，网页里对应按钮被高亮并点击；跑完还会生成一份 HTML 报告，点进去能看到每一步的截图和 AI 的判断。
按场景选玩法
扩展适合"先试试效果"，要接进工程就换 Agent API。
浏览器自动化 | 搜索、提取并断言商品
适合把自动化塞进已有的 Playwright 项目。核心三步：aiAct操作、aiQuery取数据、aiAssert验证。
import { chromium } from 'playwright'; import { PlaywrightAgent } from '@midscene/web/playwright'; const browser = await chromium.launch(); const page = await browser.newPage(); await page.goto('https://www.ebay.com'); const agent = new PlaywrightAgent(page); await agent.aiAct('搜索 "Headphones" 并等待结果出现'); const items = await agent.aiQuery('{itemTitle: string, price: number}[], 提取商品标题和价格'); await agent.aiAssert('搜索结果里至少有一个耳机商品');如果你遇到 AI 点错位置 → 给aiAct/aiTap传{ deepLocate: true }，多花一次模型调用换更准的定位。
浏览器跑顺了，同一套写法也能直接挪到手机真机。
移动端 E2E 自动化 | 在 Android 真机上跑 UI 流程
用 YAML 描述目标设备和步骤，deviceId从adb devices查，连上真机就能跑。
android: deviceId: s4ey59 tasks: - name: 地图导航 flow: - ai: 打开地图应用 - ai: 在搜索栏输入 "杭州西湖"，点击第一个结果 - ai: 点击 "路线" 按钮进入路线规划页 - aiAssert: 页面显示了导航路线如果你遇到设备连不上 → 先跑adb devices确认序列号，再核对deviceId是否一致。
不想写代码、只想快速验证一个流程？用它的无代码脚本运行器。
无代码跑脚本 | 一条命令执行 YAML 自动化
装一次 CLI，写好 YAML，一条命令跑完，报告自动出。
page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 "今日天气" - sleep: 3000 - aiAssert: 结果显示天气信息npm i -g @midscene/cli midscene ./bing-search.yaml运行前在运行目录放一个.env，填好MIDSCENE_MODEL_BASE_URL、MIDSCENE_MODEL_API_KEY、MIDSCENE_MODEL_NAME、MIDSCENE_MODEL_FAMILY四个值。
如果你遇到"模型没配置"报错 → 检查.env是否在运行midscene的目录，且别带export前缀。
踩坑 & 调参
- 用 Ollama 报 403→ 扩展来源没被 Ollama 放行 → 设
OLLAMA_ORIGINS="*"。 - 跑 CLI 报
Unsupported Node.js version→ Node 版本太低 → 升到 20.19+/22.12+/24+。 aiAct又慢又费 token→ 它每步都重新规划 → 固定单动作改用aiTap/aiInput，小元素加deepLocate: true，实在复杂再调大agent.replanningCycleLimit（默认 20）。.env配了不生效→ 文件放错目录或带了export前缀 → 放到运行midscene的目录，并去掉export。
下一步去哪儿
- 搞懂 API 怎么选：读 基本概念，讲清
aiAct和aiTap的取舍、aiContexts怎么用。 - 跑无代码脚本：看 使用 YAML 格式的自动化脚本 和 YAML 脚本运行器。
- 搭可维护的测试工程：进 Midscene Test，把 UI 流程和接口调用拼成完整 E2E。
从一条自然语言指令出发，慢慢替换掉测试里最难维护的那些选择器，是上手 Midscene.js 最舒服的节奏。
【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
