# Playwright MCP 测试脚本实施计划

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** 为 react-shadcn/pc 项目编写完整的 Playwright MCP 端到端测试脚本，覆盖所有页面和核心功能。

**Architecture:** 使用 Playwright MCP 浏览器工具进行端到端测试。测试将直接调用 MCP Playwright 工具进行页面操作和断言，无需安装额外的测试框架依赖。

**Tech Stack:** Playwright MCP (@anthropic-ai/playwright-mcp), TypeScript, React + Vite

---

## 项目结构分析

### 应用路由
| 路由 | 页面组件 | 功能描述 |
|------|----------|----------|
| `/login` | LoginPage | 用户登录页面，包含邮箱、密码输入和登录按钮 |
| `/dashboard` | DashboardPage | 仪表板，展示统计数据、图表和最近活动 |
| `/users` | UserManagementPage | 用户管理，CRUD 操作、搜索、表格展示 |
| `/settings` | SettingsPage | 系统设置，个人设置、通知、安全、外观 |

### UI 组件
- `Button`, `Input`, `Card`, `Modal`, `Table` - 基础 UI 组件
- `Sidebar`, `Header`, `MainLayout`, `ProtectedRoute` - 布局组件

### API 端点
- `POST /auth/login` - 登录
- `GET /user/users` - 获取用户列表
- `POST /user/user` - 创建用户
- `PUT /user/user/:id` - 更新用户
- `DELETE /user/user/:id` - 删除用户

---

## 测试覆盖计划

### Task 1: 项目准备和 MCP 配置

**Files:**
- Create: `frontend/react-shadcn/pc/tests/README.md`
- Create: `frontend/react-shadcn/pc/tests/config.ts`

**Step 1: 创建测试配置**

```typescript
// tests/config.ts
export const TEST_CONFIG = {
  // 测试环境配置
  baseURL: 'http://localhost:5173', // Vite 默认开发服务器
  apiURL: 'http://localhost:8888/api/v1',

  // 测试用户凭证
  testUser: {
    email: 'admin@example.com',
    password: 'password123',
  },

  // 测试超时配置
  timeouts: {
    navigation: 10000,
    element: 5000,
    api: 5000,
  },
};

// 页面路由
export const ROUTES = {
  login: '/login',
  dashboard: '/dashboard',
  users: '/users',
  settings: '/settings',
};

// 选择器定义
export const SELECTORS = {
  login: {
    emailInput: 'input[type="email"]',
    passwordInput: 'input[type="password"]',
    submitButton: 'button[type="submit"]',
    errorMessage: '.text-red-400',
  },
  sidebar: {
    dashboardLink: 'a[href="/dashboard"]',
    usersLink: 'a[href="/users"]',
    settingsLink: 'a[href="/settings"]',
    logoutButton: 'button[title="退出登录"]',
  },
  dashboard: {
    statsCards: '.grid > div',
    chartContainer: '.h-64',
    activityList: '.space-y-4 > div',
  },
  users: {
    searchInput: 'input[placeholder*="搜索"]',
    addButton: 'button:has-text("添加用户")',
    table: 'table',
    tableRows: 'tbody tr',
    editButton: 'button:has(> svg[data-lucide="Edit2"])',
    deleteButton: 'button:has(> svg[data-lucide="Trash2"])',
    modal: {
      container: '[role="dialog"]',
      usernameInput: 'input[placeholder*="用户名"]',
      emailInput: 'input[type="email"]',
      passwordInput: 'input[type="password"]',
      phoneInput: 'input[placeholder*="手机号"]',
      saveButton: 'button:has-text("保存"), button:has-text("创建")',
      cancelButton: 'button:has-text("取消")',
    },
  },
};
```

**Step 2: 编写 README 文档**

```markdown
# Playwright MCP 测试

本测试套件使用 Playwright MCP 工具进行端到端测试。

## 前置条件

1. 启动后端服务: `cd backend && go run main.go`
2. 启动前端开发服务器: `cd frontend/react-shadcn/pc && npm run dev`
3. 确保 MCP Playwright 工具已配置

## 测试场景

- 登录/登出流程
- 仪表板页面验证
- 用户管理 CRUD
- 设置页面验证
- 导航和路由保护

## 运行测试

通过 Claude Code 的 MCP Playwright 工具手动执行测试步骤。
```

**Step 3: Commit**

```bash
git add frontend/react-shadcn/pc/tests/
git commit -m "test: add Playwright MCP test configuration and documentation"
```

---

### Task 2: 登录页面测试

**Files:**
- Create: `frontend/react-shadcn/pc/tests/login.test.ts`

**Step 1: 编写登录页面测试脚本**

```typescript
// tests/login.test.ts
import { TEST_CONFIG, ROUTES, SELECTORS } from './config';

/**
 * 测试场景: 登录页面功能
 *
 * 前置条件:
 * 1. 前端开发服务器运行在 http://localhost:5173
 * 2. 后端 API 服务运行在 http://localhost:8888
 */

export const loginTests = {
  name: '登录页面测试',

  // Test 1: 页面加载和元素验证
  async testPageLoad() {
    console.log('🧪 Test: 登录页面加载验证');

    // 导航到登录页
    await mcp__plugin_playwright_playwright__browser_navigate({
      url: `${TEST_CONFIG.baseURL}${ROUTES.login}`
    });

    // 等待页面加载
    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

    // 获取页面快照验证元素
    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 验证关键元素存在
    console.assert(
      snapshot.includes('BASE') && snapshot.includes('管理面板登录'),
      '页面标题和副标题应该显示'
    );
    console.assert(
      snapshot.includes('邮箱地址') && snapshot.includes('密码'),
      '表单标签应该显示'
    );
    console.assert(
      snapshot.includes('登录'),
      '登录按钮应该显示'
    );

    console.log('✅ 登录页面加载验证通过');
  },

  // Test 2: 表单验证 - 空字段提交
  async testEmptyFormValidation() {
    console.log('🧪 Test: 空表单验证');

    // 清空输入框并提交
    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 由于浏览器原生验证，空邮箱和密码应该阻止提交
    // 这里我们验证输入框有 required 属性
    console.log('✅ 表单应该有浏览器原生验证');
  },

  // Test 3: 错误凭证登录
  async testInvalidCredentials() {
    console.log('🧪 Test: 错误凭证登录');

    // 输入错误的邮箱
    await mcp__plugin_playwright_playwright__browser_type({
      element: '邮箱输入框',
      ref: await findInputRef('email'),
      text: 'wrong@example.com'
    });

    // 输入错误的密码
    await mcp__plugin_playwright_playwright__browser_type({
      element: '密码输入框',
      ref: await findInputRef('password'),
      text: 'wrongpassword'
    });

    // 点击登录按钮
    const loginButtonRef = await findButtonRef('登录');
    await mcp__plugin_playwright_playwright__browser_click({
      element: '登录按钮',
      ref: loginButtonRef
    });

    // 等待响应
    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

    // 验证错误信息显示
    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
    console.assert(
      snapshot.includes('登录失败') || snapshot.includes('错误'),
      '应该显示登录错误信息'
    );

    console.log('✅ 错误凭证登录测试通过');
  },

  // Test 4: 成功登录
  async testSuccessfulLogin() {
    console.log('🧪 Test: 成功登录');

    // 清除之前的输入，重新输入正确凭证
    await mcp__plugin_playwright_playwright__browser_navigate({
      url: `${TEST_CONFIG.baseURL}${ROUTES.login}`
    });
    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

    // 输入正确的邮箱
    const emailInput = await findElementByPlaceholder('user@example.com');
    await mcp__plugin_playwright_playwright__browser_type({
      element: '邮箱输入框',
      ref: emailInput,
      text: TEST_CONFIG.testUser.email
    });

    // 输入正确的密码
    const passwordInput = await findElementByPlaceholder('••••••••');
    await mcp__plugin_playwright_playwright__browser_type({
      element: '密码输入框',
      ref: passwordInput,
      text: TEST_CONFIG.testUser.password
    });

    // 点击登录按钮
    const loginButton = await findButtonByText('登录');
    await mcp__plugin_playwright_playwright__browser_click({
      element: '登录按钮',
      ref: loginButton
    });

    // 等待跳转
    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 3 });

    // 验证跳转到仪表板
    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
    console.assert(
      snapshot.includes('首页') || snapshot.includes('总用户数'),
      '登录后应该跳转到仪表板'
    );

    console.log('✅ 成功登录测试通过');
  },
};

// 辅助函数
async function findInputRef(type: string): Promise<string> {
  const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
  // 从 snapshot 中提取 ref
  return ''; // 实际使用时从 snapshot 解析
}

async function findButtonRef(text: string): Promise<string> {
  const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
  return '';
}

async function findElementByPlaceholder(placeholder: string): Promise<string> {
  const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
  return '';
}

async function findButtonByText(text: string): Promise<string> {
  const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
  return '';
}
```

**Step 2: Commit**

```bash
git add frontend/react-shadcn/pc/tests/login.test.ts
git commit -m "test: add login page Playwright MCP tests"
```

---

### Task 3: 仪表板页面测试

**Files:**
- Create: `frontend/react-shadcn/pc/tests/dashboard.test.ts`

**Step 1: 编写仪表板页面测试**

```typescript
// tests/dashboard.test.ts
import { TEST_CONFIG, ROUTES, SELECTORS } from './config';

/**
 * 测试场景: 仪表板页面功能
 *
 * 前置条件:
 * 1. 用户已登录（localStorage 中有 token）
 */

export const dashboardTests = {
  name: '仪表板页面测试',

  // Test 1: 仪表板加载验证
  async testDashboardLoad() {
    console.log('🧪 Test: 仪表板页面加载');

    // 导航到仪表板
    await mcp__plugin_playwright_playwright__browser_navigate({
      url: `${TEST_CONFIG.baseURL}${ROUTES.dashboard}`
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 验证统计数据卡片
    console.assert(
      snapshot.includes('总用户数') &&
      snapshot.includes('活跃用户') &&
      snapshot.includes('系统负载') &&
      snapshot.includes('数据库状态'),
      '所有统计卡片应该显示'
    );

    // 验证图表区域
    console.assert(
      snapshot.includes('用户增长趋势'),
      '用户增长趋势图表应该显示'
    );

    // 验证最近活动
    console.assert(
      snapshot.includes('最近活动'),
      '最近活动列表应该显示'
    );

    console.log('✅ 仪表板页面加载验证通过');
  },

  // Test 2: 统计数据验证
  async testStatsDisplay() {
    console.log('🧪 Test: 统计数据展示');

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 验证统计数据值存在
    const stats = ['1,234', '856', '32%', '正常'];
    stats.forEach(stat => {
      console.assert(
        snapshot.includes(stat),
        `统计值 ${stat} 应该显示`
      );
    });

    console.log('✅ 统计数据展示验证通过');
  },

  // Test 3: 快捷操作按钮
  async testQuickActions() {
    console.log('🧪 Test: 快捷操作按钮');

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 验证快捷操作按钮
    const actions = ['添加用户', '系统设置', '数据备份', '查看日志'];
    actions.forEach(action => {
      console.assert(
        snapshot.includes(action),
        `快捷操作 ${action} 应该显示`
      );
    });

    console.log('✅ 快捷操作按钮验证通过');
  },

  // Test 4: 最近活动列表
  async testRecentActivity() {
    console.log('🧪 Test: 最近活动列表');

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 验证活动项存在
    console.assert(
      snapshot.includes('登录系统') || snapshot.includes('更新资料'),
      '应该有最近活动记录'
    );

    console.log('✅ 最近活动列表验证通过');
  },
};
```

**Step 2: Commit**

```bash
git add frontend/react-shadcn/pc/tests/dashboard.test.ts
git commit -m "test: add dashboard page Playwright MCP tests"
```

---

### Task 4: 用户管理页面测试

**Files:**
- Create: `frontend/react-shadcn/pc/tests/users.test.ts`

**Step 1: 编写用户管理页面测试**

```typescript
// tests/users.test.ts
import { TEST_CONFIG, ROUTES, SELECTORS } from './config';

/**
 * 测试场景: 用户管理页面 CRUD 功能
 */

export const userManagementTests = {
  name: '用户管理页面测试',

  // Test 1: 页面加载和表格显示
  async testUserListLoad() {
    console.log('🧪 Test: 用户列表加载');

    await mcp__plugin_playwright_playwright__browser_navigate({
      url: `${TEST_CONFIG.baseURL}${ROUTES.users}`
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 验证页面标题
    console.assert(
      snapshot.includes('用户列表'),
      '用户列表标题应该显示'
    );

    // 验证搜索框
    console.assert(
      snapshot.includes('搜索用户') || snapshot.includes('搜索'),
      '搜索框应该显示'
    );

    // 验证添加用户按钮
    console.assert(
      snapshot.includes('添加用户'),
      '添加用户按钮应该显示'
    );

    // 验证表格表头
    const headers = ['ID', '用户名', '邮箱', '手机号', '创建时间', '操作'];
    headers.forEach(header => {
      console.assert(
        snapshot.includes(header),
        `表头 ${header} 应该显示`
      );
    });

    console.log('✅ 用户列表加载验证通过');
  },

  // Test 2: 搜索功能
  async testSearchFunctionality() {
    console.log('🧪 Test: 搜索功能');

    // 找到搜索输入框并输入关键词
    const searchInput = await findElementByPlaceholder('搜索用户');
    await mcp__plugin_playwright_playwright__browser_type({
      element: '搜索输入框',
      ref: searchInput,
      text: 'admin'
    });

    // 等待搜索过滤
    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 1 });

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 验证搜索结果（应该只显示匹配的用户）
    console.assert(
      snapshot.includes('admin') || snapshot.includes('admin@example.com'),
      '搜索结果应该显示匹配的用户'
    );

    // 清空搜索
    await mcp__plugin_playwright_playwright__browser_type({
      element: '搜索输入框',
      ref: searchInput,
      text: ''
    });

    console.log('✅ 搜索功能验证通过');
  },

  // Test 3: 创建用户弹窗
  async testCreateUserModal() {
    console.log('🧪 Test: 创建用户弹窗');

    // 点击添加用户按钮
    const addButton = await findButtonByText('添加用户');
    await mcp__plugin_playwright_playwright__browser_click({
      element: '添加用户按钮',
      ref: addButton
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 1 });

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 验证弹窗标题
    console.assert(
      snapshot.includes('添加用户'),
      '弹窗标题应该是"添加用户"'
    );

    // 验证表单字段
    const fields = ['用户名', '邮箱', '密码', '手机号'];
    fields.forEach(field => {
      console.assert(
        snapshot.includes(field),
        `表单字段 ${field} 应该显示`
      );
    });

    // 验证按钮
    console.assert(
      snapshot.includes('创建') && snapshot.includes('取消'),
      '应该有创建和取消按钮'
    );

    // 点击取消关闭弹窗
    const cancelButton = await findButtonByText('取消');
    await mcp__plugin_playwright_playwright__browser_click({
      element: '取消按钮',
      ref: cancelButton
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 1 });

    console.log('✅ 创建用户弹窗验证通过');
  },

  // Test 4: 创建新用户
  async testCreateUser() {
    console.log('🧪 Test: 创建新用户');

    const timestamp = Date.now();
    const newUser = {
      username: `testuser_${timestamp}`,
      email: `test_${timestamp}@example.com`,
      password: 'testpass123',
      phone: '13800138000'
    };

    // 打开创建弹窗
    const addButton = await findButtonByText('添加用户');
    await mcp__plugin_playwright_playwright__browser_click({
      element: '添加用户按钮',
      ref: addButton
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 1 });

    // 填写表单
    await fillInput('用户名', newUser.username);
    await fillInput('邮箱', newUser.email);
    await fillInput('密码', newUser.password);
    await fillInput('手机号', newUser.phone);

    // 点击创建
    const createButton = await findButtonByText('创建');
    await mcp__plugin_playwright_playwright__browser_click({
      element: '创建按钮',
      ref: createButton
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

    // 验证用户创建成功（应该在列表中看到新用户）
    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
    console.assert(
      snapshot.includes(newUser.username) || snapshot.includes(newUser.email),
      '新创建的用户应该出现在列表中'
    );

    console.log('✅ 创建新用户测试通过');
  },

  // Test 5: 编辑用户
  async testEditUser() {
    console.log('🧪 Test: 编辑用户');

    // 找到第一个用户的编辑按钮并点击
    const editButton = await findFirstEditButton();
    await mcp__plugin_playwright_playwright__browser_click({
      element: '编辑按钮',
      ref: editButton
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 1 });

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 验证弹窗标题
    console.assert(
      snapshot.includes('编辑用户'),
      '弹窗标题应该是"编辑用户"'
    );

    // 验证密码字段不存在（编辑时不显示密码）
    // 注意：根据实际情况调整断言

    // 点击保存
    const saveButton = await findButtonByText('保存');
    await mcp__plugin_playwright_playwright__browser_click({
      element: '保存按钮',
      ref: saveButton
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

    console.log('✅ 编辑用户测试通过');
  },

  // Test 6: 删除用户（带确认对话框）
  async testDeleteUser() {
    console.log('🧪 Test: 删除用户');

    // 找到最后一个测试用户的删除按钮并点击
    const deleteButton = await findLastDeleteButton();

    // 设置对话框处理
    await mcp__plugin_playwright_playwright__browser_handle_dialog({
      accept: true  // 点击确定
    });

    await mcp__plugin_playwright_playwright__browser_click({
      element: '删除按钮',
      ref: deleteButton
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

    console.log('✅ 删除用户测试通过');
  },
};

// 辅助函数
async function fillInput(label: string, value: string) {
  // 根据标签找到输入框并填写
  const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
  // 实现查找逻辑
}

async function findFirstEditButton(): Promise<string> {
  const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
  return '';
}

async function findLastDeleteButton(): Promise<string> {
  const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
  return '';
}
```

**Step 2: Commit**

```bash
git add frontend/react-shadcn/pc/tests/users.test.ts
git commit -m "test: add user management page Playwright MCP tests"
```

---

### Task 5: 设置页面测试

**Files:**
- Create: `frontend/react-shadcn/pc/tests/settings.test.ts`

**Step 1: 编写设置页面测试**

```typescript
// tests/settings.test.ts
import { TEST_CONFIG, ROUTES, SELECTORS } from './config';

/**
 * 测试场景: 设置页面功能
 */

export const settingsTests = {
  name: '设置页面测试',

  // Test 1: 页面加载
  async testSettingsLoad() {
    console.log('🧪 Test: 设置页面加载');

    await mcp__plugin_playwright_playwright__browser_navigate({
      url: `${TEST_CONFIG.baseURL}${ROUTES.settings}`
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 验证设置分类
    console.assert(
      snapshot.includes('个人设置'),
      '个人设置卡片应该显示'
    );
    console.assert(
      snapshot.includes('通知设置'),
      '通知设置卡片应该显示'
    );
    console.assert(
      snapshot.includes('安全设置'),
      '安全设置卡片应该显示'
    );
    console.assert(
      snapshot.includes('外观设置'),
      '外观设置卡片应该显示'
    );

    console.log('✅ 设置页面加载验证通过');
  },

  // Test 2: 个人设置表单
  async testProfileSettings() {
    console.log('🧪 Test: 个人设置表单');

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 验证表单字段
    console.assert(
      snapshot.includes('用户名'),
      '用户名字段应该显示'
    );
    console.assert(
      snapshot.includes('邮箱'),
      '邮箱字段应该显示'
    );
    console.assert(
      snapshot.includes('手机号'),
      '手机号字段应该显示'
    );
    console.assert(
      snapshot.includes('保存设置'),
      '保存设置按钮应该显示'
    );

    console.log('✅ 个人设置表单验证通过');
  },

  // Test 3: 通知设置开关
  async testNotificationSettings() {
    console.log('🧪 Test: 通知设置开关');

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 验证通知选项
    console.assert(
      snapshot.includes('邮件通知'),
      '邮件通知选项应该显示'
    );
    console.assert(
      snapshot.includes('系统消息'),
      '系统消息选项应该显示'
    );
    console.assert(
      snapshot.includes('接收重要操作邮件通知'),
      '邮件通知描述应该显示'
    );

    console.log('✅ 通知设置开关验证通过');
  },

  // Test 4: 安全设置 - 密码修改
  async testSecuritySettings() {
    console.log('🧪 Test: 安全设置');

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 验证密码修改字段
    console.assert(
      snapshot.includes('当前密码'),
      '当前密码字段应该显示'
    );
    console.assert(
      snapshot.includes('新密码'),
      '新密码字段应该显示'
    );
    console.assert(
      snapshot.includes('确认密码'),
      '确认密码字段应该显示'
    );
    console.assert(
      snapshot.includes('修改密码'),
      '修改密码按钮应该显示'
    );

    console.log('✅ 安全设置验证通过');
  },

  // Test 5: 外观设置 - 深色模式
  async testAppearanceSettings() {
    console.log('🧪 Test: 外观设置');

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 验证外观选项
    console.assert(
      snapshot.includes('深色模式'),
      '深色模式选项应该显示'
    );
    console.assert(
      snapshot.includes('使用深色主题'),
      '深色主题描述应该显示'
    );

    console.log('✅ 外观设置验证通过');
  },
};
```

**Step 2: Commit**

```bash
git add frontend/react-shadcn/pc/tests/settings.test.ts
git commit -m "test: add settings page Playwright MCP tests"
```

---

### Task 6: 导航和路由保护测试

**Files:**
- Create: `frontend/react-shadcn/pc/tests/navigation.test.ts`

**Step 1: 编写导航和路由保护测试**

```typescript
// tests/navigation.test.ts
import { TEST_CONFIG, ROUTES, SELECTORS } from './config';

/**
 * 测试场景: 导航和路由保护
 */

export const navigationTests = {
  name: '导航和路由保护测试',

  // Test 1: 侧边栏导航
  async testSidebarNavigation() {
    console.log('🧪 Test: 侧边栏导航');

    // 先登录
    await login();

    // 测试首页导航
    const dashboardLink = await findLinkByText('首页');
    await mcp__plugin_playwright_playwright__browser_click({
      element: '首页导航链接',
      ref: dashboardLink
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

    let snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
    console.assert(
      snapshot.includes('总用户数') || snapshot.includes('用户增长趋势'),
      '应该导航到仪表板'
    );

    // 测试用户管理导航
    const usersLink = await findLinkByText('用户管理');
    await mcp__plugin_playwright_playwright__browser_click({
      element: '用户管理导航链接',
      ref: usersLink
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

    snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
    console.assert(
      snapshot.includes('用户列表'),
      '应该导航到用户管理'
    );

    // 测试设置导航
    const settingsLink = await findLinkByText('设置');
    await mcp__plugin_playwright_playwright__browser_click({
      element: '设置导航链接',
      ref: settingsLink
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

    snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
    console.assert(
      snapshot.includes('个人设置'),
      '应该导航到设置页面'
    );

    console.log('✅ 侧边栏导航测试通过');
  },

  // Test 2: 未登录访问受保护路由
  async testProtectedRouteRedirect() {
    console.log('🧪 Test: 未登录访问受保护路由');

    // 清除 localStorage（模拟未登录）
    await mcp__plugin_playwright_playwright__browser_evaluate({
      function: () => {
        localStorage.clear();
        return 'localStorage cleared';
      }
    });

    // 尝试直接访问仪表板
    await mcp__plugin_playwright_playwright__browser_navigate({
      url: `${TEST_CONFIG.baseURL}${ROUTES.dashboard}`
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 应该被重定向到登录页
    console.assert(
      snapshot.includes('管理面板登录') || snapshot.includes('登录'),
      '未登录应该重定向到登录页'
    );

    console.log('✅ 受保护路由重定向测试通过');
  },

  // Test 3: 登出功能
  async testLogout() {
    console.log('🧪 Test: 登出功能');

    // 先登录
    await login();

    // 点击登出按钮
    const logoutButton = await findButtonByTitle('退出登录');
    await mcp__plugin_playwright_playwright__browser_click({
      element: '退出登录按钮',
      ref: logoutButton
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

    // 应该被重定向到登录页
    console.assert(
      snapshot.includes('管理面板登录'),
      '登出后应该重定向到登录页'
    );

    console.log('✅ 登出功能测试通过');
  },

  // Test 4: 页面标题验证
  async testPageTitles() {
    console.log('🧪 Test: 页面标题');

    await login();

    // 访问各个页面验证标题或主要内容
    const pages = [
      { route: ROUTES.dashboard, expected: '总用户数' },
      { route: ROUTES.users, expected: '用户列表' },
      { route: ROUTES.settings, expected: '个人设置' },
    ];

    for (const page of pages) {
      await mcp__plugin_playwright_playwright__browser_navigate({
        url: `${TEST_CONFIG.baseURL}${page.route}`
      });

      await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

      const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
      console.assert(
        snapshot.includes(page.expected),
        `页面 ${page.route} 应该包含 "${page.expected}"`
      );
    }

    console.log('✅ 页面标题验证通过');
  },
};

// 辅助函数
async function login() {
  await mcp__plugin_playwright_playwright__browser_navigate({
    url: `${TEST_CONFIG.baseURL}${ROUTES.login}`
  });

  await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

  // 填写登录表单
  const emailInput = await findElementByPlaceholder('user@example.com');
  await mcp__plugin_playwright_playwright__browser_type({
    element: '邮箱输入框',
    ref: emailInput,
    text: TEST_CONFIG.testUser.email
  });

  const passwordInput = await findElementByPlaceholder('••••••••');
  await mcp__plugin_playwright_playwright__browser_type({
    element: '密码输入框',
    ref: passwordInput,
    text: TEST_CONFIG.testUser.password
  });

  const loginButton = await findButtonByText('登录');
  await mcp__plugin_playwright_playwright__browser_click({
    element: '登录按钮',
    ref: loginButton
  });

  await mcp__plugin_playwright_playwright__browser_wait_for({ time: 3 });
}

async function findLinkByText(text: string): Promise<string> {
  const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
  return '';
}

async function findButtonByTitle(title: string): Promise<string> {
  const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
  return '';
}
```

**Step 2: Commit**

```bash
git add frontend/react-shadcn/pc/tests/navigation.test.ts
git commit -m "test: add navigation and route protection Playwright MCP tests"
```

---

### Task 7: 主测试入口文件

**Files:**
- Create: `frontend/react-shadcn/pc/tests/index.ts`

**Step 1: 创建主测试入口**

```typescript
// tests/index.ts
/**
 * Playwright MCP 测试主入口
 *
 * 运行所有测试的顺序:
 * 1. 登录页面测试
 * 2. 导航和路由保护测试
 * 3. 仪表板页面测试
 * 4. 用户管理页面测试
 * 5. 设置页面测试
 */

import { loginTests } from './login.test';
import { dashboardTests } from './dashboard.test';
import { userManagementTests } from './users.test';
import { settingsTests } from './settings.test';
import { navigationTests } from './navigation.test';

export const allTests = {
  login: loginTests,
  navigation: navigationTests,
  dashboard: dashboardTests,
  users: userManagementTests,
  settings: settingsTests,
};

// 测试套件配置
export const testSuite = {
  name: 'react-shadcn/pc Playwright MCP 完整测试套件',
  version: '1.0.0',

  // 测试执行顺序
  executionOrder: [
    'login',
    'navigation',
    'dashboard',
    'users',
    'settings',
  ],

  // 运行所有测试
  async runAll() {
    console.log('🚀 开始执行完整测试套件...\n');
    const results = [];

    for (const testName of this.executionOrder) {
      console.log(`\n📦 运行测试模块: ${testName}`);
      const testModule = allTests[testName as keyof typeof allTests];

      if (testModule) {
        const moduleResults = await this.runModule(testModule);
        results.push({ name: testName, results: moduleResults });
      }
    }

    console.log('\n📊 测试执行完成！');
    return results;
  },

  // 运行单个测试模块
  async runModule(testModule: any) {
    const results = [];
    const tests = Object.entries(testModule).filter(([key]) => key.startsWith('test'));

    for (const [testName, testFn] of tests) {
      if (typeof testFn === 'function') {
        try {
          await testFn();
          results.push({ name: testName, status: 'passed' });
        } catch (error) {
          results.push({ name: testName, status: 'failed', error });
        }
      }
    }

    return results;
  },
};

export default testSuite;
```

**Step 2: Commit**

```bash
git add frontend/react-shadcn/pc/tests/index.ts
git commit -m "test: add main test suite entry point"
```

---

### Task 8: 测试执行手册

**Files:**
- Create: `frontend/react-shadcn/pc/tests/EXECUTION_GUIDE.md`

**Step 1: 创建测试执行手册**

```markdown
# 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. 元素找不到
- 检查选择器是否正确
- 检查页面是否完全加载
```

**Step 2: Commit**

```bash
git add frontend/react-shadcn/pc/tests/EXECUTION_GUIDE.md
git commit -m "test: add comprehensive test execution guide"
```

---

## 总结

本实施计划包含以下测试模块:

| 模块 | 测试文件 | 覆盖功能 |
|------|----------|----------|
| 配置 | `config.ts` | 测试配置、路由、选择器 |
| 登录 | `login.test.ts` | 登录表单、验证、跳转 |
| 仪表板 | `dashboard.test.ts` | 统计数据、图表、活动列表 |
| 用户管理 | `users.test.ts` | CRUD、搜索、表格 |
| 设置 | `settings.test.ts` | 个人/通知/安全/外观设置 |
| 导航 | `navigation.test.ts` | 侧边栏、路由保护、登出 |
| 主入口 | `index.ts` | 测试套件管理 |

**执行选项:**

**1. Subagent-Driven (推荐)** - 在当前会话中，使用 `superpowers:subagent-driven-development` 逐个任务执行，每步验证后继续。

**2. Parallel Session** - 新开会话使用 `superpowers:executing-plans` 批量执行。

请选择执行方式开始实施。