OpenClaw 浏览器自动化详解：控制 Chrome 做 AnythingOpenClaw 浏览器自动化详解：控制 C

OpenClaw 浏览器自动化详解：控制 Chrome 做 Anything

系列文章： 《OpenClaw 从入门到精通》第 4 期
难度等级： ⭐⭐⭐
预计耗时： 45 分钟

🎯 本文目标

学会用 OpenClaw 控制浏览器完成各种自动化任务：

✅ 打开网页、导航
✅ 点击按钮、填写表单
✅ 抓取数据、截图保存
✅ 批量操作、循环处理

📚 核心概念

1. 浏览器控制原理

OpenClaw → Chrome DevTools Protocol → 浏览器
   ↓
自然语言指令 → 转换为具体操作

2. 支持的浏览器

✅ Google Chrome（推荐）
✅ Microsoft Edge
✅ Chromium
✅ Firefox（部分支持）

🔧 基础操作

1. 打开网页

# 简单打开
openclaw "打开百度首页"

# 指定浏览器
openclaw "用 Chrome 打开 GitHub"

# 新标签页打开
openclaw "在新标签页打开 CSDN"

2. 页面导航

openclaw "跳转到登录页面"
openclaw "返回上一页"
openclaw "前进到下一页"
openclaw "刷新当前页面"

3. 元素操作

# 点击
openclaw "点击登录按钮"
openclaw "点击第 3 个搜索结果"

# 输入
openclaw "在搜索框输入 OpenClaw"
openclaw "填写用户名为 admin"

# 选择
openclaw "选择第一个选项"
openclaw "勾选同意协议"

💻 实战案例

案例 1：自动登录 CSDN

openclaw "
1. 打开 CSDN 登录页面
2. 输入账号密码
3. 点击登录
4. 确认登录成功
"

详细步骤：

导航到 passport.csdn.net/login
找到账号输入框，输入用户名
找到密码输入框，输入密码
点击登录按钮
等待页面跳转，确认登录成功

案例 2：抓取 GitHub 项目 Star 数

openclaw "
1. 打开 OpenClaw 的 GitHub 页面
2. 找到 Star 按钮
3. 提取 Star 数量
4. 保存到文件
"

实现代码：

from openclaw import Browser

browser = Browser()
browser.open("https://github.com/openclaw/openclaw")
stars = browser.extract(".star-count")
browser.save(stars, "stars.txt")

案例 3：批量下载图片

openclaw "
1. 打开图片网站
2. 搜索关键词
3. 下载前 10 张图片
4. 保存到指定文件夹
"

实现逻辑：

# 搜索
browser.type(".search-box", "AI 图片")
browser.click(".search-btn")

# 等待加载
browser.wait(3)

# 下载图片
images = browser.find_all("img")
for i, img in enumerate(images[:10]):
    img.download(f"images/{i}.jpg")

案例 4：自动填写表单

openclaw "
帮我填写这个注册表单：
- 用户名：testuser
- 邮箱：test@example.com
- 密码：Test123!
- 确认密码：Test123!
- 勾选同意协议
- 点击注册
"

字段映射：

form_data = {
    "username": "testuser",
    "email": "test@example.com",
    "password": "Test123!",
    "confirm_password": "Test123!",
    "agree_terms": True
}

browser.fill_form(form_data)
browser.submit()

🎓 高级技巧

技巧 1：等待元素加载

# 等待特定时间
openclaw "等待 3 秒"

# 等待元素出现
openclaw "等待登录按钮出现"

# 等待页面加载完成
openclaw "等待页面完全加载"

代码实现：

# 固定等待
browser.wait(3)

# 智能等待
browser.wait_for_element(".login-btn", timeout=10)

# 等待加载状态
browser.wait_until_loaded()

技巧 2：处理弹窗

# 确认弹窗
openclaw "点击确认按钮"

# 关闭弹窗
openclaw "关闭这个弹窗"

# 忽略弹窗
openclaw "忽略这个提示"

处理逻辑：

try:
    modal = browser.find(".modal")
    if modal.exists():
        modal.click(".confirm-btn")
except:
    pass  # 没有弹窗

技巧 3：多标签页管理

# 新建标签页
openclaw "打开新标签页"

# 切换标签页
openclaw "切换到第 2 个标签页"

# 关闭标签页
openclaw "关闭当前标签页"

# 列出所有标签页
openclaw "显示所有打开的标签页"

API 使用：

# 新建
tab = browser.new_tab()
tab.open("https://example.com")

# 切换
browser.switch_tab(1)

# 关闭
browser.close_tab()

# 列表
tabs = browser.list_tabs()

技巧 4：截图和录屏

# 全屏截图
openclaw "截取整个页面"

# 区域截图
openclaw "截取登录表单区域"

# 元素截图
openclaw "截取这个按钮"

# 开始录屏
openclaw "开始录制屏幕"

保存选项：

# 全屏
browser.screenshot("full_page.png", full_page=True)

# 区域
browser.screenshot("form.png", selector=".form")

# 元素
button = browser.find(".btn")
button.screenshot("button.png")

技巧 5：数据提取

# 提取文本
openclaw "提取文章标题"

# 提取链接
openclaw "提取所有外部链接"

# 提取表格
openclaw "提取这个表格的数据"

# 提取列表
openclaw "提取评论列表"

提取方法：

# 文本
title = browser.extract_text("h1")

# 链接
links = browser.extract_all("a", attr="href")

# 表格
table_data = browser.extract_table(".data-table")

# 列表
comments = browser.extract_all(".comment")

🔍 元素定位技巧

1. CSS 选择器

# ID
browser.find("#login-btn")

# Class
browser.find(".btn-primary")

# 标签
browser.find("input")

# 属性
browser.find("input[type='text']")

# 组合
browser.find("form .btn.submit")

2. XPath

# 文本匹配
browser.find("//button[text()='登录']")

# 属性匹配
browser.find("//input[@name='username']")

# 位置
browser.find("(//li)[3]")

3. 语义化定位

# 按钮文本
browser.find_button("提交")

# 链接文本
browser.find_link("下一页")

# 标签文本
browser.find_label("用户名")

⚠️ 常见问题

问题 1：元素找不到

原因：

页面未完全加载
选择器错误
元素在 iframe 中

解决：

# 等待加载
browser.wait_for_element(".target", timeout=10)

# 检查选择器
browser.debug_selector(".target")

# 切换 iframe
browser.switch_to_frame("iframe-name")

问题 2：操作失败

原因：

元素被遮挡
权限不足
网络问题

解决：

# 滚动到元素
browser.scroll_to(".target")

# 强制点击
browser.click(".target", force=True)

# 重试
browser.retry(3, lambda: browser.click(".btn"))

问题 3：验证码处理

方案：

人工介入 - 暂停等待人工输入
打码平台 - 接入第三方服务
绕过 - 寻找免验证方式

# 暂停等待
browser.pause("请输入验证码")

# 或者使用打码平台
captcha = browser.extract(".captcha")
code = captcha_solver.solve(captcha)
browser.type(".captcha-input", code)

📊 性能优化

1. 批量操作

# 低效：逐个操作
for url in urls:
    browser.open(url)
    browser.wait(2)

# 高效：批量打开
browser.open_all(urls, concurrent=5)

2. 缓存页面

# 启用缓存
browser.enable_cache()

# 使用缓存
page = browser.get_cached("https://example.com")

3. 无头模式

# 无头模式（不显示界面）
browser = Browser(headless=True)

# 适合服务器环境

🎯 最佳实践

1. 错误处理

try:
    browser.click(".btn")
except ElementNotFound:
    logger.warning("按钮未找到")
except TimeoutError:
    logger.error("操作超时")
finally:
    browser.close()

2. 日志记录

browser.enable_logging("debug")
browser.log_action("click", ".btn")

3. 资源清理

# 使用上下文管理器
with Browser() as browser:
    browser.open("https://example.com")
    # 自动清理

# 或手动清理
browser.close()
browser.clear_cache()

📚 本系列预告

期数	主题	状态
第 1 期	OpenClaw 是什么	✅ 已完成
第 2 期	Ubuntu 安装教程	✅ 已完成
第 3 期	自动发布 CSDN	✅ 已完成
第 4 期	浏览器自动化	✅ 已完成
第 5 期	AI 定时任务系统	下一篇
第 6 期	OpenClaw + Feishu	待发布
第 7 期	源码解析	待发布

💬 互动话题

你最想用浏览器自动化做什么？
遇到过什么自动化难题？
需要什么功能的详细教程？

欢迎在评论区留言！

觉得有用？点赞 👍 收藏 ⭐ 关注 ➕ 三连支持一下！