MidScene.js 自然语言驱动浏览器自动化：新手 30 分钟上手指南-平芜编程栈

MidScene.js 自然语言驱动浏览器自动化：新手 30 分钟上手指南

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

MidScene.js 是一个开源的 GUI 自动化 Agent：你用一句中文或英文告诉它"帮我登录，把商品价格取出来"，它就驱动浏览器替你把事做完。它和 Selenium、Playwright 这类工具的差别在于，MidScene.js 不写选择器、不读 DOM 结构，而是像人看屏幕一样直接分析截图来找按钮、找输入框——页面怎么改版，只要肉眼能看见，它就能继续工作。这篇介绍面向零基础或只会一点皮毛的你，不需要会编程，读完就能把第一条指令跑起来。

3 分钟跑通第一条指令

环境要求很低：装好 Node.js 18 以上和 Git 就行。把仓库拉下来：

git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install

但最省事的体验路径其实是 Chrome 扩展。打开 Chrome，进入扩展管理页（chrome://extensions），开启右上角的"开发者模式"，点"加载已解压的扩展程序"，选择仓库里的apps/chrome-extension目录，MidScene.js 图标就出现在工具栏了。

在扩展侧边栏的设置里粘贴一组多模态模型的配置——这是它背后真正"看懂"页面的 AI，Qwen、UI-TARS 等都能用——保存后打开任意网页，在指令框里敲一句"点击登录按钮"，回车，浏览器就会自己完成点击。跑通这一步，你就已经会用 MidScene.js 了。

它到底怎么工作

两个比喻能说清全部机制。

第一个比喻：闭卷考试的监考老师。传统工具像拿着标准答案对页码，页面一改版页码全乱，它就瞎了。MidScene.js 则是盯着屏幕本身：先截一张图，交给视觉语言模型（一种能"看懂"截图里有什么的 AI），模型回答"登录按钮在右上区域，是蓝色矩形"，它再换算成坐标点下去。整个过程跟页面代码长什么样无关。

第二个比喻：把老板的口头安排翻译成工单。你说"下单买咖啡"，任务规划引擎会把它拆成一串小工单——打开页面、找到商品、点规格、加购、结算——逐条执行，每做完一条再截图看一眼"真的做完了吗"，确认了才进入下一条。

拿来能做什么

网页填表：你想注册一个账号 → 写"打开注册页，用户名填 test01，密码填 123456，勾选协议，点击提交" → 你得到一个已经提交成功的账号，表单校验错误它会自己看自己改。
数据采集：你想拿到商品列表的价格 → 写"提取页面上所有商品的名称和价格，返回 {name: string, price: number}[]" → 你得到一份结构化的 JSON，可以直接存盘或喂给下游脚本。
结果核验：你想确认页面状态对不对 → 写"页面顶部应该显示导航栏" → 它看一眼截图，返回通过或不通过，这就是测试断言。
跨设备重复劳动：你想在手机上做同一套操作 → Android、iOS、HarmonyOS 用完全相同的指令写法 → 同一句话换台设备照样跑，仓库里示例脚本集能看到真实长什么样。

指令写法有个小技巧：描述越具体越稳。"点击页面顶部中央带放大镜图标的搜索框"永远比"点搜索"命中率高。MidScene.js 自然语言指令怎么写，核心就是"说人话 + 补上位置和外观"。

再往深一步用

录制重放：嫌手写指令慢，就用浏览器插件的录制功能。点录制，你手动把操作做一遍，停止后它自动生成一条可编辑的自然语言指令，之后改改措辞就能反复执行。

批量任务：把任务写成 YAML 脚本文件，一份文件描述"打开哪个网址 + 做哪几步"，比如仓库里的 online.yaml 就是"登录示例商城 → 抽取商品 → 断言价格"三段式。准备好多份脚本后，用 CLI 一次性批量执行（MidScene.js 批量任务执行的代码在 packages/cli 里），结果逐个落盘，不用人盯。

定时触发：把批量执行命令交给系统的 cron 或 Windows 任务计划，比如每天凌晨三点自动跑一轮竞对价格采集，报告生成好等你上班看。

桥接模式：如果脚本在本地跑、浏览器在你另一台机器上，桥接模式能把两者接起来，远程驱动现有浏览器并实时看状态。

你大概率会卡在这里

Q：安装扩展后跑指令报错Cannot access a chrome-extension:// URL of different extension？多半是别的扩展往页面里注入了脚本，和 MidScene.js 撞了。打开开发者工具，找到 URL 以 chrome-extension:// 开头的标签，按 ID 去扩展管理页禁用它，刷新重试。

Q：本地用 Ollama 模型时报 403？Ollama 默认只允许本机访问，设置环境变量OLLAMA_ORIGINS="*"后重启 Ollama 即可。

Q：识别不准，点错按钮？先检查模型配置是不是支持 UI 定位的多模态模型，再在指令里补上元素的位置和外观描述。两者都做了还错，换更强的模型通常立竿见影。

Q：控制 Android 真机没反应？确认 USB 调试已开启、adb 能列出设备。这是 MidScene.js 安装环节最常见的坎，扩展里只跑网页不受影响。