概念普及

• 无头浏览器：功能完整的 Chrome，但没有你能看到的窗口，专门给程序/代码/AI 使用，而不是给人使用，它有三个关键特征：

1. 没有界面，但是浏览器能力100%保留
2. 资源消耗低，可以在服务器批量使用
3. 完全由代码控制，适合自动化

安装使用

agent-browser的安装步骤如下：

1.安装agent-browser，这里涉及两条命令，如下所示：

npm install -g agent-browser

agent-browser install # 下载 Chromium

安装完成后，在bash环境下执行：

agent-browser open www.xxxx.com   #有输出则表示安装正确

2.在bash环境下执行如下命令：

npx skills add vercel-labs/agent-browser --skill agent-browser

在执行命令的过程中按照自己的需求选择即可，我选择的是全局方式安装

3.打开claude code，进入claude code页面，输入/skills查询agent-browser是否安装成功。

4.在claude code中执行：保存 https://agent-browser.dev/ 网页的截图到当前目录。

5.在当前目录下查看网页的截图是否已经生成，如果已经生成，则说明skill安装成功

应用场景

前面讲了agent-browser的安装方法，那agent-browser能让claude code有哪些提升呢？如果没有agent-browser，claude code无法实现如下的内容：

 看到你的网页实际长什么样

发现运行时的 UI 问题

验证部署后是否正常

 操作需要登录的页面

 抓取动态渲染的内容 

下面将agent-browser的应用场景进行总结如下所示：

场景一：前端开发 —— 看到真实渲染结果 

传统方式：

你描述 bug → Claude 猜测问题 → 修改代码 → 你再看 → 反复循环

有了 agent-browser：

Claude 直接打开页面 → 截图看到实际效果 → 发现问题 → 修改代码 → 再次打开验证 → 形成完整的"开发-验证"闭环

典型对话：

你：帮我检查一下首页的响应式布局有没有问题

Claude：[打开 localhost:3000，截图，分析]

    → "发现在移动端宽度下导航栏溢出，

    原因是 flex-wrap 未设置，已修复"

场景二：自动化测试 —— 替代手动点击 

需要写 Playwright 测试脚本 直接用自然语言描述测试步骤： → "打开登录页，输入测试账号密码，验证能否成功登录" → "点击购买按钮，检查购物车数量是否+1" → "提交表单后，验证成功提示是否出现" → "测试所有导航链接是否都能正常跳转" Claude 自动执行并报告结果

场景三：爬取动态页面数据 —— 突破 API 限制 

avily 搜索引擎的局限： → 只能搜索公开内容 → 无法处理 JS 动态渲染的页面 → 无法登录后抓取 agent-browser 能做到： → 打开 SPA（React/Vue/Angular）应用 → 等待 JS 渲染完成后提取数据 → 登录后访问需要权限的页面 → 模拟翻页、滚动加载更多内容

典型场景：

抓取某平台需要登录才能看到的数据 → 提取动态渲染的商品价格列表 → 采集无公开 API 的网站结构化数据

场景四：部署验证 —— 上线后自动巡检 

部署完成后，让 Claude 自动验证： → 打开生产环境 URL，确认页面正常加载 → 检查关键功能是否可用 → 对比截图，发现视觉回归问题 → 验证 API 接口返回是否正确 → 检查控制台是否有报错 相当于部署后的自动化 QA 检查

场景五：竞品分析 —— 自动采集对比数据 

让 Claude 自动完成竞品调研：

  → 打开竞品网站
  → 提取产品功能列表、定价信息
  → 截图关键页面
  → 整理成对比表格

节省大量手动浏览、复制的时间

场景六：表单自动化 —— 批量重复操作 

处理重复性的网页操作：

  → 批量填写表单提交
  → 自动化后台管理操作
  → 定期采集报表数据
  → 自动化审批流程操作

最吸引的我的一点的就是测试用例的自动化验证，无需再手动开启浏览器的方式进行。