浏览器自动化实战
用四层操控模型完成网页数据抓取、表单填写与 AI 智能浏览
本教程将带你体验 Crab Claw 浏览器自动化的四层操控模型——从基础导航到 AI 智能浏览，完成网页数据抓取、表单填写、GIF 录制等实战任务。
前置条件
- Crab Claw 已安装并运行
- 系统安装了 Chrome、Brave 或 Edge 浏览器
- 配置了模型提供商（AI 浏览需要视觉能力模型）
场景一：数据抓取（ARIA Ref 模式）
目标
从 Hacker News 首页抓取前 10 条新闻标题和链接。
操作步骤
在聊天中依次执行：
> 打开 https://news.ycombinator.com> 打开 https://news.ycombinator.com智能体自动调用 navigate，打开页面并返回截图。
> 获取页面上所有可交互元素> 获取页面上所有可交互元素智能体调用 observe，返回 ARIA 树 + ref 标注：
[e1] link "Hacker News"
[e2] link "new"
[e3] link "past"
...
[e10] link "Show HN: My new project" → href="/item?id=12345"
[e11] link "Ask HN: Best practices for..." → href="/item?id=12346"
...[e1] link "Hacker News"
[e2] link "new"
[e3] link "past"
...
[e10] link "Show HN: My new project" → href="/item?id=12345"
[e11] link "Ask HN: Best practices for..." → href="/item?id=12346"
...> 帮我提取前 10 条新闻的标题和链接，输出为 JSON 格式> 帮我提取前 10 条新闻的标题和链接，输出为 JSON 格式智能体调用 get_content 获取页面文本，然后 LLM 解析输出：
[
{ "title": "Show HN: My new project", "url": "https://news.ycombinator.com/item?id=12345" },
{ "title": "Ask HN: Best practices for...", "url": "..." },
...
][
{ "title": "Show HN: My new project", "url": "https://news.ycombinator.com/item?id=12345" },
{ "title": "Ask HN: Best practices for...", "url": "..." },
...
]场景二：表单填写（ARIA Ref + Fill）
目标
自动填写一个注册表单。
> 打开 https://example.com/register
> 获取页面上的所有表单元素> 打开 https://example.com/register
> 获取页面上的所有表单元素智能体返回表单元素的 ref：
[e5] textbox "用户名"
[e6] textbox "邮箱"
[e7] textbox "密码"
[e8] button "注册"[e5] textbox "用户名"
[e6] textbox "邮箱"
[e7] textbox "密码"
[e8] button "注册"> 在用户名框填写 test_user，邮箱填写 test@example.com，密码填写 SecurePass123> 在用户名框填写 test_user，邮箱填写 test@example.com，密码填写 SecurePass123智能体依次调用 fill_ref：
fill_ref e5 "test_user" → ✓ 截图确认
fill_ref e6 "test@example.com" → ✓ 截图确认
fill_ref e7 "SecurePass123" → ✓ 截图确认fill_ref e5 "test_user" → ✓ 截图确认
fill_ref e6 "test@example.com" → ✓ 截图确认
fill_ref e7 "SecurePass123" → ✓ 截图确认> 点击注册按钮> 点击注册按钮click_ref e8 → ✓ 截图显示注册成功页面click_ref e8 → ✓ 截图显示注册成功页面场景三：SOM 视觉定位（复杂页面）
当页面结构复杂、ARIA 标注不准确时，使用 SOM 视觉标注：
> 对当前页面进行 SOM 标注> 对当前页面进行 SOM 标注智能体调用 annotate_som，返回一张标注了数字编号的截图：
- 每个可交互元素都有红色数字标注
- LLM 通过视觉识别选择目标
> 点击编号 7 的按钮> 点击编号 7 的按钮click_ref 7 → ✓ 操作成功click_ref 7 → ✓ 操作成功适用场景：iframe 嵌套、Shadow DOM、动态渲染、Canvas 内元素。
场景四：AI 智能浏览（意图级）
最高级的操控方式——用自然语言描述目标，智能体自主导航完成：
> 帮我在 GitHub 上搜索 "crabclaw" 项目，找到 Star 数最多的仓库，然后截图给我看> 帮我在 GitHub 上搜索 "crabclaw" 项目，找到 Star 数最多的仓库，然后截图给我看智能体自动执行（最多 20 步循环）：
Step 1: navigate → github.com
Step 2: observe → 找到搜索框 [e3]
Step 3: fill_ref e3 "crabclaw" → 输入搜索词
Step 4: click_ref e4 → 点击搜索
Step 5: observe → 分析搜索结果列表
Step 6: click_ref e12 → 点击 Star 数最多的项目
Step 7: screenshot → 截图返回Step 1: navigate → github.com
Step 2: observe → 找到搜索框 [e3]
Step 3: fill_ref e3 "crabclaw" → 输入搜索词
Step 4: click_ref e4 → 点击搜索
Step 5: observe → 分析搜索结果列表
Step 6: click_ref e12 → 点击 Star 数最多的项目
Step 7: screenshot → 截图返回整个过程无需你指定任何选择器或 ref，完全由 AI 自主决策。
场景五：GIF 操作录制
录制操作过程为 GIF 动画：
> 开始录制浏览器操作
> 打开 https://example.com
> 点击登录按钮
> 填写用户名和密码
> 点击提交
> 停止录制> 开始录制浏览器操作
> 打开 https://example.com
> 点击登录按钮
> 填写用户名和密码
> 点击提交
> 停止录制输出：
✓ 已保存 GIF: login_flow.gif (38 帧, 980KB)✓ 已保存 GIF: login_flow.gif (38 帧, 980KB)用途：操作演示、Bug 复现、自动化流程文档化。
场景六：多标签页操作
> 创建新标签页打开 https://docs.example.com
> 列出所有标签页
> 切换回第一个标签页
> 关闭文档标签页> 创建新标签页打开 https://docs.example.com
> 列出所有标签页
> 切换回第一个标签页
> 关闭文档标签页四层操控模型对比
| 层级 | 适用场景 | 精度 | 速度 | 推荐指数 |
|---|---|---|---|---|
| CSS Selector | 结构固定的简单页面 | 高 | 最快 | ⭐⭐ |
| ARIA Ref | 大多数常规页面 | 高 | 快 | ⭐⭐⭐⭐⭐ |
| SOM 视觉标注 | 复杂动态页面 | 中 | 中 | ⭐⭐⭐ |
| AI 智能浏览 | 多步复杂任务 | 中 | 慢 | ⭐⭐⭐⭐ |
推荐策略：日常操作用 ARIA Ref（observe → click_ref/fill_ref），复杂多步任务用 AI 智能浏览（ai_browse）。
常见问题
浏览器没有自动启动？
- Crab Claw 使用懒加载模式，首次调用浏览器工具时才启动
- 确认 Chrome/Brave/Edge 已安装
CDP 连接断开？
- 系统会自动重连，下次调用时重新发现/启动
- 如持续失败:
crabclaw browser status检查状态
操作太慢？
- 简单操作用 ARIA Ref（直接操控 DOM），不要用 AI 浏览
ai_browse每步都需要截图分析，适合复杂多步任务