如何使用 playwright-mcp？

介绍

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

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

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

如果 AI 能够真正理解你的网页会有多好？

引入 playwright-mcp！

playwright-mcp 让你的 AI 助手拥有超能力，使其完全可见。一旦安装，playwright-mcp 会启动一个受 Playwright 控制的浏览器，并让你的 AI 助手对其进行全面访问。这解锁了：

1. 记录交互 → 点击、输入、滚动——让 playwright-mcp 将你的操作转化为测试代码。
2. 获取完整 DOM → 直接从浏览器中检索 HTML 和 CSS 信息，确保选择器准确无误。
3. 截取屏幕快照 → 获取页面的截图，用于验证 UI 变化。
4. 执行代码 → 在浏览器中运行自定义 JavaScript 代码，测试动态功能。
5. 初始化浏览器 → 启动新的浏览器上下文，开始新的测试会话。
6. 验证选择器 → 确保选择器不会因页面变化而失效。

安装

在终端中运行以下命令：

npm install -g playwright-mcp

与 Cursor 结合使用

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

   npm install -g playwright-mcp
   

2. 更新配置文件
   • 打开 %USERPROFILE%/.cursorrc 文件。
   • 添加以下内容：

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

3. 重启 Cursor（一切都会变得更好）
4. 验证是否正常工作
   • 在 Cursor 中输入以下命令：

     list available mcp tools
     

   • 如果安装正确，应该会看到工具列表：
     1. get-context
     2. get-full-dom
     3. get-screenshot
     4. execute-code
     5. init-browser
     6. validate-selectors

现在，Cursor 已经连接到浏览器，并且可以编写高度上下文相关的测试！了解更多，请参阅 Cursor 教程。

与 Claude Desktop 结合使用

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

   npm install -g playwright-mcp
   

2. 更新配置文件
   • 找到配置文件：
     • Windows: %APPDATA%\Claude\claude_desktop_config.json
     • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
   • 更新为以下内容：

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

3. 重启 Claude Desktop（开启新世界）
4. 验证是否正常工作
   • 在 Claude 中输入以下命令：

     list available mcp tools
     

   • 如果安装正确，应该会看到工具列表：
     1. get-context
     2. get-full-dom
     3. get-screenshot
     4. execute-code
     5. init-browser
     6. validate-selectors

现在，Claude 已经能够访问网页，并可以编写高度相关的测试！了解更多，请参阅 Claude Desktop 教程。

📖 查看文档