AI测试 AI 赋能测试实践 03——深度拆解 Agent Browser——Playwright 的下一代，AI 原生的浏览器交互革命
前言
回顾 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 与浏览器的"翻译官"。
| 特性 | Playwright (传统) | Agent Browser (AI 时代) | 为什么重要（转型价值） |
|---|---|---|---|
| 交互方式 | 需要编写 JS 脚本page.click('#submit')
|
命令行直接操作agent-browser click @e2
|
无需编码，AI 直接生成指令 |
| 元素定位 | 依赖 CSS 选择器 （易受页面变动影响） |
智能 Ref 系统@e1, @e2
|
100% 稳定，页面改版无需重写测试 |
| 输出格式 | 原始 DOM （AI 难以解析） |
AI 友好树状结构 （含 Ref 标签） |
AI 能直接解析并生成操作指令 |
| 执行速度 | 500ms-2s/操作 | <50ms/操作 （Rust 原生优化） |
测试速度提升 10 倍，CI/CD 加速 |
| AI 集成 | 需额外封装 | 原生支持 AI 工作流snapshot → refs
|
直接用 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 基建提效。