【Agent工坊】Playwright MCP 实战：让 AI Agent 操控浏览器，自动化一切网页操作

实测效果：一个典型的电商产品页，原始 HTML 约 200KB（~50000 token），accessibility snapshot 只有约 2KB（~500 token）。Token 节省 99%，但 Agent 拿到的信息反而更精准。

五大浏览器自动化方案对比

在进入实战之前，先看清 2026 年整个赛道的格局：

结论：DOM 驱动方案比视觉驱动方案可靠 12-17 个百分点，且成本低一个数量级。Playwright MCP 是 DOM 赛道的默认首选——本地运行、零额外基础设施成本、文档完善。

安装与配置（5 分钟）

▲ Playwright MCP架构：AI Agent通过MCP协议操控浏览器

前置要求

• Node.js 18 或更高版本
• 一个支持 MCP 的 AI 客户端（Claude Code、Hermes Agent、Cursor 等）

第一步：安装 Playwright MCP

Playwright MCP 不需要单独安装——通过 npx 按需运行即可：

首次运行会自动下载 Playwright 浏览器内核（Chromium 约 150MB），耐心等待 1-2 分钟。

第二步：在 Claude Code 中配置

编辑 ~/.claude/settings.json（全局配置）或项目的 .claude/settings.json：

保存后重启 Claude Code，输入 /mcp 查看工具列表。如果你看到 browser_navigate、browser_click、browser_snapshot 等工具，说明配置成功。

第三步：在 Hermes Agent 中配置

如果你用 Hermes Agent，配置同样简单：

重启后在聊天框输入 /tools，确认 Playwright 的工具已加载。

▲ Playwright MCP工具清单：12+工具覆盖完整浏览器操控

实战一：自动提取竞品价格（数据提取）

场景：你的 SaaS 产品需要每天监控 3 个竞品的定价页面变化。以前的做法是手工打开网页、复制价格、贴到表格。现在交给 Agent。

在 Claude Code 中直接说：

「打开 pricing.json」

Agent 的执行过程（你在终端能看到每一步）：

1. browser_navigate → 打开定价页
2. browser_snapshot → 获取 accessibility snapshot（结构化的页面信息）
3. 从 snapshot 中提取套餐名和价格（LLM 推理）
4. 写入 pricing.json

你不需要写任何选择器、XPath、正则表达式。Agent 自己理解页面结构并提取数据。

进阶技巧：定时执行

在 CLAUDE.md（项目根目录的 Agent 配置文件）中加入：

Claude Code 的定时能力由底层 Agent 引擎驱动（Hermes Agent 用 Cron Job，Claude Code 用 Hooks + 外部调度器）。

实战二：批量填表提交（表单自动化）

场景：你需要在某个 SaaS 平台上批量创建 50 个测试账号。每个账号需要不同的邮箱、密码、组织名。手动操作至少 2 小时。

第一步：准备数据文件

创建 accounts.json：

第二步：对 Agent 下达指令

「读取 accounts.json，对每一行数据，打开注册页面填写表单并提交。记录每个账号的注册结果到 results.json」

Agent 会：

1. 读取 accounts.json
2. 循环：browser_navigate → 识别表单字段（通过 accessibility labels）→ browser_fill 填写 → browser_click 提交 → 记录结果
3. 如遇错误（如邮箱已注册），记录并跳过，继续下一个

为什么这比传统 Playwright 脚本强

传统 Playwright 脚本的痛点：选择器变化时脚本直接崩溃，需要人工修复。Agent 模式的优势：即使页面改版（按钮从 变成 ），Agent 通过语义理解「提交按钮」依然能点击成功。

代价：单次任务比传统脚本慢 2-5 倍（LLM 推理延迟），但零维护成本。适合低频（每天几十次以内）的自动化任务。

实战三：监控网页变化（自动巡检）

场景：你的团队依赖某个第三方文档站（如 API 文档），你想第一时间知道文档更新了什么。

方案：Playwright MCP + Cron

Hermes Agent 用户可以直接在聊天中说：

「每天早上 8 点，访问 3 条更新，发到 Telegram」

Hermes 会自动创建 Cron Job，到点执行 Playwright MCP 工具链。

如果你是 Claude Code 用户，用 crontab 配合 CLI 模式：

# 添加到 crontab

0 8 * * * cd /path/to/project && echo "访问 changelog 页面，提取最新更新并输出摘要" | claude --print --output-format json > /tmp/changelog-$(date +\%Y\%m\%d).json

Claude Code 的 --print 模式不进入交互，直接输出结果后退出——适合脚本化调用。

Playwright MCP 工具清单

配置完成后，你的 Agent 可以用以下工具（完整列表）：

工具名	功能	典型用法
browser_navigate	打开 URL	打开目标页面
browser_snapshot	获取页面结构化快照	理解页面内容、提取数据
browser_click	点击元素（按文本或角色）	点击按钮、链接
browser_fill	填写表单	自动填写输入框
browser_type	逐字输入（模拟人工打字）	需要触发前端验证的场景
browser_select	选择下拉菜单	选择套餐类型、国家等
browser_hover	悬停元素	触发 tooltip、下拉菜单
browser_press_key	按键操作	回车提交、ESC 关闭弹窗
browser_take_screenshot	截图（用于视觉验证）	确认操作结果
browser_evaluate	执行 JavaScript	高级场景：获取动态数据
browser_close	关闭浏览器	任务结束清理
browser_wait	等待指定时间或文本出现	等待页面加载完成
browser_console_messages	读取浏览器控制台输出	调试 JS 错误
browser_network_requests	查看网络请求	验证 API 调用

关键技巧：用 browser_snapshot 而非 browser_take_screenshot 获取页面内容。 Snapshot 让 Agent「读懂」页面结构；Screenshot 让 Agent「看到」页面外观——两者互补。先用 snapshot 完成任务，只在需要视觉确认时截图。

踩坑提醒

坑1：MCP 连接失败，提示 "not found"

最常见的错误是输错了包名。正确命令是：

npx -y @playwright/mcp@latest

注意是 @playwright/mcp，不是 playwright-mcp 也不是 @playwright-mcp。

坑2：页面内容提取不完整

Accessibility snapshot 依赖网页的正确语义化标记。如果页面用

模拟按钮、没有 aria-label、没有 关联输入框，snapshot 可能丢失关键信息。

解决方案：换用 browser_evaluate 执行自定义 JavaScript 提取数据：

// Agent 可以执行这样的 JS（通过 browser_evaluate 工具）

document.querySelectorAll('.pricing-card').map(card => ({

  name: card.querySelector('h3').innerText,

  price: card.querySelector('.price').innerText

}))

坑3：网站检测到自动化工具

Playwright 默认使用真实的浏览器内核，大多数网站不会检测。但如果目标网站用了严格的反爬（如 Cloudflare Bot Management），Playwright MCP 原生方案可能不够。

升级方案：改用 Browserbase MCP（云托管浏览器 + 住宅代理 + 自动验证码处理），成本上升到 $0.10-0.40/次，但能过大多数反爬。

坑4：Agent 执行到一半「忘了」自己在哪里

长对话中，Agent 的上下文可能被之前的操作填满（尤其是 multiple browser_snapshot 调用）。这会导致 Agent 「迷路」——明明在第 3 步的页面，却以为自己在第 1 步。

解决方案：每隔 3-5 步明确告诉 Agent：

「你现在在定价页面。下一个操作：点击 'Start Free Trial' 按钮」

或者使用 /compact 命令压缩对话历史（Claude Code 支持）。

坑5：cron 定时任务的时区问题

Cron 默认使用系统时区。如果服务器在 UTC 时区但你想北京时间 9:00 执行：

# 北京时间 = UTC+8，所以 9:00 北京 = 1:00 UTC

0 1 * * * /path/to/script.sh

或者在 crontab 文件顶部加上：

CRON_TZ=Asia/Shanghai

0 9 * * * /path/to/script.sh

常见问题（FAQ）

Q：Playwright MCP 和传统 Playwright 脚本有什么区别？ A：传统 Playwright 脚本是你手动写 .js/.py 控制浏览器（page.click('.submit-btn')），选择器变了脚本就坏了。Playwright MCP 是让 AI Agent 来操控浏览器——Agent 通过「语义理解」识别按钮（「那个写着提交的蓝色按钮」），不依赖 CSS 选择器，页面改版也能自适应。代价是每次执行需要 LLM 推理，比传统脚本慢 2-5 倍，成本高一点。

Q：支持哪些浏览器？ A：Chromium（默认）、Firefox、WebKit（Safari 内核）、Microsoft Edge。在 MCP 配置中可以通过参数指定。大多数场景用默认 Chromium 即可。

Q：能在无头模式（headless）下运行吗？ A：可以。在 MCP 配置参数中加 --headless：

{

  "mcpServers": {

    "playwright": {

      "command": "npx",

      "args": ["-y", "@playwright/mcp@latest", "--headless"]

    }

  }

}

无头模式适合服务器环境（没有桌面显示器），但部分网站的渲染行为可能不同。

Q：需要额外付费吗？ A：Playwright MCP 本身完全免费开源。你需要付费的是：

1. 调用 LLM 的 API 费用（每次浏览器操作大约消耗 500-2000 token，取决于页面复杂度）
2. 如果使用 Browserbase 等云托管服务，按浏览器运行时间付费（约 $0.10/分钟）

以 GPT-5.5 为例，一次典型的竞品价格提取（3 个页面、约 10 次浏览器操作）约消耗 $0.03-0.05。

Q：和 Anthropic Computer Use 应该选哪个？ A：优先选 Playwright MCP（DOM 驱动，92% 可靠性）。只在以下情况用 Computer Use：

• 目标网站是纯 Canvas/WebGL 应用（没有 DOM 可读）
• 需要绕过反爬虫（视觉方式更不像机器人）
• Administrativia 类任务（操作非标准 UI）

绝大多数网页任务用 Playwright MCP 更快、更便宜、更可靠。

---

#AI创业 #MCP #Playwright #浏览器自动化 #AI教程 #一人公司 #Agent工坊

本文由AI辅助创作，经人工审核编辑发布