太神了！Claude Code 竟然能自己打开浏览器干活？

最新推荐文章于 2025-11-14 15:04:35 发布

原创最新推荐文章于 2025-11-14 15:04:35 发布 · 1k 阅读

11 ·

CC 4.0 BY-SA版权

点击上方卡片关注我

设置星标分享更多AI 编程出海

我们习惯让 AI 帮我们「写」代码，其实我们忽略了，Claude Code 不止能写，还能“执行”这些代码。

通过一种新的协议——MCP（Model Context Protocol），Claude Code 可以直接访问外部工具，执行网页访问、自动化操作、数据抓取等任务。

在这些工具中，最值得尝试的一个就是 Playwright MCP。

Playwright 是微软开源的浏览器自动化框架，长期用于网页测试与抓取。

Playwright MCP 则把这一能力接入到 Claude Code 中，可以用自然语言，让 Claude 控制真实浏览器完成任务。

这篇文章带你从零开始，完成一个完整的实战案例：从安装配置 Playwright MCP → 验证 Claude 控制浏览器 → 实战抓取微信公众号账号数据。

让 Claude “动手”的关键协议

MCP，全称 Model Context Protocol，由 Anthropic 推出，是一套让大模型安全访问外部系统的标准化协议。换句话说，它是 AI 与真实世界之间的桥梁。

Claude Code 默认只能“理解”和“生成文字”，通过 MCP，可以安全地调用系统级工具，比如：

浏览器（Playwright MCP）
API 调用（HTTP MCP）
数据库（Supabase MCP）
文档或表格（Feishu MCP）

Playwright MCP 就是其中一个 MCP 工具，它让 Claude 能够在受控环境下操作浏览器，Claude 不再只是“写爬虫脚本”，而是可以自己在浏览器里完成这些动作。

准备工作

要使用 Playwright MCP，需要准备好以下环境：

✅ 基础要求

安装最新版的 Claude Code CLI
已经登录 Claude Code（桌面版或命令行）

✅ 安装命令

在终端执行：

claude mcp add playwright npx '@playwright/mcp@latest'

Claude 会自动下载并注册 Playwright MCP 工具。

执行成功后，可以看到：

✅ Added new MCP tool: playwright

如果出现 “command not found” 提示，先升级 Claude CLI：

npm install -g @anthropic-ai/claude-code

然后重新运行安装命令即可。

✅ 在Claude code命令行安装

也可以直接在Claude code命令行输入“帮我在 Claude Code 环境中配置并安装 Playwright MCP”，Claude code会自动搜索安装。

不用几分钟就可以安装好，并且告诉你如何使用、验证安装。

Playwright MCP初体验

安装完成后，我们验证 Claude 是否能正确调用 Playwright MCP。

在 Claude Code 中输入以下指令：

使用 Playwright MCP 打开浏览器，
访问 https://www.aigocode.com/，
等待页面加载完成后截图，
并返回截图路径。

Claude code会：

这个时候我们按照生成的路径就可以看到执行结果。

当你第一次看到 Claude 自动启动浏览器、生成截图时，就会意识到，它不再只是“写代码”，而是真的能动手执行。

Playwright MCP基本能力

在 Claude Code 中使用 Playwright MCP，可以执行几乎所有 Playwright 原生功能

功能	示例
页面导航	打开网页、跳转到指定 URL
元素交互	点击按钮、输入文字、上传文件
内容提取	获取文本、属性、HTML 结构
网络控制	模拟请求、拦截响应、注入 cookie
多页面控制	同时打开多个标签页或上下文
视觉捕获	截图、生成录屏、比对差异
模拟设备	模拟 iPhone、iPad、Android 等终端
登录态复用	保存登录 session、快速复用用户身份

这意味着可以用 Claude 来自动化很多重复性的网页操作，比如后台登录、数据导出、爬取公开内容、或者自动截图检查网页状态。

实战：Claude 自动抓取公众号对标文章列表

下面用一个实战案例来演示 Claude Code + Playwright MCP 的完整流程：目标是抓取搜狗微信中与“AI 编程”相关的公众号文章列表。

1️⃣ 为什么用搜狗微信？

搜狗微信（weixin.sogou.com）是微信官方内容的搜索入口，可以通过关键词搜索到对标文章内容。

示例网址：

https://weixin.sogou.com/weixin?ie=utf8&s_from=input&_sug_=n&_sug_type_=1&type=2&query=AI%E7%BC%96%E7%A8%8B

2️⃣ Claude 指令（可直接运行）

请使用 Playwright MCP 打开网址：
https://weixin.sogou.com/weixin?type=2&s_from=input&query=AI编程&page=1

执行以下任务：
1. 等待页面加载完成，确认 .news-list li 元素出现；
2. 检查页面是否包含“请输入验证码”：
   - 若出现，请截图保存为 ./captcha/AI编程_page1.png，并提示我人工处理；
   - 若无，继续执行；
3. 遍历页面中每篇文章，提取以下字段：
   - 文章标题（选择器：h3 a）
   - 文章链接（选择器：h3 a 的 href）
   - 作者（选择器：.account 或 .s-p）
   - 发布时间（选择器：.s2）
   - 摘要（选择器：.txt-info）
4. 将提取结果保存为 JSON 数组，结构如下：
   {
     "keyword": "AI编程",
     "rank": 序号,
     "title": "文章标题",
     "author": "公众号名称",
     "publish_date": "发布时间",
     "summary": "摘要",
     "url": "文章链接"
   }
5. 然后将结果导出为 Excel 文件：
   - 文件路径：./data/AI编程_相关文章.xlsx；
   - 表头为：关键词、序号、标题、作者、发布时间、摘要、文章链接；
   - 每行写入一篇文章的数据；
6. 执行完成后，返回文件路径和 “已生成 Excel 文件” 的提示。