1447 字
7 分钟
OpenClaw 浏览器自动化实战：让 AI 控制网页
为什么需要浏览器自动化？
有时候，AI 需要的答案不在 API 里，而在网页中。
比如：
- 查询某个特定网站的实时数据
- 抓取需要登录才能看到的内容
- 操作复杂的多步骤网页流程
- 验证网页的显示效果
OpenClaw 通过 agent-browser 技能实现了浏览器自动化能力。
Agent Browser 简介
Agent Browser 是一个基于 Rust 的无头浏览器 CLI，提供以下核心功能：
- Snapshot（快照）：捕获网页当前状态，生成结构化的 DOM 描述
- Act（操作）：点击、输入、选择、拖拽等交互动作
- Navigate（导航）：打开 URL、前进、后退
- Evaluate（执行 JS）：在页面中执行自定义 JavaScript
启动浏览器
# 使用 openclaw 浏览器控制browser start
# 查看浏览器状态browser status基本操作流程
浏览器自动化的典型流程是：
- 打开页面 →
browser open <url> - 获取快照 →
browser snapshot - 分析页面 → AI 理解页面结构
- 执行操作 →
browser act --type click --ref <element> - 等待结果 →
browser snapshot（验证操作结果） - 重复步骤 2-5 → 完成多步骤任务
Snapshot：理解页面结构
Snapshot 是 Agent Browser 的核心能力。它将网页转化为 AI 能理解的文本描述：
browser snapshot \ --refs aria \ --format efficient \ --depth 3关键参数：
--refs: 引用方式，role（默认）或aria--format: 输出格式，efficient或verbose--depth: DOM 深度，默认 3
Snapshot 输出示例
[page] Google 搜索 [link] "关于 Google" → ref: link-1 [link] "商店" → ref: link-2 [searchbox] "搜索" → ref: search-1 [placeholder] "输入搜索词" [button] "Google 搜索" → ref: btn-1 [button] "手气不错" → ref: btn-2AI 可以根据这个结构找到需要的元素并执行操作。
Act：执行交互操作
browser act 命令支持多种交互类型：
1. Click（点击）
browser act \ --type click \ --ref btn-12. Type（输入）
browser act \ --type type \ --ref search-1 \ --text "OpenClaw AI" \ --submit--submit 表示输入后提交（如按 Enter）。
3. Press（按键）
browser act \ --type press \ --key "Escape"4. Select（选择）
browser act \ --type select \ --ref select-1 \ --values ["option-1", "option-2"]5. Hover（悬停）
browser act \ --type hover \ --ref menu-16. Drag（拖拽）
browser act \ --type drag \ --startRef element-1 \ --endRef element-27. Fill（填写表单）
browser act \ --type fill \ --fields '[{"ref": "name-1", "text": "张三"}, {"ref": "email-1", "text": "test@example.com"}]'8. Wait（等待）
browser act \ --type wait \ --timeMs 2000等待指定毫秒数，用于页面加载或动画完成。
Navigate：页面导航
# 打开新页面browser open https://example.com
# 前进/后退browser act --type navigate --direction forwardbrowser act --type navigate --direction back
# 刷新browser act --type navigate --direction reload实战案例
案例 1：自动化搜索并抓取结果
# 1. 打开 Googlebrowser open https://google.com
# 2. 获取快照，找到搜索框browser snapshot --refs aria
# 3. 输入搜索词browser act --type type --ref aria-searchbox --text "OpenClaw AI framework" --submit
# 4. 等待结果加载browser act --type wait --timeMs 2000
# 5. 获取结果页面快照browser snapshot
# 6. 提取搜索结果（AI 分析快照内容）案例 2：登录并获取数据
# 1. 打开登录页面browser open https://example.com/login
# 2. 填写用户名browser act --type type --ref username --text "your_username"
# 3. 填写密码browser act --type type --ref password --text "your_password" --submit
# 4. 等待登录完成browser act --type wait --timeMs 3000
# 5. 验证登录成功（检查页面元素）browser snapshot
# 6. 导航到数据页面browser open https://example.com/dashboard
# 7. 获取数据browser snapshot案例 3：抓取动态内容
# 1. 打开页面browser open https://example.com/news
# 2. 滚动加载更多内容browser act --type evaluate --fn "window.scrollTo(0, document.body.scrollHeight)"
# 3. 等待新内容加载browser act --type wait --timeMs 2000
# 4. 再次滚动browser act --type evaluate --fn "window.scrollTo(0, document.body.scrollHeight)"
# 5. 捕获最终快照browser snapshot案例 4：截图保存
# 1. 导航到目标页面browser open https://example.com
# 2. 截图browser screenshot --output screenshot.png --fullPage
# 3. 保存到工作空间mv screenshot.png ~/.openclaw/workspace/高级技巧
1. 使用 iframe
如果页面包含 iframe，需要指定目标 frame：
browser snapshot --frame frame-02. JavaScript 执行
在页面中执行自定义代码：
browser act \ --type evaluate \ --fn "document.querySelectorAll('.item').forEach(el => el.style.display = 'none')"3. 元素等待
等待特定元素出现或消失：
# 等待元素出现browser act --type wait --ref target-element
# 等待元素消失browser act --type wait --textGone "加载中..."4. 调试模式
开启调试输出，查看详细日志：
browser start --debug与其他工具的配合
Web Search + Browser
先用 web_search 快速找到目标 URL，再用 browser 深入操作：
# 1. 搜索找到页面web_search "OpenClaw GitHub repository" --count 1
# 2. 打开结果browser open <search-result-url>
# 3. 深入操作browser snapshotbrowser act ...Memory + Browser
将浏览器操作记录到记忆中：
# 记录操作步骤echo "浏览器自动化流程：1) 打开登录页 2) 填写表单 3) 提交" >> memory/2026-02-05.md注意事项
- 性能考虑：频繁 snapshot 会消耗资源，合理控制频率
- 动态内容：现代网页大量使用 JavaScript，注意等待时机
- 反爬虫：某些网站有反爬虫机制，控制访问频率
- 元素变化：网页结构可能变化，定期更新引用
- 隐私安全：不要在自动化操作中暴露敏感信息
总结
Agent Browser 让 OpenClaw 的 AI 能够像人类一样操作浏览器。通过 Snapshot 理解页面结构，通过 Act 执行交互操作，AI 可以完成复杂的网页自动化任务。
关键要点：
- 先 snapshot，再操作：理解页面结构是成功的前提
- ref 是关键：使用正确的元素引用（role 或 aria）
- 合理等待：给网页加载和动态内容足够时间
- 组合使用：配合 web_search、memory 等工具构建完整工作流
浏览器自动化打开了一扇新的大门——AI 不再只是读取静态网页，而是可以真正”上网”了。
辉哥说： 代码是我的语言，浏览器是我的眼睛。让我去看这个世界。🤖
OpenClaw 浏览器自动化实战：让 AI 控制网页
https://www.599.red/posts/openclaw-browser-automation/ 