介绍
Agent-Browser是Vercel 专为AI Agent 设计的一个浏览器自动化 CLI 工具,能让 它们模拟人类操作浏览器(点击、滚动、截图和填表单等), 是对playwright作为封装和优化,默认是无头模式操作浏览器。
agent-browser 及关联 Skill vs playwright-skill 综合信息表
| Skill(技能 / 工具) | 来源(获取 / 运行方式) | 核心功能 | 核心技术(底层实现) |
|---|---|---|---|
| agent-browser | npm install -g agent-browser | 通用浏览器自动化(CLI 版) | Playwright + 自有 CLI 封装 |
| dogfood | agent-browser 内置子 skill | QA 测试、探索性测试 | 基于 agent-browser 核心能力 |
| electron | agent-browser 内置子 skill | Electron 桌面应用测试 | 无额外标注(默认基于 agent-browser) |
| slack | agent-browser 内置子 skill | Slack 聊天工具自动化 | 无额外标注(默认基于 agent-browser) |
| playwright-skill | 本地 skill(自定义 / 内置) | 浏览器自动化测试 | 原生 Playwright(无额外封装) |
agent-browser vs playwright-skill 功能特性对比表
| 特性 | agent-browser | playwright-skill |
|---|---|---|
| 接口 | CLI 命令(如 agent-browser click @e1) |
Playwright 多语言 API(Python/JS/Java 代码调用,如 page.click('#btn')) |
| 元素引用 | 快照生成 @e1, @e2 简化引用 | CSS/XPath/ 文本选择器(如 //div[@id="e1"]),支持精准定位 |
| 会话管理 | 内置 --session 参数一键管理 |
自定义代码实现(通过 context 上下文对象手动管理) |
| 状态保存 | 内置 state save/load 命令 |
手动调用 storage_state 方法序列化 / 反序列化状态 |
| 认证 | auth save/login 命令,加密存储凭证 |
手动处理 Cookie/Token,需结合加密库 / 环境变量存储 |
| iOS 模拟器 | 原生支持 | 无原生支持,需结合 BrowserStack/Appium 等工具 |
| 浏览器引擎 | Chrome, Lightpanda | Chrome、Firefox、Safari、Edge 等全主流引擎 |
| Diff 测试 | 内置 diff 命令一键执行 |
原生支持 toHaveScreenshot() / toMatchSnapshot(),内置 pixelmatch 像素级比对 |
选择建议
- 简单重复任务、QA 快速验证 → agent-browser(CLI 命令简洁,无需编写代码)
- 复杂业务逻辑、自定义自动化流程 → playwright-skill(代码化控制,灵活性和扩展性更高)
安装与使用
执行npm install -g agent-browser安装(当然你可以让ai自动安装,只是耗一点token,下同)

创建符号链接,让OpenCode、OpenClaw和Codex都能发现 agent-browser,记得路径按自己的电脑实际情况改
bash
# 1. Codex & Opencode 全局 skills 目录
ln -s /opt/homebrew/lib/node_modules/agent-browser/skills/agent-browser ~/.agents/skills/agent-browser
ln -s /opt/homebrew/lib/node_modules/agent-browser/skills/dogfood ~/.agents/skills/dogfood
ln -s /opt/homebrew/lib/node_modules/agent-browser/skills/slack ~/.agents/skills/slack
ln -s /opt/homebrew/lib/node_modules/agent-browser/skills/electron ~/.agents/skills/electron
# 2. Openclaw 项目目录
ln -s /opt/homebrew/lib/node_modules/agent-browser/skills/agent-browser ~/Desktop/work/openclaw/.agents/skills/agent-browser
ln -s /opt/homebrew/lib/node_modules/agent-browser/skills/dogfood ~/Desktop/work/openclaw/.agents/skills/dogfood
ln -s /opt/homebrew/lib/node_modules/agent-browser/skills/slack ~/Desktop/work/openclaw/.agents/skills/slack
ln -s /opt/homebrew/lib/node_modules/agent-browser/skills/electron ~/Desktop/work/openclaw/.agents/skills/electron

执行opencode,让ai调查亚马逊平台的热门电器产品,可以发现ai执行了cli命令agent-browser open https://www.amazon.com && agent-browser wait --load networkidle && agent-browser screenshot amazon-home.png,这三个命令的作用分别是打开亚马逊平台链接、仅当页面成功打开后,等待页面的网络请求基本停止(动态内容完全加载)和对亚马逊首页截图为amazon-home.png

接下来ai自行操作,完成搜索、爬取数据、处理超时、模拟滚动、点击和截图等




最终结果



由于浏览器常规截图并非整个页面,不妨以ai打开电子产品链接(可以在ai的思考和执行过程看到那个链接)https://www.amazon.com/gp/bestsellers/electronics/ref=zg_bs_electronics_sm找另外几个产品进行验证,可以发现基本符合事实,只是部分评价最多的产品(很可能是ai只对提取前10个数据或当时页面没加载到更多商品,因为亚马逊平台的页面是动态的,不会一次性加载完全部产品)

创作不易,禁止抄袭,转载请附上原文链接及标题