Agent之skill:agent-browser的简介、安装和使用方法、案例应用之详细攻略

Agent之skill:agent-browser的简介、安装和使用方法、案例应用之详细攻略

目录

agent-browser的简介

1、特点

agent-browser的安装和使用方法

1、安装

2、使用方法

agent-browser的案例应用

案例一:基于 Snapshot 的页面交互——使用页面快照完成元素点击与输入

案例二:获取页面信息—提取页面标题与地址

案例三:命令链自动执行浏览流程— 打开页面后等待加载并生成页面快照


agent-browser的简介

Agent Browser 是一个由 Vercel Labs 提供的浏览器自动化CLI 工具,定位于面向AI Agent 的浏览器控制能力。项目采用原生 Rust CLI 实现,提供统一的命令行接口,可完成浏览器启动、页面导航、元素定位、页面交互、页面信息获取、截图、状态检查等一系列浏览器自动化操作。项目通过后台守护进程保持浏览器会话持续运行,使多个命令之间能够共享同一个浏览器实例,提高连续操作效率。

项目围绕 AI Agent 的浏览体验进行了专门设计,支持 Snapshot(页面快照)、元素引用(Refs)、语义定位(Semantic Locators)以及 JSON 输出等能力,使 AI Agent 可以先获取页面结构,再依据元素引用完成点击、输入、读取等操作,从而减少重复定位元素的成本,提高自动化操作的稳定性。同时,项目还提供 Skills 功能,为 AI Agent 提供与当前 CLI 版本保持一致的操作说明。

此外,项目支持本地浏览器以及多种远程浏览器 Provider,并提供安装诊断(doctor)、浏览器安装、升级、初始化脚本、自定义浏览器参数、扩展加载等功能,使浏览器自动化能够适用于本地开发、CI/CD 以及云端运行等不同场景。

Github地址:GitHub - vercel-labs/agent-browser: Browser automation CLI for AI agents · GitHub

1、特点

特点

详细说明

原生 Rust CLI

提供原生 Rust 实现的命令行工具,支持高效执行浏览器自动化命令

后台守护进程

浏览器首次启动后由后台 Daemon 持续维护,多个命令之间可共享同一浏览器实例。

丰富的浏览器操作

支持打开页面、点击、输入、悬停、滚动、截图、等待页面加载等常见浏览器操作。

页面信息获取

可获取页面标题、URL、文本、HTML、属性、样式、元素数量、元素位置等信息。

Snapshot + Refs 工作流

通过页面快照生成元素引用(如 @e1、@e2),后续操作直接使用引用完成交互。

语义定位能力

支持基于 Role、Label、Text 等语义方式定位页面元素。

JSON 输出

支持 --json 输出,方便 AI Agent 或自动化程序解析结果。

Skills 机制

提供 Skills 查询能力,使 AI Agent 获取与当前 CLI 版本一致的操作说明。

初始化脚本支持

支持注册页面初始化脚本,可在首次页面加载前自动执行。

安装与诊断工具

提供 install、upgrade、doctor 等命令,用于浏览器安装、升级及环境诊断。

agent-browser的安装和使用方法

1、安装

全局安装(推荐)

npm install -g agent-browser agent-browser install

首次执行 agent-browser install 时,会下载 Chrome for Testing 浏览器。

项目本地安装

npm install agent-browser agent-browser install Homebrew(macOS) brew install agent-browser agent-browser install Cargo(Rust) cargo install agent-browser agent-browser install

从源码构建

git clone https://github.com/vercel-labs/agent-browser cd agent-browser pnpm install pnpm build pnpm build:native pnpm link --global agent-browser install

源码构建需要 Node.js 24+、pnpm 11+ 以及 Rust。

2、使用方法

项目 README 推荐的基本工作流程如下:

(1)打开网页

agent-browser open Example Domain

(2)获取页面快照

agent-browser snapshot -i

页面会返回交互元素及对应引用(如 @e1、@e2)。

(3)根据引用进行交互

agent-browser click @e2 agent-browser fill @e3 "test@example.com"

(4)读取页面信息

agent-browser get title agent-browser get url agent-browser get text @e1

(5)使用语义定位

agent-browser find role button click --name "Submit" agent-browser find label "Email" fill "test@test.com"

(6)命令链执行

agent-browser open example.com && \ agent-browser wait --load networkidle && \ agent-browser snapshot -i

项目支持多个命令通过 && 串联执行,以充分利用后台浏览器会话。

agent-browser的案例应用

案例一:基于 Snapshot 的页面交互——使用页面快照完成元素点击与输入

首先打开目标页面并获取交互式 Snapshot:

agent-browser open example.com agent-browser snapshot -i

根据返回的元素引用完成页面操作:

agent-browser click @e2 agent-browser fill @e3 "test@example.com" agent-browser get text @e1

该流程利用 Snapshot 返回的元素引。用完成浏览器交互,避免重复查询页面元素。

案例二:获取页面信息提取页面标题与地址

案例实现内容:

项目提供多个获取页面信息的命令,例如:

agent-browser get title agent-browser get url agent-browser get html body agent-browser get text h1

可用于读取页面标题、当前地址、HTML 内容及指定元素文本。

案例三:命令链自动执行浏览流程打开页面后等待加载并生成页面快照

利用命令链一次性完成浏览流程:

agent-browser open example.com && \ agent-browser wait --load networkidle && \ agent-browser snapshot -i

该方式依赖后台守护进程保持浏览器会话,实现页面打开、等待网络空闲及生成 Snapshot 的连续执行,提高自动化操作效率。