agent-browser 教程

按 vercel-labs/agent-browser README 走一遍。跑通标准：open example.com 后 snapshot 能拿到带 ref=eN 的无障碍树，并能对这一次 snapshot 里的 ref 执行 click。

本机已执行：npm install agent-browser、agent-browser install（下载 Chrome for Testing 153）、open https://example.com、snapshot、screenshot。新开一轮直接 click @e2 会报 Unknown ref: e2，必须先在同一轮 snapshot。

1. 安装

官方推荐全局：

npm install -g agent-browser
agent-browser install

install 会下载 Chrome for Testing（第一次，约 180MB）。macOS 也可用 brew install agent-browser。本机 agent-browser --version 为 0.38.1。

2. 打开页面并 snapshot

agent-browser open example.com
agent-browser snapshot

本机 snapshot 原文：

- heading "Example Domain" [level=1, ref=e1]
- paragraph
  - StaticText "This domain is for use in documentation examples..."
- paragraph
  - link "Learn more" [ref=e2]

页面应是 Example Domain：

3. 用这一轮的 ref 点击，再截图

agent-browser click @e2
agent-browser screenshot page.png
agent-browser close

不要拿上一轮会话的 @e。 本机在新会话里直接 click @e2 得到 Unknown ref: e2，随后打印的树里才又出现 ref=e2：

也可以用传统选择器：agent-browser click "#submit"。

4. 翻车点

官方：点击点被同意墙/弹层挡住会早失败，先处理挡住的元素，再重新 snapshot。要接 MCP 客户端，改用 Playwright MCP 或 Chrome DevTools MCP。

出处：README