如何使用 playwright-mcp？

介绍

你是否尝试过使用 Cursor 或 Claude 来编写 Playwright 测试？结果是不是一团糟？

为什么会这样？因为你的 AI 助手对你的网页一无所知。就像试图向一个被蒙着眼睛的人描述一幅画一样。结果会是：

• 测试不稳定 → AI 在猜测选择器，而且经常猜错。
• 脚本损坏 → 你花在修复测试上的时间比编写测试的时间还多。
• 调试噩梦 → AI 无法“看到”发生了什么。

解决方案

playwright-mcp 赋予浏览器完全可见的能力。通过实时上下文和 DOM 操作，AI 可以像人类一样与网页交互并理解其结构。以下是 playwright-mcp 的主要功能：

• 初始化浏览器 → 打开新的 Playwright 浏览器上下文
• 获取上下文 → 返回当前页面的上下文信息
• 获取完整 DOM → 返回当前页面的完整 HTML 和 CSS 树
• 截取屏幕 → 截取并返回当前页面的截图
• 执行代码 → 在浏览器中安全地执行任意 JavaScript 代码
• 验证选择器 → 确保选择器按预期工作

安装指南

1. 安装 playwright-mcp

   npm install -g playwright-mcp
   

2. 配置 AI 工具

连接到 Cursor

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

   1. 打开终端并运行：
   2. npm install -g playwright-mcp

2. 将其与 Cursor 连接

   1. 找到配置文件
   2. 在 Windows 上：%USERPROFILE%/.cursorrc
   3. 在 macOS 上：~/Library/Application Support/Cursor/cursor_config.json
   4. 更新配置文件

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

3. 重启 Cursor（新的一天开始）

   1. 关闭并重新打开 Cursor 以应用更改。

4. 验证是否正常工作

   1. 如果一切安装正确，AI 将能够看到浏览器上下文并生成高质量的测试代码。

连接到 Claude Desktop

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

   1. 打开终端并运行：
   2. npm install -g playwright-mcp

2. 配置 Claude Desktop

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

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

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

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

4. 验证是否正常工作

   1. 如果一切安装正确，AI 将能够看到浏览器上下文并生成高质量的测试代码。

📖 查看文档