每日Skill学习 - browser-automation#

1. navigate — 打开网页#

1
browser navigate <url>

最基础的命令，打开指定 URL 并自动截图。会自动等待 network idle，确保页面渲染完成。

2. act — 执行自然语言操作#

1
browser act "Click the login button"
2
browser act "Fill in email field with test@example.com"
3
browser act "Select 'California' from the state dropdown"

这个是最核心的能力！Stagehand 使用 Claude Haiku 4.5 理解你的自然语言描述，然后找到并操作对应的页面元素。支持：点击、输入、选择、滚动、悬停、等待、双击等。

⚠️ 关键提示：描述要具体！

1
# 好例子
2
browser act "Click the blue Submit button in the footer"
3

4
# 坏例子（可能点错）
5
browser act "Click submit"

3. extract — 结构化数据提取#

1
browser extract "Extract the product information" \
2
  '{"productName": "string", "price": "number", "inStock": "boolean"}'

用 Zod Schema 定义你想提取的数据格式，AI 会自动扫描页面并返回结构化 JSON。支持 string/number/boolean 三种类型。

4. observe — 发现页面元素#

1
browser observe "Find all buttons"
2
browser observe "Find form input fields"

在不确定页面结构时，先用 observe 探查有哪些可交互元素。

5. screenshot — 截图#

1
browser screenshot

截取当前页面，自动保存到 ./agent/browser_screenshots/ 目录。大于 2000x2000 的图片会自动缩放。

6. close — 关闭浏览器#

1
browser close

清理所有资源，关闭 Chrome 进程。记得最后一定要调用，不然 Chrome 进程会一直挂着。

✨ 自然语言操控，无需写代码#

传统 Playwright 需要写 page.click('#submit-btn') 这样的选择器代码，而 browser-automation 直接用自然语言描述你想做什么。AI 会自动理解并找到正确的元素。

🧠 AI 驱动的元素发现#

Stagehand 不只是简单的选择器匹配，它用 AI 视觉模型理解页面结构。即使按钮没有稳定的 ID 或 class，AI 也能根据语义找到它。

🗂️ Tab 标签页管理#

技能内置了优秀的 Tab 管理最佳实践：

• 用 label 给重要标签命名（如 label="meet"）
• 复用已有标签而非重复打开
• 操作前先 snapshot 确认当前 Tab 状态

🔄 Stale Ref 自动恢复#

当元素引用失效（页面导航或动态渲染导致），技能提供了标准恢复流程：snapshot → 找当前元素 → retry。避免在复杂流程中因为一个小错误就全盘崩溃。

👤 用户浏览器集成#

profile="user" 选项可以附加到用户正在运行的 Chromium 浏览器，直接使用已有的登录状态和 Cookie，不需要重新认证。这个在自动操作需要登录的页面时非常有用。

🔧 完整错误处理#

每个命令都返回 JSON 格式的结果：

1
{
2
  "success": true,
3
  "message": "Successfully navigated to https://example.com",
4
  "screenshot": "/path/to/screenshot.png"
5
}

失败时也有清晰的错误提示，比如元素找不到、schema 验证失败、CDP 连接断开等。

前置要求#

• 安装 Chrome/Chromium（本地）
• Node.js 环境
• 已安装 browser CLI 工具（OpenClaw 插件提供）

基本工作流#

1
# 1. 打开目标网页
2
browser navigate https://example.com
3

4
# 2. 截图确认页面加载成功
5
browser screenshot
6

7
# 3. 用自然语言操作页面
8
browser act "Click the 'Get Started' button"
9

10
# 4. 提取结构化数据
11
browser extract "Extract all product names and prices" \
12
  '{"product": "string", "price": "number"}'
13

14
# 5. 完成后清理
15
browser close

在 OpenClaw 中使用（多步流程示例）#

1
// Step 1: 打开登录页
2
{ "action": "navigate", "url": "https://github.com/login" }
3

4
// Step 2: 填用户名
5
{ "action": "act", "targetId": "main", "instruction": "Fill in the username field with myuser" }
6

7
// Step 3: 填密码
8
{ "action": "act", "targetId": "main", "instruction": "Fill in the password field with secret123" }
9

10
// Step 4: 点击登录
11
{ "action": "act", "targetId": "main", "instruction": "Click the Sign in button" }
12

13
// Step 5: 等待导航后提取数据
14
{ "action": "extract", "targetId": "main", "instruction": "Extract the username and avatar URL", "schema": {"username": "string", "avatarUrl": "string"} }

Tab 管理示例#

1
// 先检查现有标签
2
{ "action": "tabs" }
3

4
// 没有则打开新标签
5
{ "action": "open", "url": "https://meet.google.com/abc-defg-hij", "label": "meet" }
6

7
// 后续操作都指定 targetId 为标签名
8
{ "action": "snapshot", "targetId": "meet", "refs": "aria" }