Agent-Browser 技能 v2.0

概述

使用 agent-browser CLI 配合本地 Chrome/Chromium 实现完整的浏览器自动化。支持并行会话、状态持久化、可视化调试和复杂工作流。

安装与配置

步骤 1：安装 agent-browser

bash npm install -g agent-browser

步骤 2：配置 Chrome 路径

macOS：
bash
export AGENTBROWSEREXECUTABLE_PATH=/Applications/Google Chrome.app/Contents/MacOS/Google Chrome

添加到 ~/.zshrc 以持久化

echo export AGENTBROWSEREXECUTABLE_PATH=/Applications/Google Chrome.app/Contents/MacOS/Google Chrome >> ~/.zshrc

Linux：
bash
export AGENTBROWSEREXECUTABLE_PATH=/usr/bin/google-chrome

或使用 Chromium

export AGENTBROWSEREXECUTABLE_PATH=/usr/bin/chromium-browser

Windows：
powershell
$env:AGENTBROWSEREXECUTABLE_PATH=C:\Program Files\Google\Chrome\Application\chrome.exe

步骤 3：验证安装

bash agent-browser --version agent-browser open https://example.com agent-browser snapshot -i

核心工作流

每个浏览器自动化都遵循以下 4 步模式：

bash

1. 导航到 URL

agent-browser open https://example.com/form

2. 获取包含交互元素引用的快照

agent-browser snapshot -i

输出：@e1 [input type=email], @e2 [input type=password], @e3 [button] Submit

3. 使用引用进行交互

agent-browser fill @e1 user@example.com agent-browser fill @e2 password123 agent-browser click @e3

4. 等待并验证

agent-browser wait --load networkidle agent-browser snapshot -i

完整命令参考

导航命令

bash

打开 URL

agent-browser open # 导航到 URL
agent-browser open --session # 在命名会话中打开
agent-browser open --headless # 无头模式

导航控制

agent-browser back # 后退 agent-browser forward # 前进 agent-browser refresh # 刷新页面 agent-browser close # 关闭浏览器 agent-browser close --session # 关闭指定会话

快照命令

bash

基本快照

agent-browser snapshot # 全页快照
agent-browser snapshot -i # 仅交互元素（推荐）
agent-browser snapshot -i -C # 包含光标交互（onclick、cursor:pointer）
agent-browser snapshot -s #selector # 限定 CSS 选择器范围
agent-browser snapshot --json # 输出为 JSON
agent-browser snapshot --depth 3 # 限制 DOM 深度

交互命令

bash

点击操作

agent-browser click @e1 # 点击元素
agent-browser click @e1 --double # 双击
agent-browser click @e1 --right # 右键点击
agent-browser click @e1 --modifiers Ctrl # 带修饰键（Ctrl、Alt、Shift、Meta）

文本输入

agent-browser fill @e2 text # 清除后输入 agent-browser type @e2 text # 不清除直接输入 agent-browser type @e2 text --slowly # 慢速输入（用于限速输入框）

选择操作

agent-browser select @e3 option # 选择下拉选项 agent-browser select @e3 --index 2 # 按索引选择 agent-browser check @e4 # 勾选复选框 agent-browser uncheck @e4 # 取消勾选复选框 agent-browser radio @e5 # 选择单选按钮

键盘操作

agent-browser press Enter # 按下按键 agent-browser press Tab # Tab 键 agent-browser press Escape # Escape 键 agent-browser press Ctrl+A # 全选 agent-browser press Ctrl+C # 复制 agent-browser press Ctrl+V # 粘贴

鼠标操作

agent-browser hover @e1 # 悬停在元素上 agent-browser scroll down 500 # 向下滚动 500px agent-browser scroll up 300 # 向上滚动 agent-browser scroll to @e1 # 滚动到元素

等待命令

bash

等待元素

agent-browser wait @e1 # 等待元素可见
agent-browser wait @e1 --timeout 10000 # 自定义超时（毫秒）

等待页面状态

agent-browser wait --load networkidle # 等待网络空闲 agent-browser wait --load domcontentloaded # 等待 DOMContentLoaded agent-browser wait --load load # 等待页面完全加载

等待 URL

agent-browser wait --url /dashboard # 等待 URL 模式 agent-browser wait --url /login --gone # 等待 URL 消失

等待文本

agent-browser wait --text Welcome # 等待文本可见 agent-browser wait --text Error --gone # 等待文本消失

时间等待

agent-browser wait 2000 # 等待 2 秒

获取信息

bash
agent-browser get text @e1 # 获取元素文本
agent-browser get text @e1 --json # JSON 输出
agent-browser get html @e1 # 获取元素 HTML
agent-browser get attribute @e1 href # 获取属性值
agent-browser get url # 获取当前 URL
agent-browser get title # 获取页面标题
agent-browser get count .product # 统计匹配选择器的元素数量

捕获命令

bash

截图

agent-browser screenshot # 截图到临时目录
agent-browser screenshot --full # 全页截图
agent-browser screenshot --output ./img.png # 保存到指定路径
agent-browser screenshot --element @e1 # 截取特定元素

PDF

agent-browser pdf output.pdf # 将页面保存为 PDF agent-browser pdf output.pdf --landscape # 横向布局

视频（需要扩展）

agent-browser record start # 开始录制 agent-browser record stop # 停止录制

会话管理

bash

列出会话

agent-browser session list

保存/加载状态

agent-browser state save auth.json # 保存会话状态 agent-browser state load auth.json # 加载已保存的状态 agent-browser state clear # 清除所有已保存的状态

并行会话

agent-browser --session site1 open https://site-a.com agent-browser --session site2 open https://site-b.com agent-browser --session site1 click @e1 agent-browser --session site2 click @e2

常见模式与示例

模式 1：带验证的表单提交

bash
#!/bin/bash

submit-form.sh

set -e

导航到表单

agent-browser open https://example.com/signup

等待表单并获取快照

agent-browser wait @e1 --timeout 10000 agent-browser snapshot -i

填写表单字段

agent-browser fill @e1 John Doe # 姓名 agent-browser fill @e2 john@example.com # 邮箱 agent-browser fill @e3 SecurePass123! # 密码 agent-browser fill @e4 SecurePass123! # 确认密码

接受条款

agent-browser check @e5

提交

agent-browser click @e6

等待成功

agent-browser wait --text Welcome --timeout 15000

验证并捕获

agent-browser screenshot --output ./success.png echo 表单提交成功！

模式 2：带状态持久化的身份验证

bash
#!/bin/bash

auth-flow.sh

STATE_FILE=auth-state.json

检查是否有已保存的状态

if [ -f $STATE_FILE ]; then echo 加载已保存的身份验证状态... agent-browser state load $STATE_FILE agent-browser open https://app.example.com/dashboard

# 验证是否仍处于登录状态
if agent-browser wait --text Dashboard --timeout 5000

claw-browser-automationClaw浏览器自动化

claw-browser-automation

Agent-Browser Skill v2.0

Overview

Installation & Setup

Step 1: Install agent-browser

Step 2: Configure Chrome Path

Step 3: Verify Installation

Core Workflow

Complete Command Reference

Navigation Commands

Snapshot Commands

Interaction Commands

Wait Commands

Get Information

Capture Commands

Session Management

Common Patterns & Recipes

Pattern 1: Form Submission with Validation

Pattern 2: Authentication with State Persistence

Pattern 3: Data Extraction from Tables

Pattern 4: Multi-Page Pagination

Pattern 5: Visual Regression Testing

Pattern 6: API Testing via Browser DevTools

Error Handling & Troubleshooting

Common Errors and Solutions

Error: "No browser found"

Error: "Element not found @e1"

Error: "Navigation timeout"

Error: "Session already exists"

Debugging Tips

Best Practices

1. Always Wait for Elements

2. Use Specific Selectors

3. Handle Dynamic Content

4. Save Authentication State

5. Use Sessions for Parallel Work

6. Handle Rate Limiting

Advanced Features

Custom JavaScript Execution

File Upload

Dialog Handling

Cookie Management

Performance Optimization

1. Use Headless Mode for CI/CD

2. Limit Snapshot Depth

3. Reuse Sessions

4. Parallel Execution

Security Considerations

1. Never Hardcode Credentials

2. Clear Sensitive State

3. Use HTTPS Only

Dependencies

Testing Your Setup

License

Support

Agent-Browser 技能 v2.0

概述

安装与配置

步骤 1：安装 agent-browser

步骤 2：配置 Chrome 路径

添加到 ~/.zshrc 以持久化

或使用 Chromium

步骤 3：验证安装

核心工作流

1. 导航到 URL

2. 获取包含交互元素引用的快照

输出：@e1 [input type=email], @e2 [input type=password], @e3 [button] Submit

3. 使用引用进行交互

4. 等待并验证

完整命令参考

导航命令

打开 URL

导航控制

快照命令

基本快照

交互命令

点击操作

文本输入

选择操作