agent-browser

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

CLI 通过 CDP 直接使用 Chrome/Chromium。可通过 npm i -g agent-browser、brew install agent-browser 或 cargo install agent-browser 安装。运行 agent-browser install 下载 Chrome。运行 agent-browser upgrade 更新到最新版本。

核心工作流

每次浏览器自动化都遵循以下模式：

1. 导航：agent-browser open <url>
2. 快照：agent-browser snapshot -i（获取 @e1、@e2 等元素引用）
3. 交互：使用引用进行点击、填充和选择
4. 重新获取快照：导航或 DOM 发生变化后，获取新的引用

agent-browser open https://example.com/form
agent-browser snapshot -i
# Output: @e1 [input type="email"], @e2 [input type="password"], @e3 [button] "Submit"

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

命令串联

可在单次 shell 调用中使用 && 串联命令。浏览器通过后台守护进程在命令之间保持运行，因此串联命令既安全又比单独调用更高效。

# Chain open + wait + snapshot in one call
agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser snapshot -i

# Chain multiple interactions
agent-browser fill @e1 "[email protected]" && agent-browser fill @e2 "password123" && agent-browser click @e3

# Navigate and capture
agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser screenshot page.png

**何时串联：**如果不需要读取中间命令的输出再继续操作（例如，打开页面 + 等待 + 截图），请使用 &&。如果需要先解析输出（例如，通过快照发现引用，再使用这些引用进行交互），请单独运行命令。

处理身份验证

自动化需要登录的网站时，请选择适合的方式：

选项 1：从用户的浏览器导入身份验证信息（最适合一次性任务）

# Connect to the user's running Chrome (they're already logged in)
agent-browser --auto-connect state save ./auth.json
# Use that auth state
agent-browser --state ./auth.json open https://app.example.com/dashboard

状态文件以明文形式包含会话令牌——请将其添加到 .gitignore，并在不再需要时删除。设置 AGENT_BROWSER_ENCRYPTION_KEY 可启用静态加密。

选项 2：持久化配置文件（最适合重复任务）

# First run: login manually or via automation
agent-browser --profile ~/.myapp open https://app.example.com/login
# ... fill credentials, submit ...

# All future runs: already authenticated
agent-browser --profile ~/.myapp open https://app.example.com/dashboard

选项 3：会话名称（自动保存/恢复 Cookie 和 localStorage）

agent-browser --session-name myapp open https://app.example.com/login
# ... login flow ...
agent-browser close  # State auto-saved

# Next time: state auto-restored
agent-browser --session-name myapp open https://app.example.com/dashboard

选项 4：身份验证保险库（加密存储凭据，按名称登录）

echo "$PASSWORD" | agent-browser auth save myapp --url https://app.example.com/login --username user --password-stdin
agent-browser auth login myapp

auth login 使用 load 导航，然后等待登录表单选择器出现再进行填充/点击；对于加载延迟的 SPA 登录界面，这种方式更可靠。

选项 5：状态文件（手动保存/加载）

# After logging in:
agent-browser state save ./auth.json
# In a future session:
agent-browser state load ./auth.json
agent-browser open https://app.example.com/dashboard

有关 OAuth、2FA、基于 Cookie 的身份验证和令牌刷新模式，请参阅 references/authentication.md。

必备命令

# Navigation
agent-browser open <url>              # Navigate (aliases: goto, navigate)
agent-browser close                   # Close browser

# Snapshot
agent-browser snapshot -i             # Interactive elements with refs (recommended)
agent-browser snapshot -i -C          # Include cursor-interactive elements (divs with onclick, cursor:pointer)
agent-browser snapshot -s "#selector" # Scope to CSS selector

# Interaction (use @refs from snapshot)
agent-browser click @e1               # Click element
agent-browser click @e1 --new-tab     # Click and open in new tab
agent-browser fill @e2 "text"         # Clear and type text
agent-browser type @e2 "text"         # Type without clearing
agent-browser select @e1 "option"     # Select dropdown option
agent-browser check @e1               # Check checkbox
agent-browser press Enter             # Press key
agent-browser keyboard type "text"    # Type at current focus (no selector)
agent-browser keyboard inserttext "text"  # Insert without key events
agent-browser scroll down 500         # Scroll page
agent-browser scroll down 500 --selector "div.content"  # Scroll within a specific container

# Get information
agent-browser get text @e1            # Get element text
agent-browser get url                 # Get current URL
agent-browser get title               # Get page title
agent-browser get cdp-url             # Get CDP WebSocket URL

# Wait
agent-browser wait @e1                # Wait for element
agent-browser wait --load networkidle # Wait for network idle
agent-browser wait --url "**/page"    # Wait for URL pattern
agent-browser wait 2000               # Wait milliseconds
agent-browser wait --text "Welcome"    # Wait for text to appear (substring match)
agent-browser wait --fn "!document.body.innerText.includes('Loading...')"  # Wait for text to disappear
agent-browser wait "#spinner" --state hidden  # Wait for element to disappear

# Downloads
agent-browser download @e1 ./file.pdf          # Click element to trigger download
agent-browser wait --download ./output.zip     # Wait for any download to complete
agent-browser --download-path ./downloads open <url>  # Set default download directory

# Network
agent-browser network requests                 # Inspect tracked requests
agent-browser network route "**/api/*" --abort  # Block matching requests
agent-browser network har start                # Start HAR recording
agent-browser network har stop ./capture.har   # Stop and save HAR file

# Viewport & Device Emulation
agent-browser set viewport 1920 1080          # Set viewport size (default: 1280x720)
agent-browser set viewport 1920 1080 2        # 2x retina (same CSS size, higher res screenshots)
agent-browser set device "iPhone 14"          # Emulate device (viewport + user agent)

# Capture
agent-browser screenshot              # Screenshot to temp dir
agent-browser screenshot --full       # Full page screenshot
agent-browser screenshot --annotate   # Annotated screenshot with numbered element labels
agent-browser screenshot --screenshot-dir ./shots  # Save to custom directory
agent-browser screenshot --screenshot-format jpeg --screenshot-quality 80
agent-browser pdf output.pdf          # Save as PDF

# Clipboard
agent-browser clipboard read                      # Read text from clipboard
agent-browser clipboard write "Hello, World!"     # Write text to clipboard
agent-browser clipboard copy                      # Copy current selection
agent-browser clipboard paste                     # Paste from clipboard

# Diff (compare page states)
agent-browser diff snapshot                          # Compare current vs last snapshot
agent-browser diff snapshot --baseline before.txt    # Compare current vs saved file
agent-browser diff screenshot --baseline before.png  # Visual pixel diff
agent-browser diff url <url1> <url2>                 # Compare two pages
agent-browser diff url <url1> <url2> --wait-until networkidle  # Custom wait strategy
agent-browser diff url <url1> <url2> --selector "#main"  # Scope to element

批量执行

通过将由字符串数组组成的 JSON 数组传入 batch，即可在单次调用中执行多个命令。在运行多步工作流时，这可以避免每条命令的进程启动开销。

echo '[
  ["open", "https://example.com"],
  ["snapshot", "-i"],
  ["click", "@e1"],
  ["screenshot", "result.png"]
]' | agent-browser batch --json

# Stop on first error
agent-browser batch --bail < commands.json

如果有一系列已知且无需依赖中间输出的命令，请使用 batch。如果需要在步骤之间解析输出（例如，通过快照发现引用，再进行交互），请单独运行命令或使用 && 串联。

常见模式

提交表单

agent-browser open https://example.com/signup
agent-browser snapshot -i
agent-browser fill @e1 "Jane Doe"
agent-browser fill @e2 "[email protected]"
agent-browser select @e3 "California"
agent-browser check @e4
agent-browser click @e5
agent-browser wait --load networkidle

使用身份验证保险库进行身份验证（推荐）

# Save credentials once (encrypted with AGENT_BROWSER_ENCRYPTION_KEY)
# Recommended: pipe password via stdin to avoid shell history exposure
echo "pass" | agent-browser auth save github --url https://github.com/login --username user --password-stdin

# Login using saved profile (LLM never sees password)
agent-browser auth login github

# List/show/delete profiles
agent-browser auth list
agent-browser auth show github
agent-browser auth delete github

auth login 会等待用户名、密码和提交按钮选择器出现后再进行交互，并使用默认操作超时时间作为等待超时。

使用状态持久化进行身份验证

# Login once and save state
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

# Reuse in future sessions
agent-browser state load auth.json
agent-browser open https://app.example.com/dashboard

会话持久化

# Auto-save/restore cookies and localStorage across browser restarts
agent-browser --session-name myapp open https://app.example.com/login
# ... login flow ...
agent-browser close  # State auto-saved to ~/.agent-browser/sessions/

# Next time, state is auto-loaded
agent-browser --session-name myapp open https://app.example.com/dashboard

# Encrypt state at rest
export AGENT_BROWSER_ENCRYPTION_KEY=$(openssl rand -hex 32)
agent-browser --session-name secure open https://app.example.com

# Manage saved states
agent-browser state list
agent-browser state show myapp-default.json
agent-browser state clear myapp
agent-browser state clean --older-than 7

使用 iframe

iframe 内容会自动内联到快照中。iframe 内的引用带有框架上下文，因此可直接与其交互。

agent-browser open https://example.com/checkout
agent-browser snapshot -i
# @e1 [heading] "Checkout"
# @e2 [Iframe] "payment-frame"
#   @e3 [input] "Card number"
#   @e4 [input] "Expiry"
#   @e5 [button] "Pay"

# Interact directly — no frame switch needed
agent-browser fill @e3 "4111111111111111"
agent-browser fill @e4 "12/28"
agent-browser click @e5

# To scope a snapshot to one iframe:
agent-browser frame @e2
agent-browser snapshot -i         # Only iframe content
agent-browser frame main          # Return to main frame

数据提取

agent-browser open https://example.com/products
agent-browser snapshot -i
agent-browser get text @e5           # Get specific element text
agent-browser get text body > page.txt  # Get all page text

# JSON output for parsing
agent-browser snapshot -i --json
agent-browser get text @e1 --json

并行会话

agent-browser --session site1 open https://site-a.com
agent-browser --session site2 open https://site-b.com

agent-browser --session site1 snapshot -i
agent-browser --session site2 snapshot -i

agent-browser session list

连接到现有 Chrome

# Auto-discover running Chrome with remote debugging enabled
agent-browser --auto-connect open https://example.com
agent-browser --auto-connect snapshot

# Or with explicit CDP port
agent-browser --cdp 9222 snapshot

自动连接会通过 DevToolsActivePort 和常见调试端口（9222、9229）发现 Chrome；如果基于 HTTP 的 CDP 发现失败，则会回退到直接 WebSocket 连接。

配色方案（深色模式）

# Persistent dark mode via flag (applies to all pages and new tabs)
agent-browser --color-scheme dark open https://example.com

# Or via environment variable
AGENT_BROWSER_COLOR_SCHEME=dark agent-browser open https://example.com

# Or set during session (persists for subsequent commands)
agent-browser set media dark

视口与响应式测试

# Set a custom viewport size (default is 1280x720)
agent-browser set viewport 1920 1080
agent-browser screenshot desktop.png

# Test mobile-width layout
agent-browser set viewport 375 812
agent-browser screenshot mobile.png

# Retina/HiDPI: same CSS layout at 2x pixel density
# Screenshots stay at logical viewport size, but content renders at higher DPI
agent-browser set viewport 1920 1080 2
agent-browser screenshot retina.png

# Device emulation (sets viewport + user agent in one step)
agent-browser set device "iPhone 14"
agent-browser screenshot device.png

scale 参数（第 3 个参数）会设置 window.devicePixelRatio，且不会改变 CSS 布局。测试视网膜屏幕渲染或截取更高分辨率的屏幕截图时可使用此参数。

可视化浏览器（调试）

agent-browser --headed open https://example.com
agent-browser highlight @e1          # Highlight element
agent-browser inspect                # Open Chrome DevTools for the active page
agent-browser record start demo.webm # Record session
agent-browser profiler start         # Start Chrome DevTools profiling
agent-browser profiler stop trace.json # Stop and save profile (path optional)

使用环境变量 AGENT_BROWSER_HEADED=1 启用有头模式。浏览器扩展在有头和无头模式下均可使用。

本地文件（PDF、HTML）

# Open local files with file:// URLs
agent-browser --allow-file-access open file:///path/to/document.pdf
agent-browser --allow-file-access open file:///path/to/page.html
agent-browser screenshot output.png

iOS 模拟器（移动版 Safari）

# List available iOS simulators
agent-browser device list

# Launch Safari on a specific device
agent-browser -p ios --device "iPhone 16 Pro" open https://example.com

# Same workflow as desktop - snapshot, interact, re-snapshot
agent-browser -p ios snapshot -i
agent-browser -p ios tap @e1          # Tap (alias for click)
agent-browser -p ios fill @e2 "text"
agent-browser -p ios swipe up         # Mobile-specific gesture

# Take screenshot
agent-browser -p ios screenshot mobile.png

# Close session (shuts down simulator)
agent-browser -p ios close

要求： macOS 和 Xcode、Appium（npm install -g appium && appium driver install xcuitest）

真机： 预先配置后，可在实体 iOS 设备上运行。使用 --device "<UDID>"，其中 UDID 可通过 xcrun xctrace list devices 获取。

安全性

所有安全功能均为可选项。默认情况下，agent-browser 不会限制导航、操作或输出。

内容边界（推荐用于 AI Agent）

启用 --content-boundaries，将页面来源的输出包裹在标记中，帮助大模型区分工具输出与不可信的页面内容：

export AGENT_BROWSER_CONTENT_BOUNDARIES=1
agent-browser snapshot
# Output:
# --- AGENT_BROWSER_PAGE_CONTENT nonce=<hex> origin=https://example.com ---
# [accessibility tree]
# --- END_AGENT_BROWSER_PAGE_CONTENT nonce=<hex> ---

域名允许列表

将导航限制在受信任的域名内。*.example.com 这样的通配符也会匹配裸域名 example.com。发往非允许域名的子资源请求、WebSocket 和 EventSource 连接也会被阻止。请将目标页面依赖的 CDN 域名加入列表：

export AGENT_BROWSER_ALLOWED_DOMAINS="example.com,*.example.com"
agent-browser open https://example.com        # OK
agent-browser open https://malicious.com       # Blocked

操作策略

使用策略文件限制破坏性操作：

export AGENT_BROWSER_ACTION_POLICY=./policy.json

policy.json 示例：

{ "default": "deny", "allow": ["navigate", "snapshot", "click", "scroll", "wait", "get"] }

身份验证保险库操作（auth login 等）不受操作策略限制，但仍受域名允许列表约束。

输出限制

防止大型页面导致上下文溢出：

export AGENT_BROWSER_MAX_OUTPUT=50000

差异比较（验证更改）

执行操作后，使用 diff snapshot 验证操作是否达到预期效果。该命令会将当前无障碍树与本会话中上一次生成的快照进行比较。

# Typical workflow: snapshot -> action -> diff
agent-browser snapshot -i          # Take baseline snapshot
agent-browser click @e2            # Perform action
agent-browser diff snapshot        # See what changed (auto-compares to last snapshot)

用于视觉回归测试或监控：

# Save a baseline screenshot, then compare later
agent-browser screenshot baseline.png
# ... time passes or changes are made ...
agent-browser diff screenshot --baseline baseline.png

# Compare staging vs production
agent-browser diff url https://staging.example.com https://prod.example.com --screenshot

diff snapshot 输出使用 + 表示新增，使用 - 表示移除，类似于 git diff。diff screenshot 会生成差异图像，以红色突出显示像素变化，并显示不匹配百分比。

超时与加载缓慢的页面

默认超时时间为 25 秒。可通过 AGENT_BROWSER_DEFAULT_TIMEOUT 环境变量（值以毫秒为单位）进行调整。对于加载缓慢的网站或大型页面，请使用显式等待，而不要依赖默认超时：

# Wait for network activity to settle (best for slow pages)
agent-browser wait --load networkidle

# Wait for a specific element to appear
agent-browser wait "#content"
agent-browser wait @e1

# Wait for a specific URL pattern (useful after redirects)
agent-browser wait --url "**/dashboard"

# Wait for a JavaScript condition
agent-browser wait --fn "document.readyState === 'complete'"

# Wait a fixed duration (milliseconds) as a last resort
agent-browser wait 5000

对于始终加载缓慢的网站，在 open 后使用 wait --load networkidle，确保页面完全加载后再生成快照。如果特定元素渲染缓慢，可使用 wait <selector> 或 wait @ref 直接等待该元素。

会话管理与清理

同时运行多个 Agent 或自动化任务时，请始终使用命名会话以避免冲突：

# Each agent gets its own isolated session
agent-browser --session agent1 open site-a.com
agent-browser --session agent2 open site-b.com

# Check active sessions
agent-browser session list

完成后务必关闭浏览器会话，以免遗留进程：

agent-browser close                    # Close default session
agent-browser --session agent1 close   # Close specific session

如果上一个会话未正常关闭，守护进程可能仍在运行。开始新任务前，使用 agent-browser close 清理。

若要在一段时间无操作后自动关闭守护进程（适用于临时环境或 CI 环境）：

AGENT_BROWSER_IDLE_TIMEOUT_MS=60000 agent-browser open example.com

Ref 生命周期（重要）

页面发生变化时，Refs（@e1、@e2 等）会失效。以下操作后务必重新生成快照：

• 点击会触发导航的链接或按钮
• 提交表单
• 动态内容加载（下拉菜单、模态框）

agent-browser click @e5              # Navigates to new page
agent-browser snapshot -i            # MUST re-snapshot
agent-browser click @e1              # Use new refs

注释截图（视觉模式）

使用 --annotate 截取带编号标签的截图，标签会叠加在交互元素上。每个标签 [N] 对应 ref @eN。此功能还会缓存 refs，因此无需单独生成快照即可立即与元素交互。

agent-browser screenshot --annotate
# Output includes the image path and a legend:
#   [1] @e1 button "Submit"
#   [2] @e2 link "Home"
#   [3] @e3 textbox "Email"
agent-browser click @e2              # Click using ref from annotated screenshot

以下情况适合使用注释截图：

• 页面包含未标注的图标按钮或纯视觉元素
• 需要验证视觉布局或样式
• 页面中包含 Canvas 或图表元素（文本快照无法显示）
• 需要根据元素位置进行空间推理

语义定位器（Refs 的替代方案）

Refs 不可用或不可靠时，请使用语义定位器：

agent-browser find text "Sign In" click
agent-browser find label "Email" fill "[email protected]"
agent-browser find role button click --name "Submit"
agent-browser find placeholder "Search" type "query"
agent-browser find testid "submit-btn" click

JavaScript 求值（eval）

使用 eval 在浏览器上下文中运行 JavaScript。Shell 引号可能会破坏复杂表达式——使用 --stdin 或 -b 来避免此问题。

# Simple expressions work with regular quoting
agent-browser eval 'document.title'
agent-browser eval 'document.querySelectorAll("img").length'

# Complex JS: use --stdin with heredoc (RECOMMENDED)
agent-browser eval --stdin <<'EVALEOF'
JSON.stringify(
  Array.from(document.querySelectorAll("img"))
    .filter(i => !i.alt)
    .map(i => ({ src: i.src.split("/").pop(), width: i.width }))
)
EVALEOF

# Alternative: base64 encoding (avoids all shell escaping issues)
agent-browser eval -b "$(echo -n 'Array.from(document.querySelectorAll("a")).map(a => a.href)' | base64)"

**为什么这很重要：**Shell 处理命令时，内部双引号、! 字符（历史记录扩展）、反引号和 $() 都可能在 JavaScript 到达 agent-browser 之前将其破坏。--stdin 和 -b 标志可完全绕过 Shell 解析。

经验法则：

• 单行且没有嵌套引号 -> 使用常规的单引号 eval 'expression' 即可
• 嵌套引号、箭头函数、模板字面量或多行内容 -> 使用 eval --stdin <<'EVALEOF'
• 程序化生成的脚本 -> 使用 eval -b 并搭配 base64

配置文件

在项目根目录中创建 agent-browser.json，以保存持久设置：

{
  "headed": true,
  "proxy": "http://localhost:8080",
  "profile": "./browser-data"
}

优先级（从低到高）：~/.agent-browser/config.json < ./agent-browser.json < 环境变量 < CLI 标志。使用 --config <path> 或 AGENT_BROWSER_CONFIG 环境变量指定自定义配置文件（文件缺失或无效时会报错退出）。所有 CLI 选项都会映射为 camelCase 键（例如，--executable-path -> "executablePath"）。布尔标志接受 true/false 值（例如，--headed false 会覆盖配置）。用户配置和项目配置中的扩展会合并，而非相互替换。

深入文档

参考文档	使用场景
references/commands.md	完整的命令参考，包含所有选项
references/snapshot-refs.md	Ref 生命周期、失效规则、故障排除
references/session-management.md	并行会话、状态持久化、并发抓取
references/authentication.md	登录流程、OAuth、2FA 处理、状态复用
references/video-recording.md	用于调试和文档编写的录制工作流
references/profiling.md	用于性能分析的 Chrome DevTools 性能分析
references/proxy-support.md	代理配置、地理位置测试、轮换代理

浏览器引擎选择

使用 --engine 选择本地浏览器引擎。默认值为 chrome。

# Use Lightpanda (fast headless browser, requires separate install)
agent-browser --engine lightpanda open example.com

# Via environment variable
export AGENT_BROWSER_ENGINE=lightpanda
agent-browser open example.com

# With custom binary path
agent-browser --engine lightpanda --executable-path /path/to/lightpanda open example.com

支持的引擎：

• chrome（默认）-- 通过 CDP 使用 Chrome/Chromium
• lightpanda -- 通过 CDP 使用 Lightpanda 无头浏览器（速度快 10 倍，内存占用比 Chrome 少 10 倍）

Lightpanda 不支持 --extension、--profile、--state 或 --allow-file-access。请从 https://lightpanda.io/docs/open-source/installation 安装 Lightpanda。

可直接使用的模板

模板	描述
templates/form-automation.sh	填写表单并进行验证
templates/authenticated-session.sh	登录一次，复用状态
templates/capture-workflow.sh	提取内容并截取屏幕截图

./templates/form-automation.sh https://example.com/form
./templates/authenticated-session.sh https://app.example.com/login
./templates/capture-workflow.sh https://example.com ./output