135 lines
2.5 KiB
Markdown
135 lines
2.5 KiB
Markdown
|
# 📘 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/)
|