Appearance
agent-browser工具：让Claude Code从"会写代码"变成"会干活"
agent-browser用于打通Agent和浏览器Browser，让AI可以操作浏览器——打开页面、识别交互元素、点击输入、等待更新、拉回结果。做测试、做调研、做运营、做抓取都能用。
核心能力：15+命令类别
1. 基础导航与交互
最常用的一组命令，入门起点：
bash
agent-browser open https://example.com # 打开页面
agent-browser snapshot # 获取页面无障碍树（核心！）
agent-browser click @e2 # 点击某个元素
agent-browser fill @e3 "test@example.com" # 填写输入框
agent-browser press Enter # 按回车
agent-browser screenshot page.png # 截图
agent-browser close # 关闭浏览器关键概念：@eN引用
执行snapshot时，把整个页面解析成无障碍树（Accessibility Tree），给每个可交互元素分配编号@e1、@e2、@e3。后续操作用这个编号精确定位，不需要写CSS选择器。
AI不用"猜"元素在哪，看一眼快照就知道该点哪个。
2. 信息提取
bash
agent-browser get text @e1 # 获取某元素的文本
agent-browser get html @e1 # 获取innerHTML
agent-browser get value @e3 # 获取输入框的值
agent-browser get title # 获取页面标题
agent-browser get url # 获取当前URL
agent-browser get attr @e1 href # 获取某个属性值3. 智能等待
页面加载、Ajax请求、动画过渡都需要等待：
bash
agent-browser wait "#loading" # 等待某元素出现
agent-browser wait 2000 # 等待2秒
agent-browser wait --text "加载完成" # 等待特定文字出现
agent-browser wait --url "**/dashboard" # 等待URL变化
agent-browser wait --load networkidle # 等待网络空闲4. 截图与标注
bash
agent-browser screenshot # 普通截图
agent-browser screenshot --full # 全页面截图
agent-browser screenshot --annotate # 带元素编号标注的截图
agent-browser pdf report.pdf # 导出PDF--annotate特别好用：截图上叠加编号标签[N]对应@eN，多模态AI模型可以直接看图识别该点哪里。
5. Cookie与认证管理
杀手级功能：
bash
# 用已有的Chrome配置文件（复用已登录状态）
agent-browser profiles
agent-browser --profile Default open https://gmail.com
# 持久化会话（跨重启保留登录状态）
agent-browser --session-name myapp open https://myapp.com
# 认证保险库（加密存储密码，AI看不到明文）
agent-browser auth save mysite
agent-browser auth login mysite让Claude Code操作需要登录的后台系统，不用每次重新登录，密码加密存储。
6. 多标签页与多会话
bash
# 多标签页
agent-browser tab new https://docs.example.com
agent-browser tab new --label api https://api.example.com
agent-browser tab api
# 多会话（完全隔离的浏览器实例）
agent-browser --session agent1 open site-a.com
agent-browser --session agent2 open site-b.com
agent-browser session list7. 网络拦截与模拟
bash
agent-browser network route "*/api/user" --body '{"name":"test"}'
agent-browser network route "*/ads/*" --abort
agent-browser network requests --status 4xx
agent-browser network har start8. 批量执行
连续执行多条命令，避免每条单独启动进程：
bash
agent-browser batch \
"open https://example.com" \
"wait --load networkidle" \
"snapshot -i" \
"screenshot result.png"三种浏览器模式
| 模式 | 说明 | 适用场景 |
|---|---|---|
| 无头Chromium（默认） | 不弹窗，后台静默运行 | 日常自动化、CI/CD |
| 有头模式（--headed） | 弹出浏览器窗口 | 调试、演示 |
| 云端远程浏览器 | 连接Browserless/Browserbase等服务 | 大规模并发、无本地浏览器环境 |
云端模式支持：
bash
agent-browser -p browserless open https://example.com
agent-browser -p browserbase open https://example.com
agent-browser -p agentcore open https://example.com安装
bash
npm i -g agent-browser
agent-browser install
npx skills add vercel-labs/agent-browser@agent-browser -g -y实战场景
场景一：自动化测试Web应用
「帮我测试一下登录功能」
- 打开登录页
- 获取页面快照，找到用户名和密码输入框
- 填入测试账号
- 点击登录按钮
- 等待跳转
- 截图保存，确认登录成功
场景二：批量抓取页面信息
调研国内大模型定价：逐个打开链接、snapshot读取页面结构、get text提取关键字段、汇总成CSV。
场景三：辅助前端开发调试
打开本地开发服务器，操作页面验证功能，用vitals检查Web性能指标：
bash
agent-browser vitals http://localhost:3000开启React DevTools集成：
bash
agent-browser open --enable react-devtools http://localhost:3000
agent-browser react tree
agent-browser react inspect <fiberId>总结
| 要点 | 说明 |
|---|---|
| 15+命令 | 覆盖几乎所有浏览器操作场景 |
| @eN引用 | 不用写CSS选择器，看快照就定位 |
| 认证管理 | 复用登录状态，密码加密存储 |
| 三种模式 | 无头/有头/云端任选 |
Claude Code装上浏览器，从"会写代码"直接变成"会干活"。
关键词：agent-browser, Claude Code浏览器, Agent浏览器操作, 自动化测试, 网页抓取, Vercel Labs
