🚀 如何使用 playwright-mcp？
playwright-mcp 是一款强大的工具，它能解决在使用 AI 编写 Playwright 测试时遇到的难题，让 AI 也能像人类一样与网页交互。下面为你详细介绍其使用方法。
🚀 快速开始
你是否尝试过使用 Cursor 或 Claude 来编写 Playwright 测试？结果是不是一团糟？这是因为你的 AI 助手对你的网页一无所知，就像试图向一个被蒙着眼睛的人描述一幅画一样。使用 AI 编写测试往往会导致以下问题：
- 测试不稳定 → AI 在猜测选择器，而且经常猜错。
- 脚本损坏 → 你花在修复测试上的时间比编写测试的时间还多。
- 调试噩梦 → AI 无法“看到”发生了什么。
✨ 主要特性
playwright-mcp 赋予浏览器完全可见的能力。通过实时上下文和 DOM 操作，AI 可以像人类一样与网页交互并理解其结构。以下是 playwright-mcp 的主要功能：
- 初始化浏览器 → 打开新的 Playwright 浏览器上下文
- 获取上下文 → 返回当前页面的上下文信息
- 获取完整 DOM → 返回当前页面的完整 HTML 和 CSS 树
- 截取屏幕 → 截取并返回当前页面的截图
- 执行代码 → 在浏览器中安全地执行任意 JavaScript 代码
- 验证选择器 → 确保选择器按预期工作
📦 安装指南
安装 playwright-mcp
npm install -g playwright-mcp
配置 AI 工具
连接到 Cursor
- 安装 playwright-mcp
- 打开终端并运行：
npm install -g playwright-mcp
- 打开终端并运行：
- 将其与 Cursor 连接
- 找到配置文件：
- 在 Windows 上：
%USERPROFILE%/.cursorrc - 在 macOS 上：
~/Library/Application Support/Cursor/cursor_config.json
- 在 Windows 上：
- 更新配置文件：
- 找到配置文件：
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "playwright-mcp"]
}
}
}
- 重启 Cursor
- 关闭并重新打开 Cursor 以应用更改。
- 验证是否正常工作
- 如果一切安装正确，AI 将能够看到浏览器上下文并生成高质量的测试代码。
连接到 Claude Desktop
- 安装 playwright-mcp
- 打开终端并运行：
npm install -g playwright-mcp
- 打开终端并运行：
- 配置 Claude Desktop
- 找到配置文件：
- 在 Windows 上：
%APPDATA%\Claude\claude_desktop_config.json - 在 macOS 上：
~/Library/Application Support/Claude/claude_desktop_config.json
- 在 Windows 上：
- 更新配置文件：
- 找到配置文件：
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "playwright-mcp"]
}
}
}
- 重启 Claude Desktop
- 关闭并重新打开 Claude Desktop 以应用更改。
- 验证是否正常工作
- 如果一切安装正确，AI 将能够看到浏览器上下文并生成高质量的测试代码。