🌐 OpenClaw 浏览器自动化高级技巧

🔧 基础操作回顾

# 打开页面
browser(action="open", url="https://example.com")

# 获取页面快照（DOM结构）
browser(action="snapshot")

# 截图
browser(action="screenshot")

# 页面导航
browser(action="navigate", url="https://example.com/page2")

# 点击元素
browser(action="act", kind="click", ref="e12")

# 输入文本
browser(action="act", kind="fill", ref="e15", text="Hello")

# 按键
browser(action="act", kind="press", key="Enter")

🎯 aria引用系统

aria引用是OpenClaw浏览器自动化的核心改进，它提供了跨调用稳定的元素引用。

为什么需要aria引用

• 传统role引用 — 每次snapshot可能变化
• aria引用 — 基于DOM结构，保持稳定
• 精确匹配 — 减少误点击

使用方法

# 获取aria引用的快照
snapshot = browser(action="snapshot", refs="aria")
# 返回：
# e1: button "提交订单"
# e2: input[placeholder="搜索"] 
# e3: a[href="/products"] "产品列表"

# 后续操作使用相同的ref
browser(action="act", kind="click", ref="e1")  # 点击提交
browser(action="act", kind="fill", ref="e2", text="iPhone")  # 输入搜索

🖼️ iframe操作

对于包含iframe的页面，需要指定frame参数来操作iframe内的元素。

# 获取iframe内的快照
browser(action="snapshot", frame="iframe[name='chat-widget']")

# 在iframe内点击
browser(action="act", kind="click", ref="e5", frame="iframe[name='chat-widget']")

# 在iframe内输入
browser(action="act", kind="fill", ref="e8", text="消息内容", frame="iframe[name='chat-widget']")

# 嵌套iframe
browser(action="snapshot", frame="iframe[name='outer'] >> iframe[name='inner']")

查找iframe

# 先获取主页面快照，找到iframe
browser(action="snapshot")
# 输出中会显示：
# iframe "chat-widget" (src="https://chat.example.com/embed")

# 然后操作该iframe
browser(action="snapshot", frame="iframe[name='chat-widget']")

📝 表单填写

基础表单

# 填写文本框
browser(action="act", kind="fill", ref="e10", text="用户名")

# 填写密码
browser(action="act", kind="fill", ref="e11", text="password123")

# 选择下拉框
browser(action="act", kind="select", ref="e12", values=["选项2"])

# 勾选复选框
browser(action="act", kind="click", ref="e13")

# 提交表单
browser(action="act", kind="click", ref="e14")  # 点击提交按钮

复杂表单

# 多步表单
# 第一步
browser(action="act", kind="fill", ref="e1", text="姓名")
browser(action="act", kind="fill", ref="e2", text="邮箱")
browser(action="act", kind="click", ref="e3")  # 下一步

# 等待页面更新
browser(action="act", kind="wait", timeMs=1000)

# 第二步
snapshot = browser(action="snapshot", refs="aria")  # 重新获取引用
browser(action="act", kind="fill", ref="e10", text="地址")
browser(action="act", kind="click", ref="e11")  # 提交

📸 截图与分析

截图

# 全页面截图
browser(action="screenshot")

# 指定区域截图
browser(action="screenshot", selector="#main-content")

# 截图并保存
browser(action="screenshot", fullPage=True)

视觉分析

# 截图后让Agent分析
screenshot = browser(action="screenshot")
# Agent会自动分析截图内容

# 用于验证操作结果
browser(action="act", kind="click", ref="e5")  # 点击按钮
screenshot = browser(action="screenshot")  # 截图验证

🎓 高级模式

等待策略

# 等待页面加载
browser(action="act", kind="wait", loadState="networkidle")

# 等待元素出现
browser(action="act", kind="wait", selector=".result-item")

# 等待特定时间
browser(action="act", kind="wait", timeMs=2000)

多Tab操作

# 查看所有Tab
browser(action="tabs")

# 打开新Tab
browser(action="open", url="https://example.com", label="example")

# 切换Tab
browser(action="focus", targetId="t1")

# 关闭Tab
browser(action="close", targetId="t1")

滚动操作

# 滚动到元素
browser(action="act", kind="scrollIntoView", ref="e20")

# 滚动页面
browser(action="act", kind="evaluate", fn="window.scrollBy(0, 500)")

拖拽操作

# 拖拽元素
browser(action="act", kind="drag", startRef="e5", endRef="e10")

❓ 常见问题

Q: 元素找不到怎么办？

# 1. 重新获取snapshot
snapshot = browser(action="snapshot", refs="aria")

# 2. 尝试等待
browser(action="act", kind="wait", timeMs=2000)
snapshot = browser(action="snapshot", refs="aria")

# 3. 使用selector直接定位
browser(action="act", kind="click", selector="button.submit-btn")

Q: 页面加载太慢？

# 使用loadState等待
browser(action="act", kind="wait", loadState="domcontentloaded")
# 不等待所有资源，只等DOM

Q: 操作后页面没反应？

# 检查是否在正确的frame中
browser(action="snapshot", frame="iframe[name='main']")

# 检查元素是否可见
browser(action="act", kind="scrollIntoView", ref="e5")
browser(action="act", kind="click", ref="e5")