如何使用 playwright-mcp？

简介

你试过用 Cursor 或 Claude 来编写 Playwright 测试吗？是的，这有点混乱。

为什么呢？因为你的 AI 助手不知道网页上有什么。就像试图向一个蒙着眼睛的人描述一幅画一样。结果会怎样？

• 不稳定的测试 → AI 在猜测选择器，并且经常猜错。
• 损坏的脚本 → 你花更多的时间修复测试而不是编写它们。
• 调试噩梦 → AI 无法“看到”发生了什么，所以你不得不做所有繁重的工作。

如果 AI 能够真正理解你的网页而不是仅仅进行有根据的猜测，那不是很好吗？

进入 playwright-mcp！

playwright-mcp 给你的 AI 助手赋予了超能力，使浏览器完全可见。不再是盲目的工作，你的 AI 助手现在可以实时访问页面 DOM、元素和交互。

playwright-mcp 的工作原理（即我们如何解决这个问题）

安装后，playwright-mcp 启动了一个由 Playwright 控制的浏览器，并给你的 AI 助手提供了完整的访问权限。这解锁了：

1. 记录交互 → 点击、输入、滚动——让 playwright-mcp 将你的操作转化为功能齐全的 Playwright 测试案例。
2. 截图 → 捕获元素或整个页面，以便 AI 获取实际的视觉上下文（不再需要猜测）。
3. 提取 DOM → 抓取整个 HTML 结构，以便 AI 可以生成可靠的选择器。
4. 执行 JavaScript → 在浏览器中运行自定义 JS 用于调试、自动化或仅为了好玩。

为什么你会喜欢 playwright-mcp

🚀 实际工作的 AI 生成测试 → 不再有不稳定的选择器、损坏的测试或猜测。

⏳ 大幅节省时间 → 编写和调试 Playwright 测试的速度提高 5 倍。

🛠️ 更少的头痛 → 你的 AI 助手获得实时页面上下文，因此它可以生成真实的测试案例。

🔌 开箱即用 → 插入到 Cursor、Claude、WindSurf 或你使用的任何工具中——它就是这么简单。

给你的 AI 应得的上下文

厌倦了修复 AI 生成的测试吗？停止调试 AI 的错误猜测——开始编写无瑕疵的 Playwright 测试。使用下面的指南安装 playwright-mcp，并让你的 AI 助手真正帮助你一次。

---

安装：快速启动

先决条件（即在开始前你需要什么）

在安装 playwright-mcp 之前，请确保你拥有：

✅ 已在系统上安装 Node.js（因为它是一个 npm 包）

✅ 已安装 Playwright 和其 Chromium 浏览器

✅ 支持 MCP 的 IDE，如 Cursor

✅ 准备好像专业人士一样自动化的头脑

设置 playwright-mcp（很简单，我保证）

将其连接到你的 IDE（Cursor 设置）

如果你使用的是 Cursor，请按照以下步骤连接 playwright-mcp：

1. 打开 Cursor IDE

2. 导航到设置（⚙️）

3. 选择 Cursor 设置 → 转到 MCP 标签

4. 点击“添加新 MCP 服务器”

5. 填写以下详细信息：

   

   • 名称 → playwright-mcp
   • 命令 → npx -y playwright-mcp

6. 点击“添加”，然后就完成了！🚀

注意：如果点击“添加新 MCP 服务器”打开一个文件（.cursor/mcp.json），粘贴以下代码并保存：

{
  "mcpServers": {
    "playwright-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "playwright-mcp"
      ]
    }
  }
}

现在 Cursor 实际上理解你的网页了。不再基于零上下文提供随机的测试建议！前往 Claude 教程 或 Cursor 教程 详细了解。

---

将其连接到 Claude 桌面

等等……它与其他 AI 助手兼容吗？是的！虽然 playwright-mcp 是为 IDE 设计的，但你也可以使用它与 Claude 桌面编写测试。

1. 安装 playwright-mcp（简单的部分）

   1. 首先，在终端中运行：
   2. npm install -g playwright-mcp

2. 将其连接到 Claude 桌面

   1. 查找配置文件
   2. 在 Windows 上
      1. %APPDATA%\Claude\claude_desktop_config.json
   3. 在 macOS 上：
      1. ~/Library/Application Support/Claude/claude_desktop_config.json
   4. 更新配置文件

   {
     "mcpServers": {
       "playwright": {
         "command": "npx",
         "args": ["-y", "playwright-mcp"]
       }
     }
   }
   

3. 重启 Claude 桌面（因为这是一个新的开始）

   1. 关闭并重新打开 Claude 桌面以应用更改。

4. 验证是否正常工作

   1. 一旦一切设置完毕，让我们测试 Claude 是否真的能与 Playwright 通信。
   2. 打开 Claude 并询问：“列出所有可用的 MCP 工具。”
   3. 如果 playwright-mcp 安装正确，它应该列出如下工具：
      1. get-context
      2. get-full-dom
      3. get-screenshot
      4. execute-code
      5. init-browser
      6. validate-selectors
   4. 让 Claude 初始化浏览器，经过你的批准后，浏览器应该会打开！

现在 Claude 可以访问网页了。你可以让它编写高度相关的测试！前往 Claude 教程 或 Cursor 教程 详细了解。

📖 查看文档