# 🚀 Playwright MCP 测试快速开始

## 最便捷的执行方式

### ✅ 方式一：一句话执行（推荐）

直接在 Claude 中输入：

```
执行全部 Playwright 测试
```

或

```
运行 E2E 测试
```

Claude 会自动按顺序执行所有 23 个测试用例。

---

### ✅ 方式二：执行单个模块

```
执行登录测试
执行仪表板测试
执行用户管理测试
执行设置页面测试
执行导航测试
```

---

### ✅ 方式三：npm 命令

```bash
# 1. 进入项目目录
cd frontend/react-shadcn/pc

# 2. 检查服务状态
node tests/check-services.js

# 3. 启动测试环境（自动启动前后端）
npm run test:e2e
```

---

## 测试执行流程

```
┌─────────────────────────────────────────┐
│  1. 登录测试 (4个用例)                   │
│     ├── 访问登录页面                    │
│     ├── 验证页面结构                    │
│     ├── 测试错误登录                    │
│     └── 测试正确登录                    │
├─────────────────────────────────────────┤
│  2. 导航测试 (4个用例)                   │
│     ├── 验证侧边栏导航                  │
│     ├── 测试页面跳转                    │
│     ├── 测试路由保护                    │
│     └── 测试退出登录                    │
├─────────────────────────────────────────┤
│  3. 仪表板测试 (4个用例)                 │
│     ├── 访问仪表板                      │
│     ├── 验证统计卡片                    │
│     ├── 验证用户增长图表                │
│     └── 验证最近活动                    │
├─────────────────────────────────────────┤
│  4. 用户管理测试 (6个用例)               │
│     ├── 访问用户管理页                  │
│     ├── 验证用户表格                    │
│     ├── 测试搜索功能                    │
│     ├── 测试创建用户弹窗                │
│     ├── 测试编辑用户弹窗                │
│     └── 测试表单验证                    │
├─────────────────────────────────────────┤
│  5. 设置页面测试 (5个用例)               │
│     ├── 访问设置页                      │
│     ├── 验证设置分类                    │
│     ├── 测试邮件通知开关                │
│     ├── 测试系统消息开关                │
│     └── 测试深色模式开关                │
└─────────────────────────────────────────┘
           总计: 23个测试用例
```

---

## 前置检查清单

执行测试前，确保：

- [ ] 后端服务运行在 http://localhost:8888
- [ ] 前端服务运行在 http://localhost:5175
- [ ] Claude 已启用 Playwright MCP 工具

快速检查：
```bash
node tests/check-services.js
```

---

## 配置文件

如需修改测试配置，编辑 `tests/config.ts`：

```typescript
export const TEST_CONFIG = {
  baseURL: 'http://localhost:5175',        // 前端地址
  apiURL: 'http://localhost:8888/api/v1',  // 后端地址
  testUser: {
    email: 'admin@example.com',
    password: 'password123',
  },
};
```

---

## 故障排除

| 问题 | 解决方案 |
|------|----------|
| 页面加载超时 | 检查 `npm run test:check` |
| 登录失败 | 确认测试用户存在于数据库 |
| MCP 工具错误 | 检查 Claude Settings > MCP Servers |
| 元素找不到 | 检查选择器配置是否正确 |

---

## 文件说明

```
tests/
├── config.ts           # 测试配置
├── mcp-executor.ts     # MCP 执行器
├── index.ts            # 测试套件定义
├── login.test.ts       # 登录测试
├── dashboard.test.ts   # 仪表板测试
├── users.test.ts       # 用户管理测试
├── settings.test.ts    # 设置测试
├── navigation.test.ts  # 导航测试
├── check-services.js   # 服务检查脚本
├── run-tests.bat       # Windows 启动脚本
├── runner.ts           # 测试运行器
├── EXECUTION_GUIDE.md  # 完整执行手册
└── QUICKSTART.md       # 本文件
```

---

## 一键复制

```bash
# 完整测试命令（复制到 Claude）
执行全部 Playwright 测试，包括：登录测试、仪表板测试、用户管理测试、设置页面测试、导航测试。生成测试报告。
```