企业官网建设流程全解析

Midscene.js 快速上手：10 分钟让 AI 自动点击你的页面和手机

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

Midscene.js 是一个 GUI Agent 驱动的 E2E 测试框架：你用自然语言说"点什么、查什么"，它截图看懂页面后自己点击、输入并验证结果。跟着做完本文，你会跑通模型配置、在浏览器里发出第一条自动化指令，并把同样的能力接到桌面 Chrome 和 Android 真机上，每步都有可回放报告。

先跑起来：4 步发出第一条 AI 指令

✅ 最短路径，全程不用 clone 仓库：

1. 配模型：设置 4 个环境变量，指向一个能看懂 UI 的多模态模型服务。

   export MIDSCENE_MODEL_BASE_URL="https://ark.cn-beijing.volces.com/api/v3" export MIDSCENE_MODEL_API_KEY="your-api-key" export MIDSCENE_MODEL_NAME="doubao-seed-2-1-turbo-260628" export MIDSCENE_MODEL_FAMILY="doubao-seed"

2. 装扩展：在 Chrome 应用商店安装 Midscene 插件，浏览器右侧出现侧边栏。

3. 贴配置：点侧边栏设置图标，把上面 4 个值粘进设置页保存。

4. 发指令：打开任意网页，输入"点击登录按钮"，AI 会理解页面并自动执行。

执行完自动生成 HTML 报告，默认落在midscene_run目录，截图、每步决策和断言结果都能逐步回放。这个侧边栏就是官方 Playground，它和 SDK 共享同一套代码——这里跑通的指令，换成脚本行为完全一致。

换个场景：脚本怎么接管你登录的桌面 Chrome

前置条件：扩展已装好；注意桥接模式的模型配置要写在终端（Node.js 侧），不是浏览器侧。

• 项目里安装@midscene/web和tsx
• 写最小脚本：

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

• 跑npx tsx demo.ts，扩展弹出确认窗，点Allow或Always Allow

预期结果：桌面 Chrome 新开标签页被脚本控制，cookies 和登录态直接复用，aiAct、aiAssert等 API 与浏览器内用法相同——自动化测试里典型的"人在回路"协作。

网页侧跑通后，下一步把目标从屏幕移到手机。

换个场景：Android 真机怎么连给 AI 操作

前置条件：电脑装好 adb，手机在开发者选项里开了 USB 调试（若见"USB 调试（安全设置）"也一并开）。

• adb devices -l出现设备序列号，连接才算成功
• 起 Playground：npx --yes @midscene/android-playground
• 点窗口里的齿轮按钮，贴入 API Key 配置
• 输入"打开浏览器搜索 SU7"，AI 自行规划执行

预期结果：手机上的每次点击、滚动和断言都带截图写进报告，打开报告文件即可逐步回放。之后把同一句指令交给 Android SDK 的AndroidAgent，就能进正式测试脚本。

出问题怎么办：6 个高频故障一行修

统一格式：现象 → 原因 → 解法。

• ⚠️adb devices只显示unauthorized→ 手机没授权 → 手机上点一次"允许 USB 调试"弹窗
• 报Cannot access a chrome-extension:// URL→ 其他扩展注入了 iframe/script 造成冲突 → 开发者工具里复制该扩展 ID，到chrome://extensions禁用它
• 本地 Ollama 报 403 → 来源限制 →export OLLAMA_ORIGINS="*"
• 配了 cache 却没生成文件 → 没配 id → 写cache: { id: "任务名" }；read-only模式还要手动调agent.flushCache()
• 本地命中缓存、CI 全重算 → 缓存目录没进仓库 → 把./midscene_run/cache提交进去
• Azure 上 GPT-5 点击坐标偏移 → 高分辨率截图触发服务端缩放 →screenshotShrinkFactor: 2预先缩小截图

参数速查

以上为通用推荐，按实际环境微调。

下一步去哪

• 平台完整配置：apps/site/docs/zh/platforms/（iOS、HarmonyOS、桌面端）
• 三种缓存策略的取舍：apps/site/docs/zh/caching.mdx
• 模型选择与配置示例：apps/site/docs/zh/model-common-config.mdx
• 报告生成核心逻辑：packages/core/src/report-generator.ts

如果你是 Web 测试先跑起来的需求，从 Chrome 扩展配好模型发一条aiAct开始；如果目标是真机自动化，先把 adb 连接修好再跑一遍 Playground——参数改对没改对，报告里一看便知。

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