base/frontend/react-shadcn/pc/tests/QUICKSTART.md

🚀 Playwright MCP 测试快速开始

最便捷的执行方式

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

直接在 Claude 中输入：

执行全部 Playwright 测试

或

运行 E2E 测试

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

---

✅ 方式二：执行单个模块

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

---

✅ 方式三：npm 命令

# 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 工具

快速检查：

node tests/check-services.js

---

配置文件

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

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       # 本文件

---

一键复制

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