企业官网建设流程全解析

Midscene.js 快速上手：从 git clone 到自然语言驱动浏览器自动化

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

Midscene.js 是一个面向 E2E 测试的开源 GUI Agent（看屏幕并动手操作界面的 AI 代理）：你用自然语言描述操作，它截屏看懂画面后驱动浏览器点击、输入。本文带你从克隆仓库到第一条自动化跑通。

Midscene 能替你做哪件事

这节先回答：「自然语言」背后到底是什么。

• aiAct：描述一段操作，如"搜索耳机，再过滤到 100 元以下"，Midscene 自行拆解执行
• aiAssert：目视检查界面，如"错误提示显示在邮箱输入框下方"
• aiQuery：提取结构化数据，字段类型由你声明

它不依赖元素选择器：纯图标按钮、canvas 画布里的内容，只要"看得见"就能定位；同一套 API 还能驱动 Android、iOS 和桌面端。

动手前花 1 分钟确认环境

这步最容易卡住，先确认三件事。

• Node.js：node -v查看版本，需 20.19+/22.12+/24+
• pnpm：仓库是 monorepo（多包代码仓库），用 pnpm 9.3+ 管理依赖，执行corepack enable即可启用
• 模型 API Key：Midscene 靠视觉模型"看懂"屏幕，支持 Qwen、GLM、豆包、UI-TARS 等，也能自托管

从克隆到跑通最短路径

这节只走最短路径。

1. 克隆并安装依赖：

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

首次安装会构建全部包，多等几分钟。

2. 在运行目录创建.env配置模型（dotenv 约定，不加export）：

MIDSCENE_MODEL_BASE_URL="你的模型服务地址/v1" MIDSCENE_MODEL_API_KEY="你的 API Key" MIDSCENE_MODEL_NAME="模型名" MIDSCENE_MODEL_FAMILY="模型系列"

3. 把 YAML 自动化脚本存为bing-search.yaml：

page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 "今日天气"

终端执行midscene bing-search.yaml，Midscene 解析 YAML 后驱动浏览器完成搜索，并生成一份记录每步截图与 AI 决策的报告。

跑通之后可以折腾什么

这节给三个方向。

• Chrome 扩展 Playground：不写代码，在浏览器侧边栏输指令验证效果
• 跨平台：同一套 Agent API 换 Android、iOS、桌面
• @midscene/test（Beta）：YAML 写流程，API 封装成可复用 Node

核心调度逻辑在 packages/core/src/，Playwright 集成在 packages/web-integration/。

常见卡点速查

遇到报错先来这里对一下，别慌。

把示例 YAML 换成你自己页面的一个流程，跑一遍，看 AI 能不能把它做对。

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