企业官网建设流程全解析

Midscene 浏览器自动化：3步用自然语言控制Chrome，不写一行脚本

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

Midscene 是一个开源的 GUI Agent（@midscene/web等包）加测试套件，核心能力是零代码浏览器自动化：你安装它的 Chrome 扩展，用自然语言描述操作意图，它就靠视觉模型"看懂"当前页面并替你点击、输入、提取数据，全程无需编写任何脚本。

原理篇：它凭什么不用选择器也能操作页面

传统自动化工具的定位逻辑是"先写选择器，再找元素"：CSS 选择器、XPath、test id 都要人手写，页面一改版就大面积失效。Midscene 走的是另一条路——用多模态模型直接看截图。

具体执行分四步：截图 → 模型识别界面布局、理解你这句话的目标 → 定位目标控件的位置并执行点击/输入/滚动 → 生成 HTML 报告，留档每一步的截图与 AI 决策过程。

因为判断依据是"长什么样"而不是"DOM 标签是什么"，所以只带图标的按钮、自绘控件、<canvas>里的内容、跨域 iframe 内的元素，它都能定位，你不需要给页面加任何语义化标注。另外，截图驱动也意味着发给模型的是一大张图而不是整棵 DOM 树，官方 AppControlBench 报告里，60 个任务用 Doubao Seed 2.1 Turbo 总共花了 0.59 美元模型费用，单任务成本很低。

同一套 Agent API（aiAct执行流程、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 脚本文档。

能力地图：哪些活适合交给它，哪些不必

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.yaml

CLI 会打印执行进度，跑完后自动生成可视化报告，无需额外配置。

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 服务。

Q4：Bridge 模式连接不上？先在扩展的确认弹窗点"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