Midscene 浏览器自动化3步用自然语言控制Chrome不写一行脚本【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene 是一个开源的 GUI Agentmidscene/web等包加测试套件核心能力是零代码浏览器自动化你安装它的 Chrome 扩展用自然语言描述操作意图它就靠视觉模型看懂当前页面并替你点击、输入、提取数据全程无需编写任何脚本。原理篇它凭什么不用选择器也能操作页面传统自动化工具的定位逻辑是先写选择器再找元素CSS 选择器、XPath、test id 都要人手写页面一改版就大面积失效。Midscene 走的是另一条路——用多模态模型直接看截图。具体执行分四步截图 → 模型识别界面布局、理解你这句话的目标 → 定位目标控件的位置并执行点击/输入/滚动 → 生成 HTML 报告留档每一步的截图与 AI 决策过程。因为判断依据是长什么样而不是DOM 标签是什么所以只带图标的按钮、自绘控件、canvas里的内容、跨域 iframe 内的元素它都能定位你不需要给页面加任何语义化标注。另外截图驱动也意味着发给模型的是一大张图而不是整棵 DOM 树官方 AppControlBench 报告里60 个任务用 Doubao Seed 2.1 Turbo 总共花了 0.59 美元模型费用单任务成本很低。同一套 Agent APIaiAct执行流程、aiQuery提取结构化数据、aiAssert断言界面状态还覆盖 Android、iOS、HarmonyOS 和桌面端写一次习惯跨端通用。实操篇一个提取商品数据任务从输入到拿结果下面以从商品页批量提取商品名和价格为主线走一遍完整流程。你做了什么打开任意商品列表页在右侧 Midscene 侧边栏输入一句自然语言指令页面上的商品{name: string, price: number}[]工具怎么执行Midscene 截取当前页面交给视觉模型解析逐项识别商品名与价格的位置组装成结构化数据返回。你不需要关心商品卡片是 div 还是 table也不需要写任何解析代码。结果如何侧边栏返回一个商品数组JSON同时生成 HTML 报告里面能看到这次调用的截图、元素定位框和模型推理过程执行细节可回溯。想把这类动作固化成长期跑的流程用 YAML 脚本即可。仓库里的示例脚本midscene_scripts 目录覆盖了登录、数据提取、断言的组合web: url: https://www.saucedemo.com/ output: ./midscene_output/sauce-demo-items.json tasks: - name: login flow: - aiAct: type standard_user in user name input, type secret_sauce in password, click Login - aiWaitFor: there are products displayed on the page - name: extract items info flow: - aiQuery: {name: string, price: number}[] name: items - aiAssert: The price of Sauce Labs Fleece Jacket is 49.99一个文件里把登录 → 等商品加载 → 提取数据 → 断言价格串完output字段直接声明 JSON 落盘路径断言失败会体现在报告里。完整字段说明见 YAML 脚本文档。能力地图哪些活适合交给它哪些不必适合交给 Midscene没必要用它控件没有稳定选择器图标按钮、canvas 绘制内容、跨域 iframe 内元素高频、毫秒级精确定时的交互传统脚本更快更省快速验证 UI 流程登录、表单提交、结果可见性已有成熟 Playwright 选择器的存量项目除非想减少维护跨端统一 APIWeb / Android / iOS / HarmonyOS / 桌面大批量并发采集AI 视觉调用有成本纯脚本更划算需要复用你已登录的 Chrome 会话Bridge 模式简单字段抓取直接读接口或 DOM 更直接Bridge 模式值得单独说一句它让你的本地脚本去控制桌面版 Chrome而不是新开一个自动化浏览器。这意味着 cookies、登录态、插件全部保留脚本和人工操作共用同一个浏览器实例官方文档称之为man-in-the-loop。连接时扩展会弹确认框你可以点一次Allow或Always Allow默认监听127.0.0.1的 3766 端口跨机器访问需要显式开启。界面见下图落地步骤从零到跑通第一个任务第 1 步配置模型。准备一个带 UI 定位能力的多模态模型官方支持 Qwen3.x、Doubao-Seed、GLM-4.6V、Gemini、UI-TARS 等含可自部署的开源模型记录四个变量MIDSCENE_MODEL_BASE_URL、MIDSCENE_MODEL_API_KEY、MIDSCENE_MODEL_NAME、MIDSCENE_MODEL_FAMILY。第 2 步装 Chrome 扩展。优先从 Chrome Web Store 安装无法访问商店时可从 GitHub Releases 下载安装包手动安装手动安装不自动更新。第 3 步粘贴模型配置。打开扩展侧边栏的设置图标把第 1 步的完整配置粘进去保存。第 4 步试跑。打开任意网页在侧边栏输入自然语言指令并运行若要走脚本路线则全局安装 CLI需要 Node 20.19后一行命令执行npm i -g midscene/cli midscene ./bing-search.yamlCLI 会打印执行进度跑完后自动生成可视化报告无需额外配置。FAQ三个最高频的问题Q1模型参数应该配在浏览器还是终端里普通扩展用法配在浏览器侧边栏里Bridge 模式下脚本跑在 Node.js 侧模型参数必须配在终端环境里。Q2报Cannot access a chrome-extension:// URL of different extension怎么办这通常是另一个扩展向页面注入了 iframe 或 script。在开发者工具里找到该chrome-extension://开头的标签记下扩展 ID到chrome://extensions/禁用它刷新页面重试。Q3用 Ollama 本地模型报 403设置环境变量OLLAMA_ORIGINS*允许 Chrome 扩展访问本地 Ollama 服务。Q4Bridge 模式连接不上先在扩展的确认弹窗点Allow确认扩展与脚本在同一台机器默认只监听127.0.0.1跨机器才需要配置远程地址。写在最后Midscene 解决的问题可以压缩成一句让看懂屏幕这件事由视觉模型代劳你只负责说清楚要什么。它适合的场景是——选择器写不动的页面、快速验证 UI 流程、以及一套 API 打通 Web 和移动端。建议先从一个搜索或表单类小任务试起在 Chrome 扩展侧边栏验证指令稳定后再把它固化成 YAML 脚本用 CLI 跑起来成本可控、随时可回看报告。更多细节可查 快速开始文档、Bridge 模式文档与 核心源码。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考