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 命令一键执行 原生支持 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个数据或当时页面没加载到更多商品,因为亚马逊平台的页面是动态的,不会一次性加载完全部产品)

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

相关推荐
摸鱼同学6 小时前
14-oh-my-claude / oh-my-claudecode:多 Agent 编排框架
ai·agent·claude·skill·omc
皮皮学姐分享-ppx6 小时前
政府绿色采购数据库(2015-2024.3)
大数据·网络·数据库·人工智能·制造
GIS数据转换器6 小时前
基于3D GIS的监控视频精准标定平台
人工智能·物联网·3d·音视频·无人机·知识图谱
MXsoft6186 小时前
## 自动化巡检:从手工两小时到系统五分钟的落地实践
运维·自动化
ZLG_zhiyuan6 小时前
直击华南工博会|ZLG致远电子:EtherCAT与自动化总线应用方案动态实景呈现
运维·自动化
专注VB编程开发20年6 小时前
AI 生成C# WinForm 窗体 = 目前就是垃圾
开发语言·人工智能·c#
深小乐6 小时前
Claude Fable5 尝鲜,效果挺不错
人工智能
Nayxxu6 小时前
Gemini + RAG 企业知识库教程:从文档切片到答案生成
运维·人工智能
冬奇Lab6 小时前
真正的 AI-Native Workflow 是什么?——四个判断测试
人工智能·agent
冬奇Lab7 小时前
每日一个开源项目(第128篇):Agent Skills - 给 AI 编程 Agent 装上工程纪律
人工智能·开源·资讯