用一句自然语言让浏览器替你干活：MidScene.js 上手记
【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene
MidScene.js 是一款 AI 浏览器自动化工具，你用中文或英文写一句话，比如"打开招聘网站搜一下后端岗位"，它就会自己看懂页面、找到搜索框、敲字并回车。项目同时支持网页、Android、iOS 和桌面端，还自带 Chrome 插件和可视化报告。下面用三分钟带你装起来，再亲手敲下第一条指令。
不用写代码，也能指挥浏览器
先说清楚这工具适合谁，免得白装。
- 平时要盯着几个网站收信息、手动复制粘贴的普通用户
- 会一点代码，但想摆脱维护选择器的测试工程师
- 产品或运营同学，需要验证"这个页面改完长什么样"
你不需要懂 CSS 选择器，也不需要记住任何命令格式。MidScene.js 把"操作界面"这件事交给了视觉模型：它像人一样盯着屏幕截图找按钮，而不是读页面的代码结构。所以哪怕按钮上只有一个图标、没有文字，它也能指认出来。
三分钟装好 Chrome 插件，零配置页面
官方最快的上手路径不是写脚本，而是装一个 Chrome 插件。打开任意网页，右边会出现一个 Midscene.js 侧边栏，你在里面打字、点 Run 就行。
本地从源码跑插件，只需要两条命令：
git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene && pnpm install装完依赖后，在仓库根目录启动扩展：
pnpm dev（扩展依赖 pnpm，Node 需要 20+ 版本。）启动后打开浏览器的扩展管理页，启用开发者模式，选择仓库里的apps/chrome-extension目录加载插件即可。
最后一步是给插件配上"眼睛"——一个多模态大模型。在插件设置里填好 API Key 和模型名称，保存就完事了：
MIDSCENE_MODEL_API_KEY=sk-xxxx MIDSCENE_MODEL_BASE_URL=https://你的模型服务地址 MIDSCENE_MODEL_NAME=模型名称云端模型和开源模型都支持，怎么挑可以看官方文档里的模型配置说明。
第一条指令：在招聘网站上搜岗位
装好插件后随便打开一个网页，进侧边栏输入第一句人话。侧边栏有三个模式：Action（执行操作）、Query（提取数据）、Assert（检查界面），第一次用 Action 最直观。
比如在招聘网站的搜索页，输入：
找到顶部搜索框，输入"后端开发"，选择"北京"，按回车查看结果
点 Run 之后，它会自己截屏、定位搜索框、输入城市、回车跳转，全程你不用碰鼠标。接着切到 Query 模式，再发一句：
提取列表里的前五个职位，字段是 {公司名称: string, 月薪范围: string, 工作年限: string}[]
结果会按你给的字段结构返回，直接复制走就能用。
把场景换成订餐 App 网页版也一样，比如"打开川菜馆的菜单，按评分从低到高排序，告诉我最便宜的一道菜"。你会发现写指令就是在"给实习生交代活"，说得越具体，它干得越利索。
插件之外：手机、电脑桌面也能指挥
浏览器只是入口之一。MidScene.js 给每个平台都配了 Playground：
- Android：手机连上电脑（开 USB 调试），用
pnpm dev:android之类的方式拉起安卓 Playground，屏幕上实时投屏，指令照样用自然语言写 - iOS：连上 iPhone 或模拟器，跑 iOS Playground，流程同上
- 桌面端：Windows、macOS、Linux 都有对应的桌面自动化能力
关键点是跨端操作是同一套逻辑：你在网页上写的"打开设置，检查系统版本"，换到安卓上基本原样能用。下面两张图分别是安卓和 iOS Playground 在执行这条指令时的画面——左边是它拆解出的每一步，右边是设备实时画面。
它到底怎么工作：看截图，不读代码
把原理讲透，其实就一句话：每一步都是"拍照、想清楚、动手"的循环。
- 先对当前界面截图
- 把截图交给视觉模型，让它回答"要完成这句话，下一步点哪儿、输什么"
- 执行点击、输入、滚动
- 再截一张图确认结果，不对就重试
好处很直接：它不依赖 DOM 结构，所以画布渲染的内容、跨域 iframe 里的按钮、纯图标控件都不在话下。坏处是每一步都要过一遍模型，所以指令拆得越碎，跑得越慢，费用也越高——这也是官方鼓励你把整段流程写成一句话、让它自己规划的原因。
跑完之后你会拿到一份交互式 HTML 报告：每一步的截图、模型当时的判断、执行结果都摊开给你看，还能导出成视频回放，排查"它为什么点错"特别方便。
这几类活儿，交给它最划算
挑几个高频场景，你看看有没有自己的日常：
- 日常信息收集：每天追某个商品价格、抓招聘列表、汇总竞品动态，一句 Query 指令顶掉半小时复制粘贴
- 批量重复操作：给一批客户填表单、在后台逐条改配置，流程固定但手点累
- 界面回归验证：改版上线后，用 Assert 模式检查"报错提示有没有出现在邮箱输入框下方"这种预期，不用写断言代码
- 跨端一致性：同一个流程在网页、手机、桌面上各跑一遍，报告摆在一起对比
官方文档里的案例展示里还有更多真实演示，包括在 iOS 上自动点单咖啡。
你可能想问的
需要会编程吗？不需要。装插件、配模型、打字，这三步就是全部门槛。写脚本是进阶玩法，不是入场券。
数据安全吗？走云端 API 时，页面截图会发到模型服务方；想彻底私有化，可以本地部署开源模型，数据不出自己机器。
支持哪些浏览器？插件主要面向 Chrome；其他浏览器可以通过 Playwright、Puppeteer 集成方案接入，细节在 Playwright 集成指南 里。
快不快？单步动作一般几秒到十几秒，取决于模型响应速度和指令被拆成多少步。重复跑同一流程可以开启缓存机制压住成本，官方 FAQ 里有更多细节。
下一步
别光看：花十分钟把插件装上，挑一个你天天打开的网站，用一句话让它跑起来。玩顺了再去读一遍 基本概念文档，把试过的指令改写成 Playwright 测试脚本，从"尝鲜"变成"能复用"，这一步走通了，后面就顺了。
【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
