别让 Playwright 烧 Token 了, Vercel 最新开源的浏览器自动化神器真香

你只是想让 AI 测试一下登录表单, 结果它把整个网页的 DOM 树都塞进了 token 里。token 用量瞬间烧完。

传统的 Playwright MCP 方案就是这么吃 token。

你以为 AI 很聪明? 其实它只是在用最笨的方法——把网页的每个角落都读一遍，然后在海量信息里找你要的那个按钮。

直到刚刚看到 Vercel Labs 刚开源的 agent-browser，

X 上的实测有 93% 的 Context 节省，还兼容任何 AI 编程 Agent，我反手一个 npm install。

为什么传统方案会把 AI 逼疯?

我给你讲个真实场景。

假设你要让 Claude 帮你填一个表单,三个输入框: 用户名、密码、验证码。

用 Playwright MCP 会发生什么?

AI 会先拿到整个页面的可访问性树。这玩意儿长什么样? 想象一下把整个网页结构——每个 div、每个 span、每个隐藏元素——全部转成文本描述。

一个普通的登录页面,这个树可能有 5000 行。

然后 AI 要在这 5000 行里找到”用户名输入框”。找到了,点击。又要重新读一遍整个树。填写。再读一遍。提交。再读一遍。

每次操作都是一次全量扫描。

这就像你去图书馆借书,管理员每次都要把整个书架的书名念一遍,才能告诉你那本书在第三层。

agent-browser 的优化方案: Snapshot + Refs

第一步: 拍快照

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

AI 只需要做一次快照,拿到的是这样的东西:

@e1: button "登录"
@e2: input[type="text"] "用户名"
@e3: input[type="password"] "密码"
@e4: button "提交"

就这么简单。

不是 5000 行的 DOM 树,而是 4 行带编号的交互元素。每个元素有个 @e 开头的引用 ID。

第二步: 直接操作

agent-browser fill @e2 "admin"
agent-browser fill @e3 "password123"
agent-browser click @e4

AI 直接用编号来操作。不需要重新解析页面,不需要重新查找元素。

一次快照,多次复用。

这就是那个 93% Context 节省的秘密。

agent-browser skill 做了什么

看看官方 GitHub 仓库中的 SKILL.md 文件怎么写的。

核心功能：自动化浏览器交互。

具体用途：网页测试、填写表单、网页截图、数据提取（爬虫）。
适用场景：当用户（或 AI）需要浏览网站、与网页元素互动、测试 Web 应用或从网页获取信息时使用。

核心工作流程：

Navigate： 打开指定的网址。
Snapshot： 这一步非常重要。它会生成当前网页的”快照”，并给网页上的可交互元素（如按钮、输入框）打上标签（例如 @e1, @e2）。
Interact： 利用上一步生成的引用标签（如 @e1）来进行操作（比如点击 @e1 或在 @e2 中输入文字）。
Re-snapshot： 在页面跳转或发生重大变化（DOM 改变）后，需要再次截图并生成新的标签，以便进行下一步操作。

原理剖析：三层架构 Rust + Node.js 的完美平衡

agent-browser 不是简单的包装工具,它的架构设计很有意思。

Rust CLI 层: 负责命令解析和 Daemon 通信,速度极快。
Node.js Daemon 层: 管理 Playwright 的浏览器生命周期,生态兼容。
Fallback 层: 如果 Rust 二进制跑不起来,自动降级用 Node.js 执行。

这意味着什么?

你既能享受 Rust 的性能,又能用上 Node.js 的整个 Playwright 生态。

相较于直接使用原生的 Playwright，能节约不少的 token。

如何安装

agent-browser 作为一个 skill，可以无缝衔接到 Claud Code、Gemini CLI、CodeX 等各种编程 Agent，零配置即用。

只要需要 npm 安装就可以使用了:

npm install -g agent-browser
agent-browser install

是不是很简单，赶快试试吧！

Github 地址： https://github.com/vercel-labs/agent-browser