OpenClaw 浏览器自动化：解放你的重复操作

66次阅读

OpenClaw 浏览器自动化：解放你的重复操作

还在手动填表、反复测试网页、人工监控网站变化？agent-browser 让你用代码控制浏览器，自动完成这些重复任务。本文带你从入门到实战，搭建浏览器自动化工作流。

01 为什么需要浏览器自动化？

重复操作的痛点：

agent-browser 核心能力：

  • 🖱️ 模拟操作 — 点击、输入、选择、滚动

  • 📸 截图对比 — 监控页面变化

  • 🔐 自动登录 — 保存会话，免重复认证

  • 📱 多设备模拟 — 测试响应式布局

  • 🔍 数据提取 — 抓取页面内容

02 安装与配置

安装 agent-browser

# 通过 npm 安装
npm install -g agent-browser

# 验证安装
agent-browser --version

核心工作流

所有浏览器自动化都遵循 4 步：

# 1. 导航
agent-browser open https://example.com

# 2. 快照（获取元素引用）agent-browser snapshot -i
# 输出：@e1 [input], @e2 [button], @e3 [link]

# 3. 交互
agent-browser fill @e1 " 用户名 "
agent-browser click @e2

# 4. 等待 + 验证
agent-browser wait --load networkidle
agent-browser snapshot -i  # 重新快照

03 基础操作

导航与截图 

# 打开网页
agent-browser open https://openclaw.ai

# 等待加载完成
agent-browser wait --load networkidle

# 截图
agent-browser screenshot page.png

# 全页截图
agent-browser screenshot --full fullpage.png

表单自动填写 

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

# 获取元素引用
agent-browser snapshot -i
# 假设输出：@e1 [input type="email"], @e2 [input type="password"], @e3 [button]

# 填写表单
agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password123"

# 点击提交
agent-browser click @e3

# 等待跳转
agent-browser wait --url "**/dashboard"

命令链式执行 

# 多条命令用 && 连接（更高效）agent-browser open https://example.com && \
  agent-browser wait --load networkidle && \
  agent-browser snapshot -i && \
  agent-browser fill @e1 "test@example.com" && \
  agent-browser fill @e2 "password" && \
  agent-browser click @e3 && \
  agent-browser wait --load networkidle && \
  agent-browser screenshot result.png

04 实战演示

案例 1：自动登录并抓取数据

场景： 每天登录后台，导出昨日数据 

#!/bin/bash
# daily-export.sh

# 1. 打开登录页
agent-browser open https://admin.example.com/login

# 2. 填写凭证（从环境变量读取）agent-browser snapshot -i
agent-browser fill @e1 "$ADMIN_USER"
agent-browser fill @e2 "$ADMIN_PASS"
agent-browser click @e3

# 3. 等待进入后台
agent-browser wait --url "**/dashboard"

# 4. 导航到数据页面
agent-browser open https://admin.example.com/data/export
agent-browser wait --load networkidle

# 5. 选择日期（昨日）agent-browser snapshot -i
agent-browser fill @e4 "$(date -d yesterday +%Y-%m-%d)"
agent-browser fill @e5 "$(date +%Y-%m-%d)"

# 6. 点击导出
agent-browser click @e6

# 7. 等待下载
agent-browser wait --download ./data/export.csv

echo " 数据导出完成: ./data/export.csv"

配合 cron 定时执行：

# 每天早上 9 点自动导出
0 9 * * * /path/to/daily-export.sh

案例 2：网站变化监控

场景： 监控竞品网站，有变化立即通知 

#!/bin/bash
# website-monitor.sh

URL="https://competitor.com/pricing"
BASELINE="./baselines/pricing.png"

# 1. 打开页面
agent-browser open "$URL"
agent-browser wait --load networkidle

# 2. 截图
agent-browser screenshot current.png

# 3. 对比（如果有基线）if [-f "$BASELINE"]; then
  agent-browser diff screenshot --baseline "$BASELINE"

  # 检查是否有变化
  if [$? -ne 0]; then
    echo "⚠️ 页面有变化！"
    # 发送通知（结合 OpenClaw message 工具）# message action="send" target="your-chat-id" message=" 竞品页面有更新: $URL"

    # 更新基线
    cp current.png "$BASELINE"
  else
    echo "✅ 页面无变化 "
  fi
else
  # 首次运行，保存基线
  cp current.png "$BASELINE"
  echo " 已保存基线截图 "
fi

案例 3：批量提交表单

场景： 有 100 条数据需要录入系统 

#!/bin/bash
# batch-submit.sh

DATA_FILE="./data/entries.csv"

# 登录（复用会话）agent-browser --session-name myapp open https://app.example.com/login
agent-browser snapshot -i
agent-browser fill @e1 "$USER"
agent-browser fill @e2 "$PASS"
agent-browser click @e3
agent-browser wait --load networkidle

# 逐条提交
while IFS="," read -r name email phone; do
  echo " 提交: $name"

  # 打开表单页
  agent-browser open https://app.example.com/form
  agent-browser wait --load networkidle

  # 填写数据
  agent-browser snapshot -i
  agent-browser fill @e4 "$name"
  agent-browser fill @e5 "$email"
  agent-browser fill @e6 "$phone"

  # 提交
  agent-browser click @e7
  agent-browser wait --load networkidle

  # 短暂休息，避免请求过快
  sleep 2
done < "$DATA_FILE"

echo " 批量提交完成！"

案例 4：响应式布局测试

场景： 测试网站在不同设备上的显示效果 

#!/bin/bash
# responsive-test.sh

URL="https://myapp.com"
DEVICES=("iPhone 14" "iPad Pro" "Desktop")

for device in "${DEVICES[@]}"; do
  echo " 测试设备: $device"

  # 设置设备
  agent-browser set device "$device"

  # 打开页面并截图
  agent-browser open "$URL"
  agent-browser wait --load networkidle
  agent-browser screenshot "screenshot-${device// /-}.png"
done

echo " 响应式测试完成，查看截图目录 "

输出： – screenshot-iPhone-14.png – screenshot-iPad-Pro.png – screenshot-Desktop.png

案例 5：自动登录状态保持

场景： 避免每次都要重新登录 

# 首次登录并保存状态
agent-browser open https://app.example.com/login
agent-browser snapshot -i
agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password"
agent-browser click @e3
agent-browser wait --url "**/dashboard"

# 保存登录状态
agent-browser state save auth.json

# 下次直接加载状态
agent-browser state load auth.json
agent-browser open https://app.example.com/dashboard
# 无需再次登录！

05 进阶技巧

技巧 1：使用 Auth Vault 安全存储密码 

# 保存凭证（加密存储）echo "password" | agent-browser auth save myapp \
  --url https://app.example.com/login \
  --username user@example.com \
  --password-stdin

# 自动登录
agent-browser auth login myapp

优势： – 密码加密存储 – LLM 永远不会看到密码 – 支持多账号管理

技巧 2：并行多会话 

# 同时操作多个网站
agent-browser --session site1 open https://site-a.com
agent-browser --session site2 open https://site-b.com

# 分别操作
agent-browser --session site1 snapshot -i
agent-browser --session site2 snapshot -i

# 查看所有会话
agent-browser session list

技巧 3：带标注的截图（Vision 模式）

# 截图并标注所有可交互元素
agent-browser screenshot --annotate

# 输出包含元素编号，可直接点击
# [1] @e1 button "Submit"
# [2] @e2 link "Home"

agent-browser click @e1  # 直接点击

技巧 4：JavaScript 执行 

# 执行简单 JS
agent-browser eval 'document.title'

# 复杂 JS（使用 stdin）agent-browser eval --stdin <<'EOF'
JSON.stringify({links: Array.from(document.querySelectorAll('a')).map(a => a.href),
  images: Array.from(document.querySelectorAll('img')).map(img => img.src)
})
EOF

技巧 5：移动端测试（iOS 模拟器）

# macOS 需要 Xcode 和 Appium
npm install -g appium
appium driver install xcuitest

# 列出可用设备
agent-browser device list

# 在 iPhone 上测试
agent-browser -p ios --device "iPhone 16 Pro" open https://example.com
agent-browser -p ios snapshot -i
agent-browser -p ios screenshot mobile.png
agent-browser -p ios close

06 安全与最佳实践

安全设置 

# 内容边界标记（推荐开启）export AGENT_BROWSER_CONTENT_BOUNDARIES=1

# 域名白名单（防止误入恶意网站）export AGENT_BROWSER_ALLOWED_DOMAINS="example.com,*.example.com"

# 操作策略（限制危险操作）export AGENT_BROWSER_ACTION_POLICY=./policy.json

policy.json 示例：

{
  "default": "deny",
  "allow": ["navigate", "snapshot", "click", "fill", "screenshot"]
}

最佳实践

  1. 使用会话保持 — 避免重复登录

  2. 命令链式执行 — 减少 API 调用次数

  3. 添加等待条件 — 避免操作过早执行

  4. 页面变化后重新快照 — refs 会失效

  5. 定期清理会话 — 避免资源泄漏

07 常见问题

Q1: 元素引用 失效了

原因： 页面变化后，旧的 refs 会失效

解决：

# 操作后重新快照
agent-browser click @e1
agent-browser wait --load networkidle
agent-browser snapshot -i  # 重新获取 refs
agent-browser click @e2     # 使用新的 ref

Q2: 页面加载太慢，操作失败

解决：

# 显式等待网络空闲
agent-browser wait --load networkidle

# 或等待特定元素
agent-browser wait "#content"

# 或固定等待（最后手段）agent-browser wait 5000

Q3: 如何滚动页面加载更多内容？

# 向下滚动 500px
agent-browser scroll down 500

# 在特定容器内滚动
agent-browser scroll down 500 --selector "div.content"

Q4: 截图模糊怎么办？

# 使用 Retina 分辨率（2x）agent-browser set viewport 1920 1080 2
agent-browser screenshot retina.png

Q5: 如何处理弹窗 / 下拉菜单？

# 点击触发下拉
agent-browser click @e1

# 等待下拉内容出现
agent-browser wait --load networkidle

# 重新快照获取新元素
agent-browser snapshot -i

# 选择选项
agent-browser select @e2 "Option Name"

08 总结

下一步： – 尝试自动化你日常工作中的重复网页操作 – 结合 OpenClaw 定时任务实现无人值守 – 探索与飞书 /Slack 集成，实现异常告警

本文是 OpenClaw 进阶技能系列第 5 篇，下一篇：《OpenClaw 笔记自动化：一句话记到所有平台》

#OpenClaw #浏览器自动化 #RPA #自动化测试 #效率工具

正文完
发表至： 技术
2026-06-02
 

近期文章

近期评论

您尚未收到任何评论。