Files

wjl 1a0ebde95d feat: 初始化 PicAnalysis 项目

完整的前后端图片分析应用，包含：
- 后端：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>

2026-02-22 20:10:11 +08:00

2.5 KiB

Raw Permalink Blame History

📘 MCP Playwright 配置快速指南

Windows 系统配置步骤

1. 找到配置文件

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

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

2. 添加 Playwright MCP 配置

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

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

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

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

3. 关键配置说明

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

正确的配置格式：

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

错误示例（缺少 type）：

{
  "command": "npx",
  "args": ["@playwright/mcp"]  // ❌ 缺少 type 字段
}

4. 使用系统 Chrome

在 Playwright 脚本中使用系统 Chrome：

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

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

5. 验证安装

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

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

6. 完整示例

创建测试脚本 test.cjs:

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();
})();

运行测试：

node test.cjs

常见问题

Q: MCP 配置不生效？

A: 检查是否添加了 type: "stdio" 字段。

Q: 找不到配置文件？

A: 在用户目录下搜索 .claude.json 文件。

Q: 浏览器下载失败？

A: 使用 channel: 'chrome' 直接使用系统 Chrome。

Q: 如何重启 Claude Code？

A: 关闭 VSCode 中的 Claude Code 扩展并重新加载。

2.5 KiB Raw Permalink Blame History Unescape Escape