3个最好的浏览器自动化Skill，让AI全自动修复WEB前端BUG

2026-04-20 [2862] technology ai ai-skill ai-agent

文章目录

经常有群友问我：Coding 过程中，怎么把测试和编码都自动化起来？

全面自动化开发

看看你的 Coding 流程，是不是还在用下面这种方式和 AI 沟通：

  1. Coding 之后，手动调试。
  2. 把后端 log 发给 Agent。
  3. 在前端控制台里复制 log 内容发给 Agent。
  4. Agent 调整完成后，再重复上面的 1 到 3 步。

这个流程其实挺低效。

让 Agent 读取后端 log 其实很方便。你只要在 AGENTS.md 或 CLAUDE.md 里把后端 log 的获取方式写清楚，Agent 就会自己去拿。比如下面这样：

告诉 Agent 获取后端 log 的方法

当然，后台管理不是本文重点。本文着重讨论曾老师日常在 Web 前端开发里使用的浏览器自动化工具。有了这些工具，你就能把 Agent 真正接进完整的自动化 Coding 流程里。

下面按我的使用频率，来介绍这 3 个主力工具，最后再补一个常备的 Playwright。

Agent Browser

这是曾老师用得最多的 skill。GitHub 上已经有 30k star，主要用 Rust 编写，项目地址：

https://github.com/vercel-labs/agent-browser

建议安装到全局（macOS）：

1brew install agent-browser
2agent-browser install  # 下载 Chrome for Testing，只需要执行一次

将 Agent 使用的 skill 安装到全局：

1npx skills add vercel-labs/agent-browser@agent-browser -g

Agent Browser 可以读取 DOM 和控制台信息，在开发过程中模拟开发者执行点击、拖动等操作。

agent-browser-help

有了上面的能力，Agent 基本就能代替你去做调试了。只要把通过条件设清楚，理论上它会一直干到功能完成。

Agent Browser 相对于其它工具最大的优势，就是快。后面我讲其它工具时还会再提这点。

Agent-Browser

chrome-devtools-mcp

这是 Google 官方提供的 Chrome MCP 工具，主要用 TypeScript 编写，GitHub 上已经有 36.4k star，项目地址：

https://github.com/ChromeDevTools/chrome-devtools-mcp

chrome-devtools-mcp

由于这是 Google 官方提供的工具，理论上你可以用它来做任何事。

但有一些限制让我很不爽：

  1. 必须开一个临时的 profile。
  2. 如果退出了某个 Agent session，这个 session 里打开的 Chrome 进程也会被 kill。
  3. 默认情况下，只有一个 session 能控制一个 Chrome 进程。
  4. 默认情况下，无法连接已经存在的 Chrome 进程。

例如，在 macOS 上，需要先创建一个新的 Chrome 实例，再连接到临时 profile：

1/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

另一个让我挺不爽的问题是：速度太慢了。

被 Chrome 打开的界面

不知道是不是因为用了 MCP 协议。跟 Agent Browser 对比着用的时候，曾老师总觉得 chrome-devtools-mcp 慢了半拍。当然，也可能只是因为 Claude Code 被限速了……

让 Codex 使用 chrome-devtools-mcp 打开页面

Browser Use

早期曾老师挺常用这个工具。它主要用 Python 编写，GitHub 上已经有 88.9k star，项目地址：

https://github.com/browser-use/browser-use

建议安装到全局环境中（uv 是 Python 的现代包管理器）：

1uv tool add browser-use
2browser-use install # 安装 Chromium 浏览器（只需一次）

安装 Agent 使用的 skill 到全局：

1npx skills add browser-use/browser-use@browser-use -g

Browser Use

和 Agent Browser 类似，Browser Use 本身也是个独立的工具，可以在命令行中独立运行。

你可以借助大模型的力量，让 Browser Use 帮你做各种事……当然，也可以在 Claude Code、Codex 等任意 Agent 里使用。

在运行过程中，Browser Use 会贴心地把浏览器 DOM 里的内容标注清楚，方便你在和 Agent 对话时描述位置。（虽然曾老师觉得这件事没那么必要。）

注意，在日常开发里，你其实不用提这么具体的要求。我这里写得细一点，只是为了行文方便。你只要给出一个需要验证的结果，大模型会自己去想该怎么点击。

在 TUI 中控制浏览器

当然，Browser Use 能做的远不止前端开发。你也可以用它来自动化日常工作，比如登录带验证码的网站、买机票之类的事情……

展现 DOM

Playwright

Playwright 是微软开源的一套 Web 自动化工具，做的事情和前面几个工具类似。GitHub 上已经有 86.9k star。

https://github.com/microsoft/playwright

曾老师日常会用 Playwright 做完整的自动化测试。但只要涉及模拟操作网页，还是更常用上面那 3 个。严格说，Playwright 更像自动化测试基座，不完全算前面那类给 Agent 用的浏览器操作工具，所以我把它放在最后单独说。

Web 自动化小结

下面几张图是 Codex 帮曾老师画的。讲真，跟曾老师自己画的比，还是差那么一点点。算了，凑合用吧……

使用场景

flowchart TD Start["我现在要做什么？"] Debug["前端调试
看 Console / Network / Performance"] Test["写稳定测试 / CI / 跨浏览器自动化"] FastOps["让 Agent 快速打开网页、点击、填表、截图"] Platform["做更完整的 Browser Agent 平台能力
Cloud / Profile / Remote Browser / Agent SDK"] CDM["chrome-devtools-mcp"] PW["Playwright"] AB["agent-browser"] BU["browser-use"] Start --> Debug Start --> Test Start --> FastOps Start --> Platform Debug --> CDM Test --> PW FastOps --> AB Platform --> BU AB -. "也能做部分调试，但不是强项" .-> Debug BU -. "也能做网页操作，但更偏平台层" .-> FastOps PW -. "也能直接脚本化调试页面" .-> Debug CDM -. "可做基础自动化，但核心价值是调试观察" .-> FastOps

选型表格

block-beta columns 5 h0["能力"] h1["Playwright"] h2["chrome-devtools-mcp"] h3["agent-browser"] h4["browser-use"] r1["调试 / 可观测性"] r1a["中\n可脚本调试，但不是主场"] r1b["强\nConsole / Network / Performance"] r1c["中\n有 console/errors/snapshot"] r1d["中\n可观察，但不如 DevTools 专精"] r2["测试 / CI"] r2a["强\n最成熟的测试框架"] r2b["弱\n不是测试框架"] r2c["弱\n偏操作型 CLI"] r2d["中\n能自动化，但非传统测试主力"] r3["跨浏览器"] r3a["强\nChromium / Firefox / WebKit"] r3b["弱\n主要面向 Chrome"] r3c["弱\n主要走 Chrome/CDP"] r3d["弱\n重点不在跨浏览器"] r4["Agent 友好度"] r4a["中\n可用但更偏工程脚本"] r4b["中\n通过 MCP 接给 Agent"] r4c["强\nsnapshot + @ref 很适合 Agent"] r4d["强\nCLI / SDK / Agent workflow"] r5["云 / 远程浏览器"] r5a["中\n可 connect_over_cdp"] r5b["弱\n核心不是浏览器基础设施"] r5c["中\n支持 provider / CDP 连接"] r5d["强\nCloud / Remote Browser 是强项"] r6["登录态 / Profile 复用"] r6a["中\n可保存 storage state"] r6b["弱\n不以此为主"] r6c["中\nprofile / session-name / auto-connect"] r6d["强\nprofile / auth / sync 体系更完整"] classDef header fill:#1f2937,stroke:#111827,color:#fff; classDef rowhead fill:#e5e7eb,stroke:#9ca3af,color:#111827; classDef strong fill:#dcfce7,stroke:#22c55e,color:#14532d; classDef medium fill:#fef3c7,stroke:#f59e0b,color:#92400e; classDef weak fill:#fee2e2,stroke:#ef4444,color:#991b1b; class h0,h1,h2,h3,h4 header class r1,r2,r3,r4,r5,r6 rowhead class r1b,r2a,r3a,r4c,r4d,r5d,r6d strong class r1a,r1c,r1d,r2d,r4a,r4b,r5a,r5c,r6a,r6c medium class r2b,r2c,r3b,r3c,r3d,r5b,r6b weak

关系

graph TD CDP["CDP / Chrome DevTools Protocol"] PW["Playwright"] CDM["chrome-devtools-mcp"] BU["browser-use"] AB["agent-browser"] Agent["AI Agent / Codex / Claude / Cursor"] Chrome["Chrome / Chromium"] Cloud["Cloud Browser / Remote Browser"] CDP --> Chrome PW --> Chrome PW -. "可通过 connect_over_cdp 接入" .-> CDP CDM --> CDP CDM --> Chrome CDM -. "把 DevTools 能力暴露为 MCP tools" .-> Agent AB --> CDP AB --> Chrome AB -. "CLI + snapshot/@eN refs" .-> Agent BU --> CDP BU --> Chrome BU --> Cloud BU -. "CLI / SDK / Agent Platform" .-> Agent PW -. "可接入 browser-use 提供的云浏览器" .-> BU classDef proto fill:#f5f5f5,stroke:#666,color:#111; classDef tool fill:#e8f1ff,stroke:#4a78c2,color:#111; classDef platform fill:#eaf7ea,stroke:#4f8a4f,color:#111; class CDP proto; class PW,CDM,AB tool; class BU platform;

最重要的总结

什么？你说曾老师数学不行，介绍了四个工具？

怎么，买三送一。 你还不乐意了？