#开始使用：Web · Playground · 模型 API Key

本页是在 Web 上使用 Playground、通过模型 API Key 接入模型的配置步骤。如需其他组合，请修改下方的选择，或查看全部配置路径。

第 1 步

#安装 Chrome 插件

1. 从 Chrome Web Store 安装 Midscene：

   

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

如果无法访问 Chrome Web Store，请参阅可以手动安装 Chrome 插件吗？

第 2 步

#配置模型

在下方选择一个模型，它的配置包含四项。点击获取 API Key到服务商创建 API Key，再用它替换 MIDSCENE_MODEL_API_KEY 中的 ......。

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

其他版本与使用说明请参阅豆包 Seed 系列。

各模型的差异请参阅模型选择指南。UI-TARS 等兼容模型请参阅使用模型 API Key。

在 Midscene 侧边栏中点击设置图标，粘贴配置并保存。

第 3 步

#执行操作并验证结果

在当前标签页中打开 TodoMVC，并保持页面可见。

1. 在插件侧边栏中选择 aiAct，输入以下指令并运行：

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

2. 待页面中出现已勾选完成的待办事项后，切换到 aiAssert，输入以下断言并运行：

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

3. 确认断言执行通过，并在结果面板中查看各步骤的截图与执行过程。

4. （可选）切换到 aiQuery，输入以下查询并运行：

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

结果会包含待办事项名称及其完成状态。aiQuery 用于从当前界面提取数据，不会修改页面。

如果执行失败，请先查看失败步骤和错误信息。模型请求报错请参考验证模型连接和常见配置错误；插件访问页面或 Ollama 时出错，请查看 Web 常见问题。

第 4 步

#下一步

• 查看更多案例：案例展示收录了各平台的演示视频和完整执行报告。

• 编写可重复运行的用例：使用相同的平台和模型创建 Midscene Test 项目。用例是 YAML 文件，可以在本地或 CI 中运行。

• 接入 Playwright Test：使用相同的模型，在 Playwright 测试中调用 Midscene。
• 用脚本控制当前浏览器：Chrome Bridge 让 Node.js 脚本控制桌面 Chrome，并复用其中的登录状态和 Cookie。

• 了解 Midscene 的工作方式：基本概念介绍了基于视觉的方案，以及 aiAct、即时操作和洞察类 API 的适用场景。

想尝试其他平台或使用方式？回到顶部修改选择。