# 📘 MCP Playwright 配置快速指南

## Windows 系统配置步骤

### 1. 找到配置文件

Claude Code 在 Windows 上的配置文件位置：

```
C:\Users\{你的用户名}\.claude.json
C:\Users\{你的用户名}\.claude\settings.json
```

### 2. 添加 Playwright MCP 配置

在 `.claude.json` 文件中的 `mcpServers` 部分添加：

```json
"playwright": {
  "type": "stdio",
  "command": "npx",
  "args": ["-y", "@playwright/mcp@latest"]
}
```

在 `.claude/settings.json` 文件中添加：

```json
"mcpServers": {
  "playwright": {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "@playwright/mcp@latest"]
  }
}
```

### 3. 关键配置说明

⚠️ **重要**: `type` 字段是必需的！

正确的配置格式：
```json
{
  "type": "stdio",      // 必需：指定通信方式
  "command": "npx",     // 必需：执行命令
  "args": ["-y", "@playwright/mcp@latest"]  // 必需：命令参数
}
```

错误示例（缺少 type）：
```json
{
  "command": "npx",
  "args": ["@playwright/mcp"]  // ❌ 缺少 type 字段
}
```

### 4. 使用系统 Chrome

在 Playwright 脚本中使用系统 Chrome：

```javascript
const { chromium } = require('playwright');

const browser = await chromium.launch({
  channel: 'chrome',     // 使用系统 Chrome
  headless: false        // 显示浏览器窗口
});
```

### 5. 验证安装

运行以下命令验证 MCP 安装：

```bash
npx -y @playwright/mcp@latest --help
```

### 6. 完整示例

创建测试脚本 `test.cjs`:

```javascript
const { chromium } = require('playwright');

(async () => {
  // 启动浏览器
  const browser = await chromium.launch({
    channel: 'chrome',
    headless: false
  });

  const page = await browser.newPage();

  // 访问页面
  await page.goto('http://localhost:3000');

  // 截图
  await page.screenshot({ path: 'test.png' });

  // 关闭浏览器
  await browser.close();
})();
```

运行测试：
```bash
node test.cjs
```

---

## 常见问题

### Q: MCP 配置不生效？
A: 检查是否添加了 `type: "stdio"` 字段。

### Q: 找不到配置文件？
A: 在用户目录下搜索 `.claude.json` 文件。

### Q: 浏览器下载失败？
A: 使用 `channel: 'chrome'` 直接使用系统 Chrome。

### Q: 如何重启 Claude Code？
A: 关闭 VSCode 中的 Claude Code 扩展并重新加载。

---

## 相关链接

- [MCP 官方文档](https://modelcontextprotocol.io/)
- [Playwright MCP](https://www.npmjs.com/package/@playwright/mcp)
- [Claude Code 文档](https://code.anthropic.com/)