#快速体验 GUI Agent

通过 Chrome Extension，你可以在浏览器的 Playground 中体验 GUI Agent，无需搭建测试项目。本指南带你配置模型、执行一条自然语言指令、验证结果并查看执行过程。

如果你要直接编写 YAML 测试，可以前往 Midscene Test。

#配置模型

使用 Chrome Extension 前，需要先准备一个具备 UI 定位能力的多模态模型。如果尚未确定模型或接入方式，请先阅读模型选择指南。

下面以豆包 Seed 2.1 Turbo 为例：

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"

将 your-api-key 替换为你的 API Key。

如需使用千问（Qwen）、GLM、Gemini 或 GPT-5 等其他模型，请参考使用模型 API Key。

全部配置项请参考模型配置。

如果使用 ChatGPT 订阅，请按照使用 ChatGPT 订阅获取完整模型配置，再继续安装扩展。两种接入方式任选一种即可。

安装 Chrome Extension 后，将这组配置粘贴到设置中。

#安装 Chrome Extension

1. 点击下面的按钮，从 Chrome Web Store 安装 Midscene：

   

2. 在 Chrome 的扩展列表中打开 Midscene。浏览器右侧会出现 Midscene 侧边栏。

3. 点击侧边栏中的设置图标，将配置模型中的完整配置粘贴到设置页并保存。

#执行操作并验证结果

打开 TodoMVC 示例页面，保持页面可见，在 Midscene 侧边栏中依次体验下面三类 API。

#1. 执行一个目标（aiAct）

选择 aiAct，输入并运行：

添加一个名为“体验 Midscene”的待办事项，然后将它标记为已完成。

Agent 会观察页面，找到输入框，添加待办事项并勾选它。执行结束后，你应当在页面中看到该事项处于已完成状态。

#2. 检查结果（aiAssert）

选择 aiAssert，输入并运行：

列表中存在名为“体验 Midscene”的待办事项，且它已被标记为完成。

条件成立时断言通过；不成立时，结果中会显示错误及模型返回的原因。

#3. 提取数据（aiQuery，可选）

选择 aiQuery，输入并运行：

列表中可见的待办事项，返回 {name: string, completed: boolean}[]。

结果会包含待办事项名称及其完成状态。你可以看到，同一个界面既能被操作，也能被检查和读取。

#查看执行过程

运行后，在 Playground 的结果区域查看执行步骤和截图，将操作过程与页面的最终状态对照。如果执行失败，先查看失败步骤和错误信息；模型连接问题可参考模型高级配置与调试。

下面是另一段完整示例：用 Chrome Extension 填写 GitHub 注册表单。视频下方的报告链接可以用于体验执行回放。

Prompt：填写 GitHub 注册表单并通过表单校验，但不要提交。

Midscene 会为每次任务生成完整报告，供开发者回溯操作过程。上述 Demo 的报告请参考：report.html

#下一步

• 了解关键 API：阅读基本概念。
• 编写 YAML 测试：通过 Midscene Test 创建项目、运行用例并查看报告。
• 编写 Web 测试：通过接入 Playwright Test，在测试中使用视觉交互与断言。
• 编写移动端和桌面端测试：通过接入 Vitest，组织用例并管理 Agent 生命周期。
• 执行日常自动化流程：阅读编写独立自动化脚本，无需测试运行器即可调用 SDK。
• 让 AI 编程助手操作应用：安装 Midscene Skills。

#常见问题