Claude Code + Playwright MCP 安装与验证

前言

上一篇文章我们聊了 为什么要学 AI 测试，这篇就动手实践——安装 Claude Code CLI 并配置 Playwright MCP Server。

完成本文后，你将能用自然语言驱动 Playwright 完成 Web 自动化测试。

环境准备

系统要求

• Node.js 18+ （推荐 20 LTS）
• npm 或 pnpm
• Git
• VS Code（可选，但强烈推荐用于编辑配置文件）

检查环境

node --version
# 应输出 v18.x 或 v20.x

npm --version
# 应输出 9.x 或 10.x

第一步：安装 Playwright MCP Server

Playwright MCP Server 是微软官方提供的 MCP 服务器，让 AI 模型能直接控制浏览器。

# 全局安装 Playwright MCP Server
npm install -g @anthropic/mcp-server-playwright

# 安装 Playwright 浏览器
npx playwright install chromium

验证安装

npx @anthropic/mcp-server-playwright --version

如果输出版本号，说明安装成功。

第二步：配置 Claude Code

创建配置文件

在用户目录下创建 .claude.json 配置文件：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-server-playwright"],
      "env": {}
    }
  }
}

配置文件位置

• Windows: %USERPROFILE%\.claude.json
• macOS/Linux: ~/.claude.json

验证 MCP 连接

启动 Claude Code 后，检查 MCP 工具是否已加载：

claude

在交互界面中输入 /mcp，应该能看到 playwright 服务器及它提供的工具列表：

• browser_navigate - 导航到 URL
• browser_click - 点击元素
• browser_type - 输入文本
• browser_screenshot - 截图
• browser_evaluate - 执行 JavaScript

第三步：第一个 AI 驱动的测试

测试目标

用自然语言让 Claude Code + Playwright 完成以下操作：

1. 打开百度首页
2. 搜索 "AI 测试"
3. 验证搜索结果不为空
4. 截图保存

执行

在 Claude Code 中输入：

请使用 Playwright 完成以下测试：
1. 导航到 https://www.baidu.com
2. 在搜索框输入 "AI 测试"
3. 点击搜索按钮
4. 等待结果加载
5. 截图保存为 baidu-search-result.png
6. 告诉我搜索结果的标题列表

预期结果

Claude Code 会自动：

1. 启动浏览器
2. 执行每个步骤
3. 截图并保存
4. 返回搜索结果文本

进阶：编写 MCP 测试配置

将浏览器测试封装到项目的 MCP 配置中：

// .mcp.json（项目根目录）
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-server-playwright"],
      "env": {
        "PLAYWRIGHT_BROWSERS_PATH": "0"
      }
    }
  }
}

常见问题

Q: npx playwright install 报错？

确保网络环境正常，或使用国内镜像：

set PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright/
npx playwright install chromium

Q: Claude Code 连不上 MCP Server？

检查 .claude.json 路径是否正确，以及 MCP Server 是否成功安装：

npx @anthropic/mcp-server-playwright --help

Q: 浏览器启动失败？

可能是缺少系统依赖。Linux 用户请运行：

npx playwright install-deps chromium

小结

完成本文的操作后，你已经：

• ✅ 安装了 Playwright MCP Server
• ✅ 配置了 Claude Code 的 MCP 连接
• ✅ 用自然语言完成了第一个 AI 驱动的浏览器测试
• ✅ 了解了常见问题的解决方法

下一步： 尝试用 Claude Code + Playwright 测试你自己的项目，体验 AI 测试的实际效率提升。

---

下一篇预告：从 0 到 1 创建 AI Testing Agent —— 把 AI 测试能力封装成可复用的 Agent。