Vercel agent-browser 深度解析：AI 驱动浏览器自动化实践

3. 页面内容获取

获取文本、HTML、属性以及执行 JavaScript 都很方便。

# 获取文本内容
agent-browser get text "#title"

# 获取 HTML
agent-browser get html "#content"

# 获取属性
agent-browser get attr "#link" "href"

# 执行 JavaScript
agent-browser eval "document.title"

技术亮点

1. 性能优化

• Rust 核心：关键路径使用 Rust 实现，比纯 Node.js 方案快 3-5 倍
• 智能缓存：页面快照和元素引用会被缓存，减少重复计算
• 并行处理：支持同时操作多个浏览器实例

2. AI 集成友好特性

• 稳定的元素引用：即使页面动态变化，引用标记保持稳定
• 结构化快照：snapshot 命令输出 JSON 格式的可访问性树
• 自然语言支持：find role button click --name "Submit" 这样的自然语法

3. 调试与监控

开发过程中截图、生成 PDF 或分析性能都是常见需求。

# 截图
agent-browser screenshot --full page.png

# 生成 PDF
agent-browser pdf report.pdf

# 性能分析
agent-browser eval "performance.getEntries()"

使用场景

1. AI Agent 开发

在实际构建 AI Agent 时，我们可以利用 execSync 调用工具来控制浏览器。

// 伪代码示例：AI 控制的购物流程
const { execSync } = require('child_process');
execSync('agent-browser open amazon.com');
const snapshot = JSON.parse(execSync('agent-browser snapshot'));
const searchBox = snapshot.find(e => e.role === 'searchbox').ref;
execSync(`agent-browser fill ${searchBox} "wireless headphones"`);
execSync('agent-browser press "Enter"');
// ...更多 AI 决策和操作

2. 自动化测试

对于回归测试脚本，这种工具能显著降低维护成本。

#!/bin/bash
# 自动化测试脚本示例
agent-browser open "https://example.com/login"
agent-browser fill "#username" "testuser"
agent-browser fill "#password" "password123"
agent-browser click "#login"
agent-browser waitfor "#dashboard" # 等待元素出现
agent-browser screenshot "login-success.png"
agent-browser close

3. 数据抓取

结合 JS 执行能力，可以轻松提取结构化数据。

// 数据抓取示例
const products = JSON.parse(execSync('agent-browser eval "Array.from(document.querySelectorAll(\'.product\")).map(p => ({name: p.querySelector(\'.name\").textContent, price: p.querySelector(\'.price\").textContent}))"'));
console.log(products);

对比分析

踩坑记录

1. 元素引用失效：

   • 页面重大更新后引用可能失效
   • 解决方案：重新获取快照
   • 确保使用最新稳定版 Rust

2. Rust 编译问题：

   rustup update stable
   

3. Linux 依赖问题：

   # 解决方案
   agent-browser install --with-deps
   # 或手动安装
   npx playwright install-deps chromium
   

最佳实践

1. 会话管理：长时间运行的脚本定期检查浏览器状态，使用 try-catch 处理意外错误。
2. 性能优化：批量操作减少页面重绘，合理使用 waitfor 避免竞态条件。
3. AI 集成：优先使用引用标记而非 CSS 选择器，利用快照的语义化信息增强 AI 理解。

总结与展望

agent-browser 作为专为 AI 场景设计的浏览器自动化工具，在性能和易用性上都有出色表现。虽然目前仅支持 Chromium，但其独特的设计理念使其在 AI 集成方面具有明显优势。

使用建议：

• AI 项目：强烈推荐，引用标记系统是杀手级特性
• 传统自动化：根据需求评估，多浏览器支持场景可能需要 Playwright
• 性能敏感场景：Rust 核心带来明显优势

随着 AI Agent 的普及，agent-browser 这类专为 AI 优化的工具将会越来越重要。期待未来版本增加更多浏览器支持和更丰富的 AI 专用功能。