Agent-Browser: 适合ai的浏览器自动化 CLI 工具(以OpenCode为例）
介绍
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 命令一键执行 | 原生支持 |
选择建议
- 简单重复任务、QA 快速验证 → agent-browser（CLI 命令简洁，无需编写代码）
- 复杂业务逻辑、自定义自动化流程 → playwright-skill（代码化控制，灵活性和扩展性更高）
安装与使用
执行npm install -g agent-browser安装（当然你可以让ai自动安装，只是耗一点token，下同）
创建符号链接，让OpenCode、OpenClaw和Codex都能发现 agent-browser，记得路径按自己的电脑实际情况改
# 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个数据或当时页面没加载到更多商品，因为亚马逊平台的页面是动态的，不会一次性加载完全部产品）
创作不易，禁止抄袭，转载请附上原文链接及标题
