agent-browser

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用此 skill

Use this skill whenever the user wants to:

Automate browser interactions via CLI commands
Use browser automation for AI agents
Navigate websites and interact with pages using command-line tools
Use refs-based element selection for deterministic automation
Integrate browser automation into AI agent workflows
Capture snapshots of web pages with accessibility trees
Fill forms, click elements, and extract content via CLI
Use semantic locators for more reliable element selection
Work with browser automation in agent mode with JSON output
Manage multiple browser sessions
Debug browser automation with headed mode
Use authenticated sessions with custom headers
Connect to existing browsers via CDP
Stream browser viewport for live preview

当用户希望执行以下操作时，使用此 skill：

通过 CLI 命令自动化浏览器交互
为 AI Agent 使用浏览器自动化
使用命令行工具浏览网站并与页面交互
使用基于 refs 的元素选择实现确定性自动化
将浏览器自动化集成到 AI Agent 工作流中
使用可访问性树获取网页 snapshot
通过 CLI 填写表单、点击元素和提取内容
使用语义定位器更可靠地选择元素
在 Agent 模式下使用 JSON 输出进行浏览器自动化
管理多个浏览器会话
使用有界面模式调试浏览器自动化
使用带有自定义标头的已认证会话
通过 CDP 连接现有浏览器
流式传输浏览器视口以进行实时预览

How to use this skill

如何使用此 skill

This skill is organized to match the agent-browser official documentation structure (https://github.com/vercel-labs/agent-browser/blob/main/README.md). When working with agent-browser:

Install agent-browser:
- Load
```
examples/getting-started/installation.md
```
  for installation instructions
Quick Start:
- Load
```
examples/quick-start/quick-start.md
```
  for basic workflow examples
Learn core commands:
- Load
```
examples/commands/basic-commands.md
```
  for basic commands (open, click, fill, etc.)
- Load
```
examples/commands/advanced-commands.md
```
  for advanced commands (snapshot, eval, etc.)
- Load
```
examples/commands/get-info/
```
  for information retrieval commands
- Load
```
examples/commands/check-state/
```
  for state checking commands
- Load
```
examples/commands/find-elements/
```
  for semantic locator commands
- Load
```
examples/commands/wait/
```
  for wait commands
- Load
```
examples/commands/mouse-control/
```
  for mouse control commands
- Load
```
examples/commands/browser-settings/
```
  for browser configuration
- Load
```
examples/commands/cookies-storage/
```
  for cookies and storage management
- Load
```
examples/commands/network/
```
  for network interception
- Load
```
examples/commands/tabs-windows/
```
  for tab and window management
- Load
```
examples/commands/frames/
```
  for iframe handling
- Load
```
examples/commands/dialogs/
```
  for dialog handling
- Load
```
examples/commands/debug/
```
  for debugging commands
- Load
```
examples/commands/navigation/
```
  for navigation commands
- Load
```
examples/commands/setup/
```
  for setup commands
Understand selectors:
- Load
```
examples/selectors/refs.md
```
  for refs-based selection (@e1, @e2, etc.)
- Load
```
examples/selectors/traditional-selectors.md
```
  for CSS, XPath, and semantic locators

Use agent mode:

Load
```
examples/agent-mode/introduction.md
```
for agent mode overview
Load
```
examples/agent-mode/optimal-workflow.md
```
for optimal AI workflow
Load
```
examples/agent-mode/integration.md
```
for integrating with AI agents

Advanced features:
- Load
```
examples/advanced/sessions.md
```
  for session management
- Load
```
examples/advanced/headed-mode.md
```
  for debugging with visible browser
- Load
```
examples/advanced/authenticated-sessions.md
```
  for authentication via headers
- Load
```
examples/advanced/custom-executable.md
```
  for custom browser executable
- Load
```
examples/advanced/cdp-mode.md
```
  for Chrome DevTools Protocol integration
- Load
```
examples/advanced/streaming.md
```
  for browser viewport streaming
- Load
```
examples/advanced/architecture.md
```
  for architecture overview
- Load
```
examples/advanced/platforms.md
```
  for platform support
- Load
```
examples/advanced/usage-with-agents.md
```
  for AI agent integration patterns
Configure options:
- Load
```
examples/options/global-options.md
```
  for global CLI options
- Load
```
examples/options/snapshot-options.md
```
  for snapshot-specific options
- Load
```
examples/options/session-options.md
```
  for session management options
Reference API documentation when needed:
- ```
api/commands.md
```
  - Complete command reference
- ```
api/selectors.md
```
  - Selector reference
- ```
api/options.md
```
  - Options reference
Use templates for quick start:
- ```
templates/basic-automation.md
```
  - Basic automation workflow
- ```
templates/ai-agent-workflow.md
```
  - AI agent workflow template

此 skill 的组织结构与 agent-browser 官方文档结构保持一致（https://github.com/vercel-labs/agent-browser/blob/main/README.md）。使用 agent-browser 时：

安装 agent-browser：
- 加载
```
examples/getting-started/installation.md
```
  获取安装说明
快速开始：
- 加载
```
examples/quick-start/quick-start.md
```
  获取基本工作流示例
学习核心命令：
- 加载
```
examples/commands/basic-commands.md
```
  获取基本命令（open、click、fill 等）
- 加载
```
examples/commands/advanced-commands.md
```
  获取高级命令（snapshot、eval 等）
- 加载
```
examples/commands/get-info/
```
  获取信息检索命令
- 加载
```
examples/commands/check-state/
```
  获取状态检查命令
- 加载
```
examples/commands/find-elements/
```
  获取语义定位器命令
- 加载
```
examples/commands/wait/
```
  获取等待命令
- 加载
```
examples/commands/mouse-control/
```
  获取鼠标控制命令
- 加载
```
examples/commands/browser-settings/
```
  获取浏览器配置
- 加载
```
examples/commands/cookies-storage/
```
  获取 Cookie 和存储管理命令
- 加载
```
examples/commands/network/
```
  获取网络拦截命令
- 加载
```
examples/commands/tabs-windows/
```
  获取标签页和窗口管理命令
- 加载
```
examples/commands/frames/
```
  获取 iframe 处理命令
- 加载
```
examples/commands/dialogs/
```
  获取对话框处理命令
- 加载
```
examples/commands/debug/
```
  获取调试命令
- 加载
```
examples/commands/navigation/
```
  获取导航命令
- 加载
```
examples/commands/setup/
```
  获取设置命令
理解选择器：
- 加载
```
examples/selectors/refs.md
```
  了解基于 refs 的选择方式（@e1、@e2 等）
- 加载
```
examples/selectors/traditional-selectors.md
```
  了解 CSS、XPath 和语义定位器
使用 Agent 模式：
- 加载
```
examples/agent-mode/introduction.md
```
  了解 Agent 模式概述
- 加载
```
examples/agent-mode/optimal-workflow.md
```
  了解最佳 AI 工作流
- 加载
```
examples/agent-mode/integration.md
```
  了解如何与 AI Agent 集成
高级功能：
- 加载
```
examples/advanced/sessions.md
```
  了解会话管理
- 加载
```
examples/advanced/headed-mode.md
```
  了解如何通过可见浏览器进行调试
- 加载
```
examples/advanced/authenticated-sessions.md
```
  了解如何通过标头进行身份认证
- 加载
```
examples/advanced/custom-executable.md
```
  了解自定义浏览器可执行文件
- 加载
```
examples/advanced/cdp-mode.md
```
  了解 Chrome DevTools Protocol 集成
- 加载
```
examples/advanced/streaming.md
```
  了解浏览器视口流式传输
- 加载
```
examples/advanced/architecture.md
```
  了解架构概述
- 加载
```
examples/advanced/platforms.md
```
  了解平台支持
- 加载
```
examples/advanced/usage-with-agents.md
```
  了解 AI Agent 集成模式
配置选项：
- 加载
```
examples/options/global-options.md
```
  获取全局 CLI 选项
- 加载
```
examples/options/snapshot-options.md
```
  获取 snapshot 专用选项
- 加载
```
examples/options/session-options.md
```
  获取会话管理选项
按需参考 API 文档：
- ```
api/commands.md
```
  - 完整命令参考
- ```
api/selectors.md
```
  - 选择器参考
- ```
api/options.md
```
  - 选项参考
使用模板快速开始：
- ```
templates/basic-automation.md
```
  - 基本自动化工作流
- ```
templates/ai-agent-workflow.md
```
  - AI Agent 工作流模板

Doc mapping (one-to-one with official documentation)

文档映射（与官方文档一一对应）

See examples and API files → https://github.com/vercel-labs/agent-browser

查看示例和 API 文件 → https://github.com/vercel-labs/agent-browser

Examples and Templates

示例与模板

This skill includes detailed examples organized to match the official documentation structure. All examples are in the

examples/

directory (see mapping above).

To use examples:

Identify the topic from the user's request
Load the appropriate example file from the mapping above
Follow the instructions, syntax, and best practices in that file
Adapt the code examples to your specific use case

To use templates:

Reference templates in
```
templates/
```
directory for common scaffolding
Adapt templates to your specific needs and coding style

此 skill 包含按照官方文档结构组织的详细示例。所有示例均位于

examples/

目录中（参见上方映射）。

使用示例：

根据用户请求确定主题
从上方映射中加载相应的示例文件
遵循该文件中的说明、语法和最佳实践
根据你的具体用例调整代码示例

使用模板：

引用
```
templates/
```
目录中用于常见脚手架的模板
根据你的具体需求和编码风格调整模板

API Reference

API 参考

Commands API:
```
api/commands.md
```
- Complete command reference with syntax and examples
Selectors API:
```
api/selectors.md
```
- Selector types and usage reference
Options API:
```
api/options.md
```
- All options reference

Commands API：
```
api/commands.md
```
- 包含语法和示例的完整命令参考
Selectors API：
```
api/selectors.md
```
- 选择器类型和使用方式参考
Options API：
```
api/options.md
```
- 所有选项参考

Best Practices

最佳实践

Use Refs: Prefer refs (@e1, @e2) over traditional selectors for deterministic automation
Snapshot First: Always snapshot before interacting with elements to get refs
Agent Mode: Use
```
--json
```
flag for machine-readable output in agent mode
Session Management: Use
```
--session
```
to maintain state across commands
Interactive Snapshot: Use
```
-i
```
flag for interactive snapshot selection
Semantic Locators: Use semantic locators (role/name) when refs are not available
Error Handling: Check command exit codes and error messages
Wait for Navigation: Commands automatically wait for navigation to complete
Headed Mode: Use
```
--headed
```
for debugging, headless for production
CDP Integration: Use
```
--cdp
```
for Chrome DevTools Protocol integration
Streaming: Use
```
AGENT_BROWSER_STREAM_PORT
```
for live browser preview
Authenticated Sessions: Use
```
--headers
```
for authentication without login flows
Custom Executable: Use
```
--executable-path
```
for serverless deployments or custom browsers
Snapshot Options: Combine
```
-i
```
,
```
-c
```
,
```
-d
```
,
```
-s
```
options to optimize snapshot output

使用 Refs：优先使用 refs（@e1、@e2）而不是传统选择器，以实现确定性自动化
优先执行 Snapshot：与元素交互前始终先执行 snapshot，以获取 refs
Agent 模式：在 Agent 模式下使用
```
--json
```
标志，以获得机器可读的输出
会话管理：使用
```
--session
```
在多个命令之间保持状态
交互式 Snapshot：使用
```
-i
```
标志执行交互式 snapshot 选择
语义定位器：当无法使用 refs 时，使用语义定位器（role/name）
错误处理：检查命令退出码和错误消息
等待导航完成：命令会自动等待导航完成
有界面模式：使用
```
--headed
```
进行调试，在生产环境中使用 headless
CDP 集成：使用
```
--cdp
```
集成 Chrome DevTools Protocol
流式传输：使用
```
AGENT_BROWSER_STREAM_PORT
```
实时预览浏览器
已认证会话：使用
```
--headers
```
进行身份认证，无需登录流程
自定义可执行文件：在无服务器部署或使用自定义浏览器时，使用
```
--executable-path
```
Snapshot 选项：组合使用
```
-i
```
、
```
-c
```
、
```
-d
```
、
```
-s
```
选项以优化 snapshot 输出

Resources

资源

GitHub Repository: https://github.com/vercel-labs/agent-browser
Official README: https://github.com/vercel-labs/agent-browser/blob/main/README.md
Agent Mode Documentation: https://agent-browser.dev/agent-mode
Issues: https://github.com/vercel-labs/agent-browser/issues

GitHub 仓库：https://github.com/vercel-labs/agent-browser
官方 README：https://github.com/vercel-labs/agent-browser/blob/main/README.md
Agent 模式文档：https://agent-browser.dev/agent-mode
Issues：https://github.com/vercel-labs/agent-browser/issues

Keywords

关键词

agent-browser, CLI browser automation, AI agents, browser automation CLI, refs, snapshot, agent mode, semantic locators, browser automation tool, command-line browser, AI agent browser, deterministic selectors, accessibility tree, browser commands, web automation CLI, sessions, headed mode, authenticated sessions, CDP mode, streaming, Chrome DevTools Protocol, Playwright, browser automation for AI

agent-browser, CLI 浏览器自动化, AI Agent, 浏览器自动化 CLI, refs, snapshot, Agent 模式, 语义定位器, 浏览器自动化工具, 命令行浏览器, AI Agent 浏览器, 确定性选择器, 可访问性树, 浏览器命令, Web 自动化 CLI, 会话, 有界面模式, 已认证会话, CDP 模式, 流式传输, Chrome DevTools Protocol, Playwright, 面向 AI 的浏览器自动化