在AI Agent和自动化测试领域，浏览器自动化工具一直扮演着重要角色。Vercel Labs推出的agent-browser是一个专为AI Agent设计的浏览器自动化CLI工具，它结合了Rust的高性能和Node.js的灵活性，为开发者提供了全新的浏览器自动化解决方案。

项目特点

技术架构

• Rust核心：主要功能由Rust实现，提供高性能的底层操作
• Node.js封装：通过TypeScript提供友好的开发者接口
• 双模式支持：优先使用Rust实现，自动回退到Node.js版本

核心优势

• AI友好设计：独特的snapshot命令生成带引用标记的可访问性树
• 极简CLI：命令设计直观，易于集成到自动化流程
• 跨平台：支持Windows、macOS和Linux系统

安装指南

推荐安装方式（npm）

npm install -g agent-browser
agent-browser install  # 下载Chromium

这是最简单的安装方式，适合大多数用户。安装完成后会自动下载Chromium浏览器。

源码编译安装

git clone https://github.com/vercel-labs/agent-browser
cd agent-browser
pnpm install
pnpm build
pnpm build:native   # 需要Rust环境
pnpm link --global  # 全局安装
agent-browser install

源码安装适合需要自定义修改或希望使用最新特性的开发者，需要预先安装Rust工具链。

核心功能解析

1. 元素定位与操作

agent-browser提供了两种元素定位方式：

传统选择器方式：

agent-browser click "#submit"
agent-browser fill "#email" "test@example.com"

AI友好的引用标记方式：

agent-browser snapshot  # 获取带引用标记的可访问性树
agent-browser click @e2  # 通过引用标记点击元素

引用标记方式特别适合AI场景，AI可以记住元素引用而不需要理解复杂的CSS选择器。

2. 页面交互命令

# 基本交互
agent-browser open example.com
agent-browser hover "#menu"
agent-browser drag "#item" "#target"

# 表单操作
agent-browser fill "#name" "John Doe"
agent-browser select "#country" "US"
agent-browser check "#agree"

# 键盘操作
agent-browser press "Enter"
agent-browser keydown "Control"
agent-browser keyup "Control"

3. 页面内容获取

# 获取文本内容
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. 调试与监控

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

# 生成PDF
agent-browser pdf report.pdf

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

使用场景

1. AI Agent开发

// 伪代码示例：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. 数据抓取

// 数据抓取示例
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);

对比分析

特性	agent-browser	Puppeteer	Playwright
AI友好设计	✅ 优秀	❌ 一般	❌ 一般
性能	✅ 优秀(Rust)	⚠️ 中等	⚠️ 中等
安装复杂度	✅ 简单	⚠️ 中等	⚠️ 中等
跨浏览器支持	⚠️ Chromium	✅ 多浏览器	✅ 多浏览器
社区生态	⚠️ 新兴	✅ 成熟	✅ 成熟

踩坑记录

1. Linux依赖问题：

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

2. 元素引用失效：

   • 页面重大更新后引用可能失效
   • 解决方案：重新获取快照

3. Rust编译问题：

   • 确保使用最新稳定版Rust

   rustup update stable
   

最佳实践

1. 会话管理：

   • 长时间运行的脚本定期检查浏览器状态
   • 使用try-catch处理意外错误

2. 性能优化：

   • 批量操作减少页面重绘
   • 合理使用waitfor避免竞态条件

3. AI集成：

   • 优先使用引用标记而非CSS选择器
   • 利用快照的语义化信息增强AI理解

总结与展望

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

使用建议：

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

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