browser-automation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Browser Automation with agent-browser

使用agent-browser实现浏览器自动化

Headless browser CLI by Vercel. Full upstream docs: github.com/vercel-labs/agent-browser

Vercel推出的无头浏览器CLI。完整上游文档：github.com/vercel-labs/agent-browser

Installation

安装

bash

npm install -g agent-browser
agent-browser install                # Download Chromium
agent-browser install --with-deps    # With system dependencies (Linux)

bash

npm install -g agent-browser
agent-browser install                # 下载Chromium
agent-browser install --with-deps    # 安装包含系统依赖的版本（Linux）

Optional: npx skills add vercel-labs/agent-browser

可选操作：npx skills add vercel-labs/agent-browser

undefined

undefined

Quick Start

快速开始

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

bash

agent-browser open <url>          # 导航至指定URL
agent-browser snapshot -i         # 获取带引用标记的可交互元素
agent-browser click @e1           # 通过引用标记点击元素
agent-browser fill @e2 "text"     # 通过引用标记填充输入框
agent-browser close               # 关闭浏览器

Core Concept: Snapshot + Refs

核心概念：Snapshot + Refs

Run

agent-browser snapshot -i

to get interactive elements tagged

@e1

@e2

, etc. Use these refs for all subsequent interactions. Re-snapshot after navigation or significant DOM changes. This yields 93% less context than full-DOM approaches.

运行

agent-browser snapshot -i

命令，获取标记为

@e1

、

@e2

等的可交互元素。后续所有交互操作都使用这些引用。在页面导航或DOM发生重大变化后，重新执行快照操作。与全DOM方案相比，这种方式的上下文数据减少93%。

When to Use

适用场景

Web scraping from JS-rendered / SPA pages
Form automation and multi-step workflows
Screenshot capture and visual verification
E2E test generation and debugging
Content capture from authenticated pages

从JS渲染/SPA页面爬取网页内容
表单自动化与多步骤工作流
截图捕获与视觉验证
E2E测试生成与调试
从已认证页面捕获内容

Key Commands

核心命令

Command	Purpose
`open <url>`	Navigate to URL
`snapshot -i`	Interactive elements with refs
`click @e1`	Click element
`fill @e2 "text"`	Clear + type into input
`get text @e1`	Extract element text
`wait --load networkidle`	Wait for SPA render
`screenshot <path>`	Save screenshot
`state save <file>`	Persist cookies/storage
`state load <file>`	Restore session
`eval "js"`	Run JavaScript
`record start <path>`	Start video recording
`record stop`	Stop recording
`--session <name>`	Isolate parallel sessions
`--headed`	Show browser window

Run

agent-browser --help

for the full 60+ command reference.

命令	用途
`open <url>`	导航至指定URL
`snapshot -i`	获取带引用标记的可交互元素
`click @e1`	点击指定元素
`fill @e2 "text"`	清空并输入内容到指定输入框
`get text @e1`	提取元素文本内容
`wait --load networkidle`	等待SPA页面渲染完成
`screenshot <path>`	保存截图至指定路径
`state save <file>`	持久化保存Cookie与存储数据
`state load <file>`	恢复之前的会话状态
`eval "js"`	执行JavaScript代码
`record start <path>`	开始录制视频
`record stop`	停止录制视频
`--session <name>`	隔离并行会话
`--headed`	显示浏览器窗口

运行

agent-browser --help

查看全部60+命令的参考文档。

OrchestKit Integration

OrchestKit集成

Safety hook —

agent-browser-safety.ts

blocks destructive patterns (credential exfil, recursive spawning) automatically via pretool hook.

Sessions — Use

--session <name>

to run isolated parallel browsers within a single Claude Code session.

Environment variables:

bash

AGENT_BROWSER_SESSION="my-session"   # Default session name
AGENT_BROWSER_PROFILE="/path"        # Persistent browser profile
AGENT_BROWSER_PROVIDER="browserbase" # Cloud provider (browserbase | kernel | browseruse)
AGENT_BROWSER_HEADED=1               # Run headed

安全钩子 —

agent-browser-safety.ts

通过预工具钩子自动阻止破坏性操作（如凭证泄露、递归生成进程）。

会话管理 — 使用

--session <name>

参数可在单个Claude Code会话中运行相互隔离的并行浏览器实例。

环境变量：

bash

AGENT_BROWSER_SESSION="my-session"   # 默认会话名称
AGENT_BROWSER_PROFILE="/path"        # 持久化浏览器配置文件路径
AGENT_BROWSER_PROVIDER="browserbase" # 云服务商（browserbase | kernel | browseruse）
AGENT_BROWSER_HEADED=1               # 以有头模式运行

Upstream Documentation

上游文档

GitHub: vercel-labs/agent-browser
CLI help:
```
agent-browser --help
```

Skills add:

npx skills add vercel-labs/agent-browser

GitHub仓库： vercel-labs/agent-browser
CLI帮助：
```
agent-browser --help
```

添加技能：

npx skills add vercel-labs/agent-browser

browser-automation

Original

Translation

Browser Automation with agent-browser

使用agent-browser实现浏览器自动化

Installation

安装

Optional: npx skills add vercel-labs/agent-browser

可选操作：npx skills add vercel-labs/agent-browser

Quick Start

快速开始

Core Concept: Snapshot + Refs

核心概念：Snapshot + Refs

When to Use

适用场景

Key Commands

核心命令

OrchestKit Integration

OrchestKit集成

Upstream Documentation

上游文档

Related Skills

相关技能