Playwright Recorder

🚀 如何使用 playwright-mcp？

playwright-mcp 是一款能让你的 AI 助手拥有超能力的工具，它可以让 AI 完全“看清”你的网页，从而帮助你更高效、稳定地编写 Playwright 测试。

🚀 快速开始

安装

在终端中运行以下命令进行全局安装：

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 教程。

✨ 主要特性

解决现有问题

在使用 Cursor 或 Claude 编写 Playwright 测试时，会遇到诸多问题：

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

赋予 AI 超能力

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

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

📚 详细文档

📖 查看文档