这是 Midscene.js / AI自动化测试 的核心操作面板，我给你按模块拆解得明明白白，你一看就懂：

---

一、顶部的 Act / Tap / Query / Assert 是什么？

这是自动化测试的四大核心阶段，你写的每一条测试指令，都对应这几个步骤：

按钮	含义	场景举例
Act	执行操作（Action）	模拟点击、输入、滚动、拖拽，和你现在选中的状态对应
Tap	轻触/点击（简化版操作）	快速点击按钮，是Act的快捷版，适合简单的点击场景
Query	查询/提取数据	从页面上获取文本、数字、状态，比如读取表格里的数值
Assert	断言/校验结果	验证“操作后的结果是否符合预期”，比如“提交后是否显示成功提示”

---

二、左边面板：Interaction APIs（交互操作API）

这些都是用来模拟你在页面上的手动操作，和你用鼠标/键盘做的事完全对应：

• Double Click：双击元素（比如双击文件夹打开）
• Hover：鼠标悬停（比如悬停显示下拉菜单）
• Input：输入文本（比如在搜索框、表单里打字）
• Right Click：鼠标右键点击（弹出右键菜单）
• Keyboard Press：键盘按键（比如按Enter提交、按Ctrl+C复制）
• Scroll：滚动页面（比如下拉加载更多、滚动到页面底部）

下面的 Data Extraction APIs 是用来从页面上提取数据的：

• Boolean：获取布尔值（比如“按钮是否已禁用”“复选框是否勾选”）
• Number：获取数字（比如订单金额、列表条数）
• String：获取文本（比如页面标题、提示信息）
• Ask：AI辅助问答（让AI帮你理解页面状态，比如“当前页面有没有报错”）

---

三、右边面板：Validation & 设备操作API

这部分是验证等待 + 特殊场景操作，用来处理复杂交互和页面状态：

• Wait For：等待元素出现（比如等待加载动画消失、等待按钮可点击）
• Cursor Move：鼠标移动轨迹（模拟真实用户的鼠标移动，不是瞬间瞬移）
• Drag And Drop：拖拽操作（比如拖拽文件上传、拖拽滑块调整）
• Long Press：长按（移动端场景常用，比如长按弹出菜单）
• Pinch：双指缩放（移动端/图片预览场景）
• Clear Input：清空输入框内容（比如重置表单）
• Navigate：页面跳转（打开新链接、跳转到指定页面）
• Reload：刷新页面
• Go Back：返回上一页
• Sleep：强制等待（固定时间暂停，比如等待3秒加载完成）

---

一句话总结

这就是一套**“模拟人工操作 + 验证结果”的自动化工具**：
你用 Act/Tap 做点击输入、用 Query 拿数据、用 Assert 校验结果，配合 Wait/Sleep 处理页面加载，就能自动完成所有重复性的测试步骤了。

如果你正在用Midscene.js写脚本，我可以帮你把这些API翻译成你能直接用的指令，需要吗？

这是 Midscene.js 的侧边菜单，三个选项分别对应不同的自动化测试模式，我给你拆解得清清楚楚：

---

1. Playground（当前选中）

直译是「沙盒/试验场」，这是 Midscene 的核心调试模式。

• 作用：你可以在这里直接写指令、运行自动化脚本，实时看到AI执行的结果，用来调试你的测试用例。
• 场景：你平时写、改、跑脚本，基本都是在这个模式里。

---

2. Recorder (Preview)

直译是「录制器（预览版）」，这是 Midscene 的无代码录制模式。

• 作用：你只需要手动在页面上点一点、输一输，工具会自动把你的操作录下来，直接生成对应的自动化脚本指令，不用自己写代码。
• 场景：适合快速搭建流程、或者不熟悉指令语法的新手，录完就能直接用。

---

3. Bridge Mode

直译是「桥接模式」，这是 Midscene 的扩展连接模式。

• 作用：用来把 Midscene 和其他工具（比如本地的 Playwright/ Puppeteer 脚本、IDE 编辑器、第三方自动化框架）连接起来，让 Midscene 作为“大脑”去控制其他环境。
• 场景：适合已经有现有自动化脚本、想接入 AI 能力的进阶用户，用来打通不同的测试环境。

---

一句话帮你分清用法：

• 日常写脚本、调试 → 用 Playground
• 不想写代码、快速录流程 → 用 Recorder
• 要和其他自动化工具联动 → 用 Bridge Mode

你现在是在调试 Midscene 脚本吗？我可以帮你看看怎么用 Recorder 快速生成你的测试流程。

我帮你把这个界面拆成几个部分，讲清楚每一块的意思：

---

1. 底部红框里的文字说明

The format is KEY=VALUE and separated by new lines.
These data will be saved locally in your browser.

• 格式要求：你要输入的内容，必须是 键=值 的格式，每行写一组，比如：

  API_KEY=sk-xxxxxxx
  BASE_URL=https://api.example.com
  MODEL_NAME=gpt-4
  

• 存储说明：这些配置数据只会保存在你当前浏览器里，不会上传到服务器，关闭页面后也不会丢失。

---

2. 两个按钮

• Save and Verify Model：保存并验证模型。保存配置后，自动测试API是否能正常连接、模型是否可用。
• Save：仅保存配置，不做验证，适合先保存再手动测试的场景。

---

3. 右上角的三个图标

从左到右分别是：

1. 用户头像：个人中心/账户信息
2. 问号图标：帮助/文档入口
3. 齿轮图标：设置入口，也就是你当前打开的配置弹窗，用来填写API Key、模型地址等信息。

---

一句话总结

这是一个AI模型配置弹窗，用来填写API Key、模型地址等信息，格式要求是 KEY=VALUE 每行一组，数据只保存在本地浏览器，保存后可以直接验证模型是否可用。

你是在配置Midscene.js的AI模型吗？如果需要，我可以给你一份标准的配置模板，你直接照着填就行。