前言

        回顾 Web 自动化的发展史：早期的 Selenium，通过 WebDriver 协议驱动浏览器，虽然实现了自动化，但是充满了隐式等待与不稳定的 Flakiness，它是为机器设计的，人只是勉强在用。

        后来，PlayWright 横空出世，它带来对人类友好的革命：自动等待、Trace Viewer、精准的定位器、它大幅提高了编写测试脚本的体验。

        而现在，来到了 AI 基建时代。人类编写测试脚本的任务交接给了 Agent（智能体）手中，这个时候如果还使用旧时代的 PlayWright 进行代码的编写，那么就会面临 token 成本剧增 + Context 爆炸的挑战。所以，由 Vercel Labs 创造的 Agent Browser 应运而生——它不是 Playwright 的简单封装，而是 Playwright 的下一代演进。它剥离了人类阅读代码的冗余，提供了 AI 原生的交互协议，专门为大模型的推理、规划和工具调用而设计。如果说 Playwright 是 “开发者的天降神兵”，那么 Agent Browser 就是 “AI Agent 的大脑皮层”。

        今天，笔者就带各位拆解一下这件 AI 时代的神兵利器——Agent Browser。

Agent Browser vs Playwright：核心区别

Agent Browser 不是 Playwright 的替代品，而是 AI Agent 的交互层。Playwright 是底层引擎，Agent Browser 是 AI 与浏览器的"翻译官"。

快速上手

安装

# 全局安装（推荐，性能最佳）
npm install -g agent-browser
agent-browser install  # 下载Chromium（仅需1次）

# 无需安装（试用）
npx agent-browser install
npx agent-browser open example.com

AI 测试开发核心工作流

步骤一：导航并获取页面快照

为什么比 Playwright 强：Playwright 输出的是 HTML，AI 需要额外解析；Agent Browser 直接输出带 Ref 的树状结构，AI 能直接知道"点击 e4"。

agent-browser open https://login.example.com
agent-browser snapshot -i --json  # 重点：-i（仅交互元素） + --json（AI友好格式）
```py

输出示例（AI能直接解析）：

```json
{
  "success": true,
  "data": {
    "snapshot": "e1:heading 'Login', e2:input 'Email', e3:input 'Password', e4:button 'Sign In'",
    "refs": {
      "e1": {"role": "heading", "name": "Login"},
      "e2": {"role": "textbox", "placeholder": "Email"},
      "e3": {"role": "textbox", "type": "password"},
      "e4": {"role": "button", "name": "Sign In"}
    }
  }
}

步骤二：AI 生成操作指令（无需写代码）

AI 提示词示例：
"当前页面有登录表单，Ref e2 是邮箱输入框，e3 是密码框，e4 是登录按钮。请填写邮箱 mailto:test@example.com，密码 123456，然后点击登录。"

步骤三：执行操作（AI 直接操作）

agent-browser fill @e2 "test@example.com"  # 填写邮箱
agent-browser fill @e3 "123456"           # 填写密码
agent-browser click @e4                    # 点击登录

步骤四：验证结果（自动重试拍照）

agent-browser snapshot -i --json  # 检查登录后页面

与 Cloude Code 的深度集成

Cloude Code 是 AI 编程助手（类似 GitHub Copilot），安装 Agent Browser 技能后，它能原生理解 Agent Browser，让你用自然语言写测试。

集成步骤

# 1. 安装Agent Browser技能
npx skills add vercel-labs/agent-browser

# 2. 在Cloude Code中，输入自然语言提示
"打开登录页，填写邮箱test@example.com，点击登录按钮"

# 3. Cloude Code自动生成操作指令
agent-browser open https://login.example.com
agent-browser snapshot -i --json
agent-browser fill @e2 "test@example.com"
agent-browser click @e4

高级功能：安全 & 云化

会话状态持久化（告别重复登录）

# 第一次登录（保存状态）
agent-browser --session-name myapp open https://myapp.com/login
agent-browser fill @e2 "user" && agent-browser fill @e3 "pass" && agent-browser click @e4

# 后续直接使用（无需再登录）
agent-browser --session-name myapp open https://myapp.com/dashboard

云化部署（Serverless 环境必备）

# 用Kernel云服务（免费额度可用）
export AGENT_BROWSER_PROVIDER=kernel
export KERNEL_API_KEY="your-api-key"
agent-browser open https://myapp.com

安全增强（企业级必备）

# 1. 限制可访问域名（防爬虫）
agent-browser --allowed-domains "myapp.com,*.cdn.com" open ...

# 2. 用内容边界标记（防AI误操作）
agent-browser --content-boundaries open example.com

# 3. 启用动作确认（关键操作需人工确认）
agent-browser --confirm-actions click,fill open example.com

后记

         注意啦，这个 Agent Browser 完全是开发给 Agent 使用的，我们作为测试人员只需要了解 Agent Browser 的大致语法即可，而后可完全交付给 Agent，总而言之这项新技术的学习难度相比于 Web 自动化前几代常用的框架而言断崖式下跌，而且看完本篇博客完全可以快速上手，直接和 Agent 一起提高自动化测试效率，来进一步为 AI 基建提效。

         官方仓库: https://github.com/vercel-labs/agent-browser

         完整文档: https://agent-browser.vercel.app