wjl
1a0ebde95d
完整的前后端图片分析应用，包含： - 后端：Express + Prisma + SQLite，101个单元测试全部通过 - 前端：React + TypeScript + Vite，47个单元测试，89.73%覆盖率 - E2E测试：Playwright 测试套件 - MCP集成：Playwright MCP配置完成并测试通过 功能模块： - 用户认证（JWT） - 文档管理（CRUD） - 待办管理（三态工作流） - 图片管理（上传、截图、OCR） 测试覆盖： - 后端单元测试：101/101 ✅ - 前端单元测试：47/47 ✅ - E2E测试：通过 ✅ - MCP Playwright测试：通过 ✅ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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/)
|