用一句自然语言让浏览器替你干活：MidScene.js 上手记

用一句自然语言让浏览器替你干活MidScene.js 上手记【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidScene.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扩展依赖 pnpmNode 需要 20 版本。启动后打开浏览器的扩展管理页启用开发者模式选择仓库里的apps/chrome-extension目录加载插件即可。最后一步是给插件配上眼睛——一个多模态大模型。在插件设置里填好 API Key 和模型名称保存就完事了MIDSCENE_MODEL_API_KEYsk-xxxx MIDSCENE_MODEL_BASE_URLhttps://你的模型服务地址 MIDSCENE_MODEL_NAME模型名称云端模型和开源模型都支持怎么挑可以看官方文档里的模型配置说明。第一条指令在招聘网站上搜岗位装好插件后随便打开一个网页进侧边栏输入第一句人话。侧边栏有三个模式Action执行操作、Query提取数据、Assert检查界面第一次用 Action 最直观。比如在招聘网站的搜索页输入找到顶部搜索框输入后端开发选择北京按回车查看结果点 Run 之后它会自己截屏、定位搜索框、输入城市、回车跳转全程你不用碰鼠标。接着切到 Query 模式再发一句提取列表里的前五个职位字段是 {公司名称: string, 月薪范围: string, 工作年限: string}[]结果会按你给的字段结构返回直接复制走就能用。把场景换成订餐 App 网页版也一样比如打开川菜馆的菜单按评分从低到高排序告诉我最便宜的一道菜。你会发现写指令就是在给实习生交代活说得越具体它干得越利索。插件之外手机、电脑桌面也能指挥浏览器只是入口之一。MidScene.js 给每个平台都配了 PlaygroundAndroid手机连上电脑开 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），仅供参考