企业官网建设流程全解析

Midscene 零代码浏览器自动化教程：5 分钟跑通第一条自然语言指令

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

Midscene 是一款用 AI 驱动 GUI 自动化的开源工具：你用一句自然语言描述要做什么，它通过视觉识别界面上的元素，替你在浏览器、手机上完成操作——不用写 CSS 选择器，不用配测试框架。这篇按你上手的时间线走：第 5 分钟装好 Chrome 扩展，第 1 小时学会三类指令，第 1 天让终端直接接管浏览器，后面讲长期使用的省钱细节和常见坑。

第 5 分钟：装好 Chrome 扩展，让浏览器听你指挥

上手的最快入口是 Chrome 扩展，相当于一个装在浏览器里的 Playground，打开任意网页就能直接输入中文指令。

四条命令搞定构建：

git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene/apps/chrome-extension pnpm install pnpm run build

构建完在 Chrome 打开chrome://extensions/，开启开发者模式，点"加载已解压的扩展程序"，选中扩展目录下的dist文件夹。装好后打开任意网页，Midscene 侧边栏会出现在右侧，把 AI 模型配置粘贴进设置页保存即可。模型配置就是一组环境变量，比如：

export MIDSCENE_MODEL_API_KEY="your-api-key" export MIDSCENE_MODEL_NAME="你的模型名"

然后在输入框里打一句"点击登录按钮"，回车，浏览器自己会找到按钮并点下去。

扩展源码在这个 monorepo 里，想改交互或打包逻辑可以直接翻。

第 1 小时：记牢三类指令，把"体验"变成"干活"

装完扩展别急着玩花活，先把三种最基础的指令形式跑熟，它们对应所有后续能力的地基：

• 让它动手（aiAct）："搜索耳机，把第一件商品加入购物车，确认购物车数量变成 1"——多步操作它自己规划。
• 让它交数据（aiQuery）："页面中的商品，{name: string, price: number}[]"——返回结构化 JSON，抓价格、抓评论就靠它。
• 让它验收（aiAssert）："页面顶部显示导航栏"——一句话断言，失败了立刻报错。

Playground 里验证过指令没问题后，同样的流程可以直接落成 YAML 脚本，一条命令跑完，适合放进定时任务或 CI：

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

midscene ./bing-search.yaml

YAML 脚本的完整字段可以查 YAML 脚本文档，这里只需要记住page定目标、tasks定步骤就够了。

第 1 天：Bridge 模式，把终端和真实浏览器接通

前两天的玩法都绕不开一个痛点：无头浏览器没有你的登录态。Bridge 模式就是解这个的——你桌面 Chrome 里已经登录好账号、带着全部 cookies 和插件，本地跑一段脚本就能直接接管它。

在扩展面板开启 Bridge Mode 后，图标出现黄点（监听中）；终端里写：

import { AgentOverChromeBridge } from "@midscene/web/bridge-mode"; const agent = new AgentOverChromeBridge(); await agent.connectNewTabWithUrl("https://www.bing.com"); await agent.ai('type "Midscene.js" and hit Enter');

扩展会弹确认窗口，点 Allow 后，Chrome 就打开新标签页交给脚本控制，连接成功后图标变绿点。YAML 脚本里加一行bridgeMode: currentTab也能让脚本接管当前标签页。

这个模式的价值在于"人在回路"：脚本跑自动化，你同时在旁边手动补登录、点验证，两边互不干扰，特别适合写脚本时边写边看效果。

想做得更多：手机和桌面也在同一套指令下

浏览器之外，Midscene 对 Android、iOS、HarmonyOS 和桌面端是同一套自然语言接口。以 Android 为例，连上设备（adb 配置好、开启 USB 调试）后，Playground 会显示实时屏幕预览，指令还是那三类："打开设置，把亮度调到最大"、"获取当前应用名称"。

移动端常见的坑提前说：连不上设备九成是 adb 没配对或 USB 调试没开，重启设备重连一次；操作没反应先看屏幕预览是否卡住，多半是 scrcpy 预览链路的问题。

长期用：缓存、报告和三个省钱细节

缓存：同一个指令在相似的页面反复执行时，Midscene 会复用之前缓存的规划结果和元素定位，官方案例里执行耗时从 51 秒降到 28 秒，缓存文件在./midscene_run/cache下。缓存失效时自动回退到重新规划，不会卡死。

报告：每次运行都会生成 HTML 报告，每步操作带截图、耗时和状态，失败时能直接看到卡在哪一帧；v1.7.0 起还支持把报告转录成 Markdown，方便塞进其他工具链。

三个省钱习惯：指令写具体（"点击红色的购买按钮"比"买它"稳）；页面没加载完别急着下发指令；查询类操作（aiQuery/aiAssert）不参与缓存，重复取数时考虑把流程拆开设计。

更多参数和平台细节都在 官方中文文档 里，按平台分了 Android、iOS、桌面几个小节，遇到问题基本都能找到对应条目。

挑一个你今天会重复三次的浏览器操作——比如每天早上打开后台看一遍数据——把它写成一句 Midscene 指令，从手动 5 分钟变成一条命令的事。

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