Cursor中Playwright MCP完整配置指南

1. 环境准备

安装 Node.js 和 npm

# 检查 Node.js 版本（建议 18.0+）node --version

# 检查 npm 版本
npm --version

# 如果未安装，请访问 https://nodejs.org 下载安装 

2. Cursor MCP 配置

方法一：自动配置（推荐）

1. 打开 Cursor IDE
2. 点击右上角齿轮图标 → 打开 Cursor 设置
3. 在左侧菜单中选择 MCP
4. 点击 Add new global MCP server
5. Cursor 会自动创建 mcp.json 配置文件

方法二：手动配置

创建或编辑 .cursor/mcp.json 文件：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

高级配置选项

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser", "chrome",
        "--headless",
        "--vision"
      ],
      "env": {"PLAYWRIGHT_BROWSERS_PATH": "./browsers"}
    }
  }
}

3. 验证安装

检查 MCP 服务器状态

1. 重启 Cursor IDE
2. 在设置 → MCP 中查看服务器状态
3. 确认显示绿色圆点（已连接）

测试基本功能

在 Cursor 聊天窗口中输入：

 请使用 Playwright MCP 打开浏览器，访问 https://demo.playwright.dev/todomvc

4. 自定义 Cursor Rules

创建浏览器调试规则

在项目根目录创建 .cursor/rules/autofix.mdc：

# 浏览器自动调试规则

## 使用场景
当需要调试 Web 应用程序错误时自动激活

## 工作流程
1. 使用 Playwright MCP 打开指定 URL 的浏览器
2. 自动检查页面是否有 JavaScript 错误或 UI 问题
3. 获取页面快照和控制台日志
4. 分析错误根源并生成修复建议
5. 自动修改代码文件
6. 重新测试验证修复效果
7. 如果问题未解决，继续迭代直到成功

## 指令示例
请使用 Playwright MCP 打开浏览器访问我提供的 URL，检查页面错误并自动修复代码中的 bug，持续迭代直到所有错误解决。@file package.json
@file tsconfig.json

使用自动调试规则

在 Cursor 中使用以下命令激活：

@autofix http://localhost:3000

5. 常用调试命令

基本浏览器操作

// 打开页面并获取快照
await page.goto('http://localhost:3000');
await page.screenshot({path: 'debug.png'});

// 检查控制台错误
const errors = await page.evaluate(() => {return window.console.errors || [];
});

// 获取页面 HTML 结构
const html = await page.content();

自动化错误检测

// 检查页面是否有未捕获的异常
page.on('pageerror', exception => {console.log(`Uncaught exception: "${exception}"`);
});

// 监听控制台消息
page.on('console', msg => {if (msg.type() === 'error') {console.log('Console error:', msg.text());
  }
});

6. 故障排除

常见问题及解决方案

1. MCP 服务器无法启动

   # 清理 npm 缓存
   npm cache clean --force
   
   # 重新安装 Playwright
   npx playwright install

2. 浏览器启动失败

   # 检查系统依赖
   npx playwright install-deps

3. 权限问题

   # macOS/Linux
   chmod +x node_modules/.bin/playwright
   
   # Windows (以管理员身份运行)
   Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

4. 网络连接问题

   {
    "mcpServers": {
      "playwright": {
        "command": "npx",
        "args": ["@playwright/mcp@latest"],
        "env": {
          "HTTP_PROXY": "http://proxy.company.com:8080",
          "HTTPS_PROXY": "http://proxy.company.com:8080"
        }
      }
    }
   }

7. 性能优化建议

浏览器实例管理

• 使用无头模式提高执行速度
• 合理配置超时时间
• 及时关闭不需要的浏览器实例

内存优化

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--max-concurrent-tabs", "3",
        "--memory-limit", "1024"
      ]
    }
  }
}

通过以上配置，您就可以在 Cursor 中充分利用 Playwright MCP 的强大功能，实现高效的浏览器自动化调试工作流程。