Ai

openclaw浏览器自动化详细教程

作者 winter.yu
2026年3月7日 5 分钟阅读
0

浏览器自动化详细教程

目录

  1. 概述
  2. 快速开始
  3. 核心操作
  4. 高级功能
  5. 实战案例
  6. 最佳实践
  7. 常见问题

概述

浏览器自动化（Browser Automation）是通过代码控制浏览器执行各种操作的技本，常见应用场景包括：

  • 网页数据采集：抓取新闻、价格、评论等信息
  • 自动化测试：验证网站功能是否正常
  • 表单自动填写：自动登录、提交表单
  • 网页截图：生成页面预览、PDF导出
  • UI 自动化操作：点击、输入、滚动等交互

OpenClaw 内置基于 Playwright 的浏览器控制能力，无需额外安装即可使用。

快速开始

1. 启动浏览器

# 检查浏览器状态
openclaw browser status

# 启动浏览器（使用 openclaw 管理的隔离浏览器）
openclaw browser start

2. 打开网页

# 打开指定网址
openclaw browser open --url "https://www.example.com"

3. 基本操作示例

# 截图
openclaw browser screenshot --full-page

# 获取页面快照（可交互元素列表）
openclaw browser snapshot

核心操作

页面导航

# 打开网页
openclaw browser open --url "https://www.baidu.com"

# 刷新页面
openclaw browser navigate --reload

# 后退/前进
openclaw browser navigate --back
openclaw browser navigate --forward

页面快照（Snapshot）

快照功能是浏览器自动化的核心，可以获取当前页面的可交互元素列表：

# 获取基础快照
openclaw browser snapshot

# 获取带 ARIA 引用的快照（推荐，更稳定）
openclaw browser snapshot --refs aria

# 紧凑模式（减少输出）
openclaw browser snapshot --compact

快照输出示例：

[Page] Baidu
  [textbox] 搜索框
  [button] 百度一下
  [link] 新闻
  [link] 地图

点击元素

# 通过元素引用点击（需要先获取 snapshot）
openclaw browser click --ref "e12"

# 通过文本点击
openclaw browser click --text "登录"

# 通过选择器点击
openclaw browser click --selector "button[type='submit']"

输入文本

# 在输入框中输入文本
openclaw browser type --ref "e5" --text "要搜索的内容"

# 清空后输入
openclaw browser type --ref "e5" --text "新内容" --text-gone "旧内容"

# 按回车提交
openclaw browser type --ref "e5" --text "搜索词" --submit

截图

# 当前视口截图
openclaw browser screenshot

# 完整页面截图
openclaw browser screenshot --full-page

# 指定元素截图
openclaw browser screenshot --selector "#main-content"

# 指定输出格式和质量
openclaw browser screenshot --type jpeg --quality 80

导出 PDF

# 页面导出为 PDF
openclaw browser pdf --output report.pdf

高级功能

执行 JavaScript

# 在页面中执行 JS
openclaw browser eval --script "document.title"

# 获取页面所有链接
openclaw browser eval --script "Array.from(document.querySelectorAll('a')).map(a => a.href)"

# 滚动到页面底部
openclaw browser eval --script "window.scrollTo(0, document.body.scrollHeight)"

# 获取自定义数据
openclaw browser eval --script "JSON.stringify(window.__INITIAL_STATE__)"

等待操作

# 等待指定时间
openclaw browser wait --time 3000

# 等待元素出现
openclaw browser wait --selector ".loaded-content" --time 10000

# 等待网络空闲
openclaw browser wait --network-idle

处理新窗口/弹窗

# 获取所有标签页
openclaw browser tabs

# 切换到指定标签页
openclaw browser focus --target-id "tab-id"

# 关闭当前标签页
openclaw browser close

上传文件

# 上传文件到文件输入框
openclaw browser upload --selector "input[type='file']" --files "/path/to/file.pdf"

处理对话框

# 接受对话框（alert/confirm）
openclaw browser dialog --accept

# 拒绝对话框
openclaw browser dialog --dismiss

# 在 prompt 对话框中输入
openclaw browser dialog --accept --prompt-text "输入的内容"

实战案例

案例 1：自动登录网站

#!/bin/bash
# login.sh - 自动登录示例

# 打开登录页
openclaw browser open --url "https://example.com/login"

# 获取快照查看元素引用
openclaw browser snapshot

# 假设 e5 是用户名输入框，e6 是密码输入框，e7 是登录按钮
openclaw browser type --ref "e5" --text "username"
openclaw browser type --ref "e6" --text "password"
openclaw browser click --ref "e7"

# 等待登录完成
openclaw browser wait --time 2000

# 截图验证
openclaw browser screenshot --full-page

案例 2：数据采集 – 抓取新闻标题

#!/bin/bash
# scrape_news.sh

# 打开新闻网站
openclaw browser open --url "https://news.example.com"

# 等待内容加载
openclaw browser wait --selector ".news-item" --time 5000

# 执行 JS 提取数据
openclaw browser eval --script "
  Array.from(document.querySelectorAll('.news-item')).map(item => ({
    title: item.querySelector('h2')?.innerText,
    link: item.querySelector('a')?.href,
    time: item.querySelector('.time')?.innerText
  }))
"

# 保存截图
openclaw browser screenshot --full-page --output news_page.png

案例 3：自动化表单填写

#!/bin/bash
# fill_form.sh

openclaw browser open --url "https://example.com/form"

# 获取页面结构
openclaw browser snapshot --refs aria

# 填写表单（使用 ARIA 引用更稳定）
# 假设页面有 label 关联
openclaw browser type --ref "name-input" --text "张三"
openclaw browser type --ref "email-input" --text "[email protected]"
openclaw browser type --ref "phone-input" --text "13800138000"

# 选择下拉框（通过点击实现）
openclaw browser click --ref "gender-select"
openclaw browser click --text "男"

# 勾选复选框
openclaw browser click --ref "agree-checkbox"

# 提交表单
openclaw browser click --ref "submit-button"

# 等待提交结果
openclaw browser wait --time 3000
openclaw browser screenshot

案例 4：批量截图多个网页

#!/bin/bash
# batch_screenshot.sh

urls=(
  "https://example.com/page1"
  "https://example.com/page2"
  "https://example.com/page3"
)

for url in "${urls[@]}"; do
  filename=$(echo "$url" | sed 's/[^a-zA-Z0-9]/_/g').png
  echo "截图: $url -> $filename"

  openclaw browser open --url "$url"
  openclaw browser wait --time 2000
  openclaw browser screenshot --full-page --output "$filename"
done

案例 5：监控网页变化

#!/bin/bash
# monitor.sh - 监控网页内容变化

URL="https://example.com/status"
HASH_FILE="/tmp/page_hash.txt"

# 打开页面
openclaw browser open --url "$URL"
openclaw browser wait --time 3000

# 获取页面文本内容
content=$(openclaw browser eval --script "document.body.innerText")

# 计算哈希
current_hash=$(echo "$content" | md5sum | cut -d' ' -f1)

# 检查是否有变化
if [ -f "$HASH_FILE" ]; then
  previous_hash=$(cat "$HASH_FILE")
  if [ "$current_hash" != "$previous_hash" ]; then
    echo "⚠️ 页面内容发生变化！"
    echo "变化时间: $(date)"
    openclaw browser screenshot --output "change_$(date +%Y%m%d_%H%M%S).png"
    # 可以在这里添加通知逻辑
  else
    echo "✅ 页面内容未变化"
  fi
else
  echo "📝 首次运行，保存基准哈希"
fi

echo "$current_hash" > "$HASH_FILE"

最佳实践

1. 使用 ARIA 引用提高稳定性

# ❌ 不推荐 - 基于角色+名称的引用容易因页面变化失效
openclaw browser click --ref "e12"

# ✅ 推荐 - 使用 ARIA 引用更稳定
openclaw browser snapshot --refs aria
openclaw browser click --ref "aria-submit-button"

2. 添加适当的等待时间

# ❌ 不推荐 - 立即操作可能导致元素未加载
openclaw browser open --url "https://example.com"
openclaw browser click --text "加载更多"

# ✅ 推荐 - 等待元素出现
openclaw browser open --url "https://example.com"
openclaw browser wait --selector ".load-more-btn" --time 5000
openclaw browser click --selector ".load-more-btn"

3. 处理动态加载内容

# 滚动加载更多内容
for i in {1..5}; do
  openclaw browser eval --script "window.scrollTo(0, document.body.scrollHeight)"
  openclaw browser wait --time 1000
done

4. 错误处理和重试

#!/bin/bash
# 带重试的点击操作

click_with_retry() {
  local ref=$1
  local max_attempts=3
  local attempt=1

  while [ $attempt -le $max_attempts ]; do
    if openclaw browser click --ref "$ref" 2>/dev/null; then
      echo "✅ 点击成功"
      return 0
    fi

    echo "⚠️ 点击失败，第 $attempt 次重试..."
    sleep 1
    ((attempt++))
  done

  echo "❌ 点击失败，已达最大重试次数"
  return 1
}

# 使用
click_with_retry "e12"

5. 使用无头模式（Headless）

# 在后台运行，不显示浏览器窗口
openclaw browser start --headless

# 完成后再查看结果
openclaw browser screenshot

常见问题

Q1: 元素定位失败怎么办？

解决方法：

  1. 先获取最新快照：openclaw browser snapshot
  2. 检查元素是否在当前视口内（可能需要滚动）
  3. 使用更通用的选择器（如 contains(text)）
  4. 增加等待时间确保元素已加载

Q2: 如何处理 iframe？

# 切换到 iframe
openclaw browser snapshot --frame "frame-name"

# 在 iframe 内操作
openclaw browser click --ref "e5" --frame "frame-name"

Q3: 如何处理验证码？

方案：

  1. 暂停等待人工介入
  2. 使用第三方打码服务（需要配合 JS 注入）
  3. 使用已登录的 Cookie/Session 绕过
# 暂停等待人工处理验证码
openclaw browser wait --time 30000  # 等待30秒

Q4: 如何保存登录状态？

# 登录后获取 cookies
openclaw browser eval --script "JSON.stringify(document.cookie)"

# 下次访问时注入 cookies（通过 JS）
openclaw browser eval --script "document.cookie = 'session=xxx; domain=.example.com'"

Q5: 浏览器启动失败？

检查：

# 查看状态
openclaw browser status

# 停止后重新启动
openclaw browser stop
openclaw browser start

# 查看日志
openclaw logs --follow

工具对比

功能 OpenClaw Browser Selenium Puppeteer
安装配置 ✅ 内置，无需安装 需安装驱动 需安装 Node
学习曲线 ✅ 简单，命令行操作 中等 中等
多浏览器 ✅ Chromium 多种浏览器 仅 Chromium
编程接口 命令行/API Python/多语言 Node.js
与 AI 集成 ✅ 原生支持 需额外开发 需额外开发

参考资源

💡 提示：浏览器自动化是一把双刃剑，请遵守目标网站的 robots.txt 和使用条款，合理控制请求频率，避免对服务器造成压力。

标签：

作者

winter.yu

关注我
其他文章
暂无评论！成为第一个。

发表回复