Agent Browser

# 使用 agent-browser 进行浏览器自动化

## 安装

### 推荐 npm

```bash npm install -g agent-browser agent-browser install agent-browser install --with-deps ```

### 从源码安装

```bash git clone https://github.com/vercel-labs/agent-browser cd agent-browser pnpm install pnpm build agent-browser install ```

## 快速开始

```bash agent-browser open <url> # Navigate to page agent-browser snapshot -i # Get interactive elements with refs agent-browser click @e1 # Click element by ref agent-browser fill @e2 "text" # Fill input by ref agent-browser close # Close browser ```

## 核心工作流

1. 导航：`agent-browser open <url>` 2. 快照：`agent-browser snapshot -i` （返回带有 `@e1`、`@e2` 等引用的元素） 3. 使用快照中的引用进行交互 4. 在导航或 DOM 发生重大变化后重新快照

## 命令

### 导航

```bash agent-browser open <url> # Navigate to URL agent-browser back # Go back agent-browser forward # Go forward agent-browser reload # Reload page agent-browser close # Close browser ```

### 快照（页面分析）

```bash agent-browser snapshot # Full accessibility tree agent-browser snapshot -i # Interactive elements only (recommended) agent-browser snapshot -c # Compact output agent-browser snapshot -d 3 # Limit depth to 3 agent-browser snapshot -s "#main" # Scope to CSS selector ```

### 交互（使用快照中的 @refs）

```bash agent-browser click @e1 # Click agent-browser dblclick @e1 # Double-click agent-browser focus @e1 # Focus element agent-browser fill @e2 "text" # Clear and type agent-browser type @e2 "text" # Type without clearing agent-browser press Enter # Press key agent-browser press Control+a # Key combination agent-browser keydown Shift # Hold key down agent-browser keyup Shift # Release key agent-browser hover @e1 # Hover agent-browser check @e1 # Check checkbox agent-browser uncheck @e1 # Uncheck checkbox agent-browser select @e1 "value" # Select dropdown agent-browser scroll down 500 # Scroll page agent-browser scrollintoview @e1 # Scroll element into view agent-browser drag @e1 @e2 # Drag and drop agent-browser upload @e1 file.pdf # Upload files ```

### 获取信息

```bash agent-browser get text @e1 # Get element text agent-browser get html @e1 # Get innerHTML agent-browser get value @e1 # Get input value agent-browser get attr @e1 href # Get attribute agent-browser get title # Get page title agent-browser get url # Get current URL agent-browser get count ".item" # Count matching elements agent-browser get box @e1 # Get bounding box ```

### 检查状态

```bash agent-browser is visible @e1 # Check if visible agent-browser is enabled @e1 # Check if enabled agent-browser is checked @e1 # Check if checked ```

### 截图与 PDF

```bash agent-browser screenshot # Screenshot to stdout agent-browser screenshot path.png # Save to file agent-browser screenshot --full # Full page agent-browser pdf output.pdf # Save as PDF ```

### 视频录制

```bash agent-browser record start ./demo.webm # Start recording (uses current URL + state) agent-browser click @e1 # Perform actions agent-browser record stop # Stop and save video agent-browser record restart ./take2.webm # Stop current + start new recording ```

录制会创建一个新的上下文，但会保留会话中的 Cookie/存储。如果未提供 URL，它将自动返回到当前页面。为了获得流畅的演示，请先进行探索，然后开始录制。

### 等待

```bash agent-browser wait @e1 # Wait for element agent-browser wait 2000 # Wait milliseconds agent-browser wait --text "Success" # Wait for text agent-browser wait --url "/dashboard" # Wait for URL pattern agent-browser wait --load networkidle # Wait for network idle agent-browser wait --fn "window.ready" # Wait for JS condition ```

### 鼠标控制

```bash agent-browser mouse move 100 200 # Move mouse agent-browser mouse down left # Press button agent-browser mouse up left # Release button agent-browser mouse wheel 100 # Scroll wheel ```

### 语义定位器（引用的替代方案）

```bash agent-browser find role button click --name "Submit" agent-browser find text "Sign In" click agent-browser find label "Email" fill "[email protected]" agent-browser find first ".item" click agent-browser find nth 2 "a" text ```

### 浏览器设置

```bash agent-browser set viewport 1920 1080 # Set viewport size agent-browser set device "iPhone 14" # Emulate device agent-browser set geo 37.7749 -122.4194 # Set geolocation agent-browser set offline on # Toggle offline mode agent-browser set headers '{"X-Key":"v"}' # Extra HTTP headers agent-browser set credentials user pass # HTTP basic auth agent-browser set media dark # Emulate color scheme ```

### Cookies 与存储

```bash agent-browser cookies # Get all cookies agent-browser cookies set name value # Set cookie agent-browser cookies clear # Clear cookies agent-browser storage local # Get all localStorage agent-browser storage local key # Get specific key agent-browser storage local set k v # Set value agent-browser storage local clear # Clear all ```

### 网络

```bash agent-browser network route <url> # Intercept requests agent-browser network route <url> --abort # Block requests agent-browser network route <url> --body '{}' # Mock response agent-browser network unroute [url] # Remove routes agent-browser network requests # View tracked requests agent-browser network requests --filter api # Filter requests ```

### 标签页与窗口

```bash agent-browser tab # List tabs agent-browser tab new [url] # New tab agent-browser tab 2 # Switch to tab agent-browser tab close # Close tab agent-browser window new # New window ```

### 框架

```bash agent-browser frame "#iframe" # Switch to iframe agent-browser frame main # Back to main frame ```

### 对话框

```bash agent-browser dialog accept [text] # Accept dialog agent-browser dialog dismiss # Dismiss dialog ```

### JavaScript

```bash agent-browser eval "document.title" # Run JavaScript ```

### 状态管理

```bash agent-browser state save auth.json # Save session state agent-browser state load auth.json # Load saved state ```

## 示例：表单提交

```bash agent-browser open https://example.com/form agent-browser snapshot -i # Output shows: textbox "Email" [ref=e1], textbox "Password" [ref=e2], button "Submit" [ref=e3]

agent-browser fill @e1 "[email protected]" agent-browser fill @e2 "password123" agent-browser click @e3 agent-browser wait --load networkidle agent-browser snapshot -i # Check result ```

## 示例：使用保存的状态进行身份验证

```bash # Login once agent-browser open https://app.example.com/login agent-browser snapshot -i agent-browser fill @e1 "username" agent-browser fill @e2 "password" agent-browser click @e3 agent-browser wait --url "/dashboard" agent-browser state save auth.json

# Later sessions: load saved state agent-browser state load auth.json agent-browser open https://app.example.com/dashboard ```

## 会话（并行浏览器）

```bash agent-browser --session test1 open site-a.com agent-browser --session test2 open site-b.com agent-browser session list ```

## JSON 输出（用于解析）

添加 `--json` 以获取机器可读的输出：

```bash agent-browser snapshot -i --json agent-browser get text @e1 --json ```

## 调试

```bash agent-browser open example.com --headed # Show browser window agent-browser console # View console messages agent-browser console --clear # Clear console agent-browser errors # View page errors agent-browser errors --clear # Clear errors agent-browser highlight @e1 # Highlight element agent-browser trace start # Start recording trace agent-browser trace stop trace.zip # Stop and save trace agent-browser record start ./debug.webm # Record from current page agent-browser record stop # Save recording agent-browser --cdp 9222 snapshot # Connect via CDP ```

## 故障排除

- 如果在 Linux ARM64 上找不到该命令，请使用 bin 文件夹中的完整路径。 - 如果找不到元素，请使用快照查找正确的引用。 - 如果页面未加载，请在导航后添加等待命令。 - 使用 --headed 查看浏览器窗口以进行调试。

## 选项

- --session <name> 使用隔离的会话。 - --json 提供 JSON 输出。 - --full 截取整个页面的截图。 - --headed 显示浏览器窗口。 - --timeout 以毫秒为单位设置命令超时。 - --cdp <port> 通过 Chrome DevTools Protocol 连接。

## 注意事项

- 引用对每次页面加载是稳定的，但在导航时会改变。 - 导航后务必进行快照以获取新的引用。 - 对于输入字段，请使用 fill 而不是 type 以确保清除现有文本。

## 报告问题

- 技能问题：在 https://github.com/TheSethRose/Agent-Browser-CLI 提交 issue - agent-browser CLI 问题：在 https://github.com/vercel-labs/agent-browser 提交 issue