企业官网建设流程全解析

MidScene.js自然语言浏览器自动化快速入门指南

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

每天花40分钟在三个电商网站间复制商品价格，还要手动核对？MidScene.js 是一款 AI 驱动的浏览器自动化工具，你说一句"点搜索按钮"，它就替你打开浏览器真的去做。

图：MidScene.js 的 Playground 界面，左侧输入自然语言指令，浏览器实时执行并展示结果

它解决了什么问题

它就像一位"随叫随到的数字助手"：你给它一张网页截图和一句话，它自己找到按钮、输入框并操作。适合三类人：

• 想做 UI 测试、又不想维护选择器的测试工程师
• 要跑数据采集、重复填表等流程的业务人员
• 想快速验证自动化方案的开发者

核心能力拆解

自然语言指令替代选择器代码

传统工具靠"选择器"（CSS 定位串）找元素，页面一改就失效。MidScene.js 直接用截图定位：

💡 一条指令示例（等价于"打开电商网站，在搜索框输入'无线耳机'并回车"）：

await agent.aiAct('在搜索框输入 无线耳机，然后点击搜索按钮')

视觉驱动：不看 DOM，只看画面

DOM（网页的底层标签树）对图标按钮、<canvas>画布、跨域 iframe 常常"看不见"。MidScene.js 只分析截图，人能看到的它就能点到，还能断言"页面看起来对不对"，而不只是"节点存不存在"。

一套 API 跨平台运行

同一批方法（aiAct执行操作、aiQuery提取数据、aiAssert断言检查）可驱动 Web、Android、iOS、HarmonyOS 和桌面端，写一份脚本换个平台头就能跑。

动手实践

场景一：在 Chrome 扩展中运行第一条自然语言指令

目标：让浏览器自动完成一次点击或数据提取。

步骤：

1. 安装 MidScene.js 的 Chrome 扩展，打开浏览器侧边栏
2. 在扩展设置中填入多模态模型的 API 配置
3. 打开任意网页，在侧边栏输入符合当前页面的指令
4. 点击运行，观察执行过程

示例指令：

• 操作类（aiAct）：点击右上角的登录按钮
• 数据类（aiQuery）：页面中的商品，{name: string, price: number}[]
• 检查类（aiAssert）：页面顶部显示导航栏

验证方式：✅ 页面完成点击或返回结构化 JSON，侧边栏可回看每一步的截图和轨迹。

图：MidScene.js Chrome 扩展侧边栏，输入自然语言指令即可在当前网页执行

场景二：用 YAML 脚本批量执行自动化任务

目标：用一个脚本文件驱动浏览器完成"搜索 + 断言"，一条命令跑完。

步骤：

1. 全局安装命令行工具：npm i -g @midscene/cli
2. 在运行目录创建.env，配置MIDSCENE_MODEL_NAME、MIDSCENE_MODEL_API_KEY等模型变量
3. 新建bing-search.yaml，内容如下
4. 执行midscene ./bing-search.yaml

page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 "今日天气" - aiAssert: 结果显示天气信息

验证方式：✅ 命令行实时输出执行进度，结束后生成可视化报告，可回看每步截图。

场景三：电商价格每日巡检（真实业务）

目标：每天定时巡检多个商品页，提取价格变化。

步骤：

1. 在 YAML 里写多个 task，每个 task 负责一个商品页
2. 用ai步骤打开页面、展开价格区域
3. 用aiQuery按{name: string, price: number}[]提取结构化价格
4. 交给系统定时任务（cron / 任务计划程序）每天执行

示例指令：依次访问京东、天猫的商品页，提取名称和当前价格

验证方式：检查提取出的 JSON 是否齐全，报告文件中保留每一步截图，价格异常时一眼可查。

⚠️ 提示：对反爬较严的站点，请在 flow 中用sleep留出合理间隔，避免触发限制。

快速上手

环境要求：Node.js20.19+/22.12+/24+，pnpm9.3+，另需一个具备 UI 定位能力的多模态模型 API Key。

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

构建完成后，从apps/chrome-extension目录加载扩展（chrome://extensions/开启开发者模式，点"加载已解压的扩展程序"），填入模型配置即可运行第一条指令；也可以直接npm i -g @midscene/cli用命令行跑 YAML 脚本，两条路径任选其一。

进阶玩法与避坑

• 🔧桥接模式：本地脚本与已打开的浏览器实时通信，改一行配置就能对当前标签页下指令，详见 bridge-mode.mdx
• 接入 Playwright 测试套件：把验证过的自然语言指令转成 Agent API，写进现有 E2E 用例，见 integrate-with-playwright.mdx
• YAML 进阶：支持aiWaitFor、sleep、变量插值，完整格式见 automate-with-scripts-in-yaml.mdx

疑问：需要显卡很强的电脑才能跑吗？ ——事实：本地只做截图和浏览器控制，推理由远端模型 API 完成，普通电脑即可。

疑问：页面一改版脚本就废了吗？ ——事实：定位基于截图而非选择器，视觉可识别就不受 CSS 类名、DOM 结构调整影响，维护量明显更少。

疑问：提示Cannot access a chrome-extension:// URL of different extension怎么办？ ——事实：通常是其他扩展冲突，按开发者工具里该 URL 的扩展 ID 到chrome://extensions/禁用它，刷新页面重试。

图：MidScene.js 桥接模式，本地脚本与浏览器建立连接后可实时下发指令

资源导航

• 快速开始（中文文档）
• YAML 脚本运行器文档
• 官方示例 YAML 脚本
• API 参考（reference 目录）
• 贡献指南

结语

MidScene.js 把"写脚本"变成了"说句话"，让浏览器自动化从工程师的专属工具变成人人可用的日常助手。职场人士可以从 Chrome 扩展开始，今天就跑通第一条指令；开发者不妨把 Playwright 套件接上，把维护选择器的时间省下来。克隆仓库，五分钟见分晓。

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