# 工作流程

纯视觉网页自动化的标准工作流程和交互规则。

---

## 工作流程概览

### 1. 视觉理解阶段
当接到任务时：
1. **🔄 移动端 H5 页面必须刷新**：如果使用移动端模式打开 H5 页面，**必须先执行 `refresh()` 刷新页面**，然后再进行后续操作
2. 使用 `screenshot_with_grid()` 截图以查看坐标参考
3. 分析视觉布局，识别可交互元素
4. 通过视觉外观定位目标元素（按钮、输入框、链接等）
5. 估算每个目标元素**中心**的像素坐标

### 2. 交互阶段
对于每一步：
1. 决定朝目标前进的**最佳单一操作**
2. 使用精确坐标执行相应的方法
3. 短暂等待页面更新（内置延迟）
4. 截取新的截图以验证结果

### 3. 坐标选择规则
- **始终瞄准中心**：可点击元素（按钮、链接、输入框）的中心
- 避免边缘、边框或空白区域
- 对于文本输入：点击中心，然后使用 `click_and_type()` 或 `type_text()`
- **对于按钮/链接：必须使用 JavaScript 方式点击** ⚠️
  ```python
  # ✅ 正确方式
  browser.driver.execute_script(
      "const el=document.elementFromPoint(arguments[0], arguments[1]); if(el){el.click();}",
      x, y
  )

  # ❌ 错误方式
  browser.click(x, y)  # 不要使用
  ```
- 如果不确定，使用 `screenshot_with_grid()` 查看坐标标签

### 4. 任务完成
- 当目标达成时，报告："✅ 任务完成：[简要摘要]"
- 如果被阻止或无法完成，报告："❌ 任务失败：[原因]"

---

## 示例工作流

### 任务 1：在移动端 H5 活动页面点击按钮

```
步骤 1: goto("https://activity.example.com/h5/index.html")
步骤 2: refresh() → 🔄 必须先刷新 H5 页面
步骤 3: screenshot_with_grid(cols=8, rows=16) → 查看移动端布局和按钮位置
步骤 4: 使用 JavaScript 点击目标按钮 ⚠️
       browser.driver.execute_script(
           "const el=document.elementFromPoint(arguments[0], arguments[1]); if(el){el.click();}",
           195, 520
       )
步骤 5: screenshot_base64() → 验证按钮点击效果
✅ 任务完成：成功点击 H5 页面按钮
```

### 任务 2：在百度搜索 "hello world"

```
步骤 1: goto("https://www.baidu.com")
步骤 2: screenshot_with_grid() → 看到搜索输入框在 ~(640, 350)
步骤 3: click_and_type(640, 350, "hello world")
步骤 4: screenshot_base64() → 验证文本已输入
步骤 5: press_key("enter")
步骤 6: screenshot_base64() → 验证搜索结果已加载
✅ 任务完成：成功在百度搜索 "hello world"
```

---

## 成功技巧

1. **首先使用网格截图**以理解坐标空间
2. **每次操作后验证**使用新截图
3. **点击中心，不要点边缘**针对按钮和输入框
4. **滚动显示**屏幕外元素后再点击
5. **清晰报告**完成或阻塞时
6. **保持操作简单** - 每轮一个明确的操作

---

[← 返回主文档](../SKILL.md)