企业官网建设流程全解析

Midscene.js UI自动化快速上手指南：用自然语言驱动浏览器，免写选择器

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

当你要让浏览器自动完成搜索、等结果、校验页面这套操作时，手写选择器很繁琐。Midscene.js 用多模态模型直接看屏幕，你用一句自然语言描述操作，它替你点击、输入、滚动，还能替你校验结果。

一分钟认知

Midscene.js 的工作分三步：截图、让模型判断该操作哪里、再执行动作；校验同理，像人一样检查屏幕。它解决 UI 测试依赖选择器、DOM 一变就挂的问题。适合写 E2E 用例、自动化网页操作，以及给手机和桌面写脚本。

• 视觉定位：按外观和位置找元素，canvas、纯图标按钮、跨域 iframe 都适用
• 跨平台：同一套 Agent API 覆盖 Web、Android、iOS 和桌面端
• 内置报告：每次执行生成含截图和时间轴的 HTML 报告

🚀 最小上手路径

1. 安装 CLI：终端运行npm i -g @midscene/cli（需 Node.js 20.19 及以上）
2. 配置模型：在工具运行目录新建.env文件，写入 4 个模型变量：

MIDSCENE_MODEL_BASE_URL="https://**你的服务地址**" MIDSCENE_MODEL_API_KEY="**你的APIKey**" MIDSCENE_MODEL_NAME="**你的模型名**" MIDSCENE_MODEL_FAMILY="**你的模型系列**"

把上面加粗的占位值换成服务商的真实配置即可，变量名固定。

3. 编写脚本：同目录新建bing-search.yaml，示例见下一节
4. 运行：执行midscene ./bing-search.yaml，终端显示执行进度
5. 看报告：midscene_run目录生成 HTML 报告，双击打开

🔍 关键能力拆解

用自然语言写操作指令

指令都用自然语言写：aiAct做多步操作、aiTap和aiInput做单步动作、aiAssert做校验、aiQuery提取数据。可先在 Chrome 插件的 Playground 试好措辞，再原样搬进代码，调用形式一一对应：

await agent.aiAct('搜索耳机，筛选100美元以下'); await agent.aiWaitFor('筛选结果已显示'); await agent.aiAssert('商品价格都低于100美元');

三行完成执行、等待、校验。

用 YAML 脚本跑自动化

YAML 分两部分：page声明目标页面，tasks列步骤，每行一条自然语言指令：

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

存成bing-search.yaml即可交给命令行执行。完整字段见 apps/site/docs/zh/automate-with-scripts-in-yaml.mdx，YAML 脚本文档，它列出了全部配置项。

看执行报告

报告生成在midscene_run目录：时间轴、每步截图、AI 决策过程一目了然，失败时能看出模型看到了什么。

🎯 实战场景：自动完成一次搜索校验

输入：上面的bing-search.yaml，打开必应首页、搜索"今日天气"、校验结果含天气信息。

操作：终端运行midscene命令，Midscene 打开浏览器，模型看截图定位搜索框、输入关键词、回车，等 3 秒后截图检查结果页。

结果：终端打印最终状态，midscene_run生成报告，每步动作与断言结果都列清楚；失败时打开报告就能看出问题出在哪一步。

⚠️ 避坑清单

• 运行报Cannot access a chrome-extension:// URL of different extension：其他浏览器插件向页面注入了脚本，与 Midscene 冲突，禁用它并刷新页面
• 点击位置不对或动作超时：.env四个变量与服务商不匹配，或 API Key 错误，对照服务商文档核对后重跑
• 执行慢、花费高：每步都重新截图调模型；给agent加cache配置（id+strategy: read-write），重复操作走缓存

收尾

Midscene.js 把 UI 自动化压缩成两件事：用自然语言描述意图，让模型看懂屏幕并动手。任务规划与执行的核心逻辑在 packages/core/src/agent/，核心源码目录，想弄清模型为什么选某一步，从这里看起。完整流程看 apps/site/docs/zh/quick-start.mdx，官方快速开始文档，从插件安装、配置粘贴到第一条指令都有说明。现在就在一个空目录创建.env和bing-search.yaml，5 分钟跑通第一个自动搜索。

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