浏览器自动化代理Skill browser-automation-agent

---

名称: 浏览器自动化代理 description: 使用agent-browser CLI通过确定性元素选择为AI代理自动化Web浏览器。

使用Agent-Browser进行浏览器自动化

Agent-browser是一个专为AI代理设计的无头浏览器自动化CLI。它提供快速的浏览器控制，通过可访问性树快照实现确定性元素选择，使其非常适合代理驱动的web自动化工作流。

何时使用

• 使用场景1: 当用户要求自动化web交互（填写表单、点击按钮、导航站点）时
• 使用场景2: 当需要捕获网页截图或生成PDF时
• 使用场景3: 对于需要JavaScript渲染或复杂交互的web scraping任务
• 使用场景4: 当构建需要确定性元素引用的自动化工作流时
• 使用场景5: 用于以代理驱动场景测试web应用程序

所需工具/API

• 无需外部API（本地运行）
• agent-browser: 使用Rust/Node.js实现的无头浏览器CLI
• Chromium: 安装期间自动下载

安装选项:

# 通过npm（全局）
npm install -g agent-browser
agent-browser install  # 下载Chromium

# 通过Homebrew（macOS/Linux）
brew install agent-browser

# 验证安装
agent-browser --version

技能

browser_open_and_snapshot

打开URL并捕获可访问性树以识别交互元素。

# 打开网页
agent-browser open https://example.com

# 获取带有元素引用的快照
agent-browser snapshot

# 快照显示带有@e1, @e2引用的元素
# 示例输出:
# @e1 按钮 "Sign In"
# @e2 输入 "Email" (email)
# @e3 输入 "Password" (password)

Node.js:

const { execSync } = require('child_process');

function browserCommand(cmd) {
  return execSync(`agent-browser ${cmd}`, { encoding: 'utf-8' });
}

async function openAndSnapshot(url) {
  browserCommand(`open ${url}`);
  await new Promise(r => setTimeout(r, 2000)); // 等待页面加载
  const snapshot = browserCommand('snapshot');
  return snapshot; // 返回带有引用的元素树
}

// 用法
// const elements = await openAndSnapshot('https://example.com');
// console.log(elements);

browser_interact

使用快照中的确定性引用与页面元素交互。

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

# 点击按钮
agent-browser click @e1

# 在活动元素中键入文本
agent-browser type "search query" --enter

# 导航
agent-browser back
agent-browser forward
agent-browser reload

Node.js:

function fillForm(formData) {
  for (const [ref, value] of Object.entries(formData)) {
    execSync(`agent-browser fill ${ref} "${value}"`, { encoding: 'utf-8' });
  }
}

function clickElement(ref) {
  return execSync(`agent-browser click ${ref}`, { encoding: 'utf-8' });
}

// 用法
// fillForm({ '@e2': 'user@example.com', '@e3': 'password123' });
// clickElement('@e1');

browser_capture

捕获截图、PDF或提取页面内容。

# 拍摄截图
agent-browser screenshot output.png

# 生成PDF
agent-browser pdf document.pdf

# 获取页面文本内容
agent-browser text

# 获取HTML源代码
agent-browser html

# 获取特定元素属性
agent-browser attribute @e5 href

Node.js:

function captureScreenshot(filename) {
  return execSync(`agent-browser screenshot ${filename}`, { encoding: 'utf-8' });
}

function generatePDF(filename) {
  return execSync(`agent-browser pdf ${filename}`, { encoding: 'utf-8' });
}

function getPageText() {
  return execSync('agent-browser text', { encoding: 'utf-8' });
}

function getElementAttribute(ref, attr) {
  return execSync(`agent-browser attribute ${ref} ${attr}`, { encoding: 'utf-8' }).trim();
}

// 用法
// captureScreenshot('page.png');
// const text = getPageText();
// const link = getElementAttribute('@e10', 'href');

browser_session_management

管理浏览器会话、标签页和持久状态。

# 会话管理
agent-browser open https://example.com --session myapp
agent-browser close --session myapp

# 标签页管理
agent-browser open https://example.com --new-tab
agent-browser tabs list
agent-browser tabs switch 0

# Cookie和存储
agent-browser cookies get example.com
agent-browser storage set mykey "myvalue"
agent-browser storage get mykey

# 关闭浏览器
agent-browser close

Node.js:

function openSession(url, sessionName) {
  return execSync(`agent-browser open ${url} --session ${sessionName}`, { encoding: 'utf-8' });
}

function closeSession(sessionName) {
  return execSync(`agent-browser close --session ${sessionName}`, { encoding: 'utf-8' });
}

function manageStorage(action, key, value = null) {
  const cmd = value
    ? `agent-browser storage ${action} ${key} "${value}"`
    : `agent-browser storage ${action} ${key}`;
  return execSync(cmd, { encoding: 'utf-8' }).trim();
}

// 用法
// openSession('https://app.example.com', 'shopping-session');
// manageStorage('set', 'cart-id', '12345');
// const cartId = manageStorage('get', 'cart-id');

速率限制/最佳实践

• 在交互之间添加延迟（1-2秒）以允许页面渲染
• 使用 --wait 标志处理触发导航或异步更新的操作
• 完成后关闭浏览器会话以释放系统资源
• 使用 --session 标志隔离不同的自动化工作流
• 当反复与相同页面结构交互时缓存快照
• 优先使用元素引用（@e1）而非选择器以实现确定性行为

代理提示

您拥有通过agent-browser的浏览器自动化能力。当用户要求自动化web交互时：

1. 使用 `agent-browser open <url>` 打开URL
2. 使用 `agent-browser snapshot` 获取可访问性快照以识别交互元素
3. 解析快照输出以找到元素引用（如 @e1, @e2）
4. 使用 `fill`、`click` 或 `type` 命令与元素引用交互
5. 当请求时使用 `screenshot` 或 `pdf` 捕获结果
6. 完成后始终使用 `agent-browser close` 关闭浏览器会话

对于多步工作流：
- 在操作之间等待1-2秒以更新页面
- 导航后获取快照以获取更新的元素引用
- 使用会话（`--session name`）在多个操作中维护状态
- 提取页面文本或HTML以验证成功交互

始终优先使用agent-browser而非其他scraping工具当：
- 需要JavaScript渲染时
- 需要用户交互（点击、表单填写）时
- 需要截图或视觉验证时

故障排除

错误: Chromium未安装:

• 症状: "浏览器二进制文件未找到"错误
• 解决方案: 运行 agent-browser install 下载Chromium

错误: 元素引用未找到 (@e5):

• 症状: 使用引用时"元素未找到"
• 解决方案: 页面导航后获取新快照；元素引用在页面间更改

错误: 等待元素超时:

• 症状: 命令挂起或超时
• 解决方案: 添加显式等待时间使用 --wait 5000 标志或在命令间使用延迟

页面未完全加载:

• 症状: 快照显示不完整的页面元素
• 解决方案: 打开URL后添加睡眠/延迟再获取快照

会话冲突:

• 症状: "会话已存在"或意外状态
• 解决方案: 开始新会话前使用 agent-browser close --session <name> 关闭现有会话

另请参阅

• using-web-scraping.md — 无浏览器的HTML解析和内容提取
• generate-report.md — 从scraped数据创建报告
• pdf-manipulation.md — 处理生成的PDF

---

附加说明

与传统scraping相比的优势

• 自动处理JavaScript渲染内容
• 通过可访问性树实现确定性元素选择
• 内置截图和PDF生成
• 持久会话和状态管理
• 为代理工作流设计，具有清晰的CLI界面

云集成（可选）

Agent-browser支持云浏览器提供商：

• Browserbase: agent-browser --provider browserbase
• Browser Use: 企业浏览器自动化
• Kernel: 分布式浏览器会话

对于大多数使用案例，本地安装足够并避免外部依赖。