# Playwright MCP 测试执行手册

## 前置准备

### 1. 启动后端服务

```bash
cd backend
go run main.go
```

后端服务将在 http://localhost:8888 运行。

### 2. 启动前端开发服务器

```bash
cd frontend/react-shadcn/pc
npm run dev
```

前端将在 http://localhost:5173 运行。

### 3. 验证 MCP Playwright 配置

确保 Claude Code 已配置 Playwright MCP 工具。

## 测试执行步骤

### 测试 1: 登录页面

**目标:** 验证登录页面功能和流程

**步骤:**

1. **导航到登录页**
   ```
   mcp__plugin_playwright_playwright__browser_navigate
   url: http://localhost:5173/login
   ```

2. **验证页面元素**
   ```
   mcp__plugin_playwright_playwright__browser_snapshot
   ```
   验证包含: BASE, 管理面板登录, 邮箱地址, 密码, 登录

3. **测试错误凭证**
   - 输入邮箱: wrong@example.com
   - 输入密码: wrongpassword
   - 点击登录
   - 验证错误信息显示

4. **测试正确凭证**
   - 输入邮箱: admin@example.com
   - 输入密码: password123
   - 点击登录
   - 验证跳转到仪表板

### 测试 2: 仪表板页面

**目标:** 验证仪表板数据展示

**步骤:**

1. **确保已登录**（有 token）

2. **导航到仪表板**
   ```
   mcp__plugin_playwright_playwright__browser_navigate
   url: http://localhost:5173/dashboard
   ```

3. **验证统计卡片**
   - 总用户数: 1,234
   - 活跃用户: 856
   - 系统负载: 32%
   - 数据库状态: 正常

4. **验证用户增长趋势图表**

5. **验证最近活动列表**

### 测试 3: 用户管理页面

**目标:** 验证用户 CRUD 操作

**步骤:**

1. **导航到用户管理**
   ```
   mcp__plugin_playwright_playwright__browser_navigate
   url: http://localhost:5173/users
   ```

2. **验证用户列表表格**
   - 表头: ID, 用户名, 邮箱, 手机号, 创建时间, 操作

3. **测试搜索功能**
   - 输入关键词: admin
   - 验证过滤结果

4. **测试创建用户**
   - 点击"添加用户"
   - 填写表单: 用户名, 邮箱, 密码, 手机号
   - 点击"创建"
   - 验证新用户出现在列表

5. **测试编辑用户**
   - 点击编辑按钮
   - 修改信息
   - 点击保存

6. **测试删除用户**
   - 点击删除按钮
   - 确认对话框点击确定
   - 验证用户被移除

### 测试 4: 设置页面

**目标:** 验证设置页面功能

**步骤:**

1. **导航到设置**
   ```
   mcp__plugin_playwright_playwright__browser_navigate
   url: http://localhost:5173/settings
   ```

2. **验证设置分类**
   - 个人设置
   - 通知设置
   - 安全设置
   - 外观设置

3. **测试开关控件**
   - 邮件通知开关
   - 系统消息开关
   - 深色模式开关

### 测试 5: 导航和路由保护

**目标:** 验证导航和权限控制

**步骤:**

1. **测试侧边栏导航**
   - 点击首页 → 验证仪表板
   - 点击用户管理 → 验证用户列表
   - 点击设置 → 验证设置页面

2. **测试未登录访问**
   - 清除 localStorage
   - 直接访问 /dashboard
   - 验证重定向到登录页

3. **测试登出功能**
   - 点击退出登录
   - 验证重定向到登录页

## 测试报告

执行完成后，检查:
- 所有页面是否加载正常
- 所有表单是否能正常提交
- 所有按钮是否能正常点击
- 所有弹窗是否能正常打开/关闭
- 路由保护是否正常工作

## 常见问题

### 1. 页面加载超时
- 检查前端开发服务器是否运行
- 检查网络连接

### 2. 登录失败
- 检查后端服务是否运行
- 检查 API 端点配置

### 3. 元素找不到
- 检查选择器是否正确
- 检查页面是否完全加载