返回精选库
agent-browser·开发与工程

agent-browser 使用指南:让 Agent 完成浏览器操作

本文目录

agent-browser 把浏览器操作组织成“观察页面、选择元素、执行操作、再次检查”的循环。先为 Agent 安装入口,再准备 CLI 与浏览器,才能真正操作页面。

安装与准备

在终端完成运行环境与 Skill 安装:

命令
npm install -g agent-browser
agent-browser install
npx skills@latest add vercel-labs/agent-browser

准备 Node.js、能执行终端命令的 Agent 和可访问的目标页面。以下在终端安装 CLI、浏览器和 Skill;仅安装最后一行不会完成前面的运行环境准备。Linux 缺少系统库时,按官方安装文档处理依赖。

第一次使用

以下内容发到 Agent 对话中,替换成自己的文件和目标:

提示词
请使用 agent-browser 检查本地 http://localhost:3000 的课程预约流程。先读取已安装 CLI 的 core 指南;运行 `agent-browser session id --scope worktree --prefix course-check` 取得会话 ID,每条浏览器命令都用 `--session` 指向同一 ID,最后以 `agent-browser --session <ID> close` 关闭该会话,其中 `<ID>` 换成刚生成的同一 ID。检查选课、填写表单和返回修改,不提交真实付款;保存失败步骤和最后截图。

读取当前版本的操作指南

仓库里的 Skill 是发现入口,完整操作说明由 CLI 提供。让 Agent 先运行 agent-browser skills get core --full,再按当前版本选择会话、打开页面。升级 CLI 后也应重新读取,以免沿用旧参数。

根据当前快照操作

页面打开后先读取可交互元素,按实际标签和编号定位课程、按钮和表单。填写之后如果出现新的选项或错误提示,应重新获取快照;旧编号可能已经不对应原来的元素。等待明确的文字或页面状态,比固定等待几秒更可靠。

把操作结果变成可复查记录

预约检查需要说明在哪个步骤失败、输入了什么测试值、预期与实际有什么差异。截图用于定位问题,提取文本用于说明状态。结束后关闭本次命名会话,避免后续任务沿用错误页面或临时表单内容。

不经过 Agent,也能先跑最小闭环

CLI 和浏览器装好后,在目标项目目录的同一终端运行下面整段,用公开测试页熟悉三个动作:

命令
COURSE_CHECK_SESSION="$(agent-browser session id --scope worktree --prefix course-check)"
agent-browser --session "$COURSE_CHECK_SESSION" open https://example.com
agent-browser --session "$COURSE_CHECK_SESSION" snapshot -i
agent-browser --session "$COURSE_CHECK_SESSION" screenshot example.png
agent-browser --session "$COURSE_CHECK_SESSION" close

在同一终端运行整段命令,让每一步使用同一个命名会话;如果 Agent 每次新开 Shell,就保存生成的 ID,并在每条命令中显式指定 --session。真正操作表单时,从 snapshot -i 输出里选当前页面的元素引用,例如 @e3;点击或填写后再次快照,必要时用 agent-browser --session "$COURSE_CHECK_SESSION" wait --text "成功" 等待具体状态。截图路径是本机文件,需要打开检查。官方 core 指南还包含 read、文本提取、多标签页和无障碍检查等命令,可按任务再学,不必第一次就把每种能力都塞进同一流程。

填写表单后,读回目标字段

先辨认当前快照中的控件:可编辑文本框用 fill,原生 HTML <select> 下拉框用 select,勾选框用 check。combobox 角色也可能来自自绘组件;这类菜单应按页面交互展开、重新快照再选择选项,不能仅凭角色判断能用 select。[8]

FredAmartey 在 agent-browser 0.38.2、headless Chrome 147 的问题报告中展示:对非文本控件误用 fill / type,终端显示完成,内容却进入此前获得焦点的文本框。[7] 在已打开的测试表单中,可以这样核对一个文本框:

命令
agent-browser --session "$COURSE_CHECK_SESSION" fill @e3 "test@example.com"
agent-browser --session "$COURSE_CHECK_SESSION" get value @e3

把 @e3 换成当前文本框引用,沿用本任务的命名会话 ID。读回值应与测试输入一致;若填写触发页面重渲染,先重新快照再定位字段。选项和勾选状态也应从当前页面确认,之后再继续下一步。

登录、会话与失败现场

登录站点先确认账号授权和测试数据范围。默认未命名会话会与同机其他任务共享。CLI 默认各自启动浏览器时,不同命名 ID 会隔离页面和登录状态;若经 --cdp 连接同一个外部 Chrome,会话只分开标签选择,不能当成账号隔离。命名本身不保证关闭或重启后保留登录;需要继续使用登录状态时,按官方会话说明另行配置 --restore。要报告失败,记录目标 URL、上一次快照、执行的命令、预期文字与实际文字,再决定是否截图或录制;“点击命令返回成功”只说明操作发出,不说明业务动作完成。验证码、站点访问限制和权限不足属于真实边界,不能假设有头浏览器一定能绕过。

另一个场景:筛选后台订单

可把一次自动化限定成只读验证:“打开测试环境订单页,筛选‘待处理’,记录筛选前后结果数与第一条订单编号;再切到‘已完成’,确认状态确实变化。不要修改订单或触发通知。” Agent 应在每次筛选后重新取快照,再从当前页面提取文字;如果列表由异步请求更新,就等待结果状态,而非固定睡眠。交付物是操作顺序、实际看到的文字和必要截图。若无法登录或页面验证拦截,记录停在哪一步,不能从空页面推断没有订单。

浏览器启动或连接失败时,先诊断

CLI 已在 PATH,却遇到 Chrome 无法启动、连接失败或升级后的版本不匹配时,在终端运行:

命令
agent-browser doctor --offline --quick
agent-browser doctor

第一行跳过网络探测与浏览器启动测试,需要检查这两项时再用第二行。退出码 0 表示没有 fail 项(仍可能有警告),1 表示至少一项检查失败。doctor 每次都会清理失效的守护进程辅助文件;额外加 --fix 可能安装缺失的 Chrome、删除过期状态;发现版本不匹配时,还可能关闭所有活跃会话。先读具体检查结果,再决定修复。[5] [9]

常见问题

安装 Skill 后提示找不到命令? CLI 与 Skill 分开安装,先检查 agent-browser 是否在 PATH。

点击了错误元素? 页面变化后重新观察,再使用新快照里的引用。

显示浏览器就能打开所有网站吗? 不能,登录、验证码和网站访问规则仍可能阻止操作。

你的首次任务进行得怎么样?

选择项通过网站统计帮助我们了解常见卡点。屏蔽统计可能导致无法送达;具体问题请通过邮件反馈。

参考来源

  1. Claude in Chrome MCP vs Agent Browser (Vercel) Skill.shanraisshan
  2. agent-browser — 官方安装与 Agent 接入说明Vercel Labs
  3. agent-browser — Skill 发现入口Vercel Labs
  4. agent-browser core — 操作工作流Vercel Labs
  5. agent-browser 安装指南Vercel Labs
  6. agent-browser Skills 指南Vercel Labs
  7. fill / type 误用于非文本控件的问题报告(#2055)FredAmartey ·
  8. interaction.rs — select_option 实现Vercel Labs
  9. v0.38.2 doctor 修复逻辑(fix.rs)Vercel Labs
发现过期或有误的信息?告诉我们