37 KiB

Raw Blame History

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: 创建测试配置

// 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 文档

# 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

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: 编写登录页面测试脚本

// 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

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: 编写仪表板页面测试

// 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

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: 编写用户管理页面测试

// 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

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: 编写设置页面测试

// 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

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: 编写导航和路由保护测试

// 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

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: 创建主测试入口

// 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

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: 创建测试执行手册

# Playwright MCP 测试执行手册

## 前置准备

### 1. 启动后端服务

```bash
cd backend
go run main.go

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

2. 启动前端开发服务器

cd frontend/react-shadcn/pc
npm run dev

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

3. 验证 MCP Playwright 配置

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

测试执行步骤

测试 1: 登录页面

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

步骤:

导航到登录页

mcp__plugin_playwright_playwright__browser_navigate
url: http://localhost:5173/login

验证页面元素
```
mcp__plugin_playwright_playwright__browser_snapshot
```
验证包含: BASE, 管理面板登录, 邮箱地址, 密码, 登录
测试错误凭证
- 输入邮箱: wrong@example.com
- 输入密码: wrongpassword
- 点击登录
- 验证错误信息显示
测试正确凭证
- 输入邮箱: admin@example.com
- 输入密码: password123
- 点击登录
- 验证跳转到仪表板

测试 2: 仪表板页面

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

步骤:

确保已登录（有 token）

导航到仪表板

mcp__plugin_playwright_playwright__browser_navigate
url: http://localhost:5173/dashboard

验证统计卡片
- 总用户数: 1,234
- 活跃用户: 856
- 系统负载: 32%
- 数据库状态: 正常
验证用户增长趋势图表
验证最近活动列表

测试 3: 用户管理页面

目标: 验证用户 CRUD 操作

步骤:

导航到用户管理

mcp__plugin_playwright_playwright__browser_navigate
url: http://localhost:5173/users

验证用户列表表格
- 表头: ID, 用户名, 邮箱, 手机号, 创建时间, 操作
测试搜索功能
- 输入关键词: admin
- 验证过滤结果
测试创建用户
- 点击"添加用户"
- 填写表单: 用户名, 邮箱, 密码, 手机号
- 点击"创建"
- 验证新用户出现在列表
测试编辑用户
- 点击编辑按钮
- 修改信息
- 点击保存
测试删除用户
- 点击删除按钮
- 确认对话框点击确定
- 验证用户被移除

测试 4: 设置页面

目标: 验证设置页面功能

步骤:

导航到设置

mcp__plugin_playwright_playwright__browser_navigate
url: http://localhost:5173/settings

验证设置分类
- 个人设置
- 通知设置
- 安全设置
- 外观设置
测试开关控件
- 邮件通知开关
- 系统消息开关
- 深色模式开关

测试 5: 导航和路由保护

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

步骤:

测试侧边栏导航
- 点击首页 → 验证仪表板
- 点击用户管理 → 验证用户列表
- 点击设置 → 验证设置页面
测试未登录访问
- 清除 localStorage
- 直接访问 /dashboard
- 验证重定向到登录页
测试登出功能
- 点击退出登录
- 验证重定向到登录页

测试报告

执行完成后，检查:

所有页面是否加载正常
所有表单是否能正常提交
所有按钮是否能正常点击
所有弹窗是否能正常打开/关闭
路由保护是否正常工作

常见问题

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 批量执行。

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

37 KiB Raw Blame History

Playwright MCP 测试脚本实施计划

项目结构分析

应用路由

UI 组件

API 端点

测试覆盖计划

Task 1: 项目准备和 MCP 配置

Task 2: 登录页面测试

Task 3: 仪表板页面测试

Task 4: 用户管理页面测试

Task 5: 设置页面测试

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

Task 7: 主测试入口文件

Task 8: 测试执行手册

2. 启动前端开发服务器

3. 验证 MCP Playwright 配置

测试执行步骤

测试 1: 登录页面

测试 2: 仪表板页面

测试 3: 用户管理页面

测试 4: 设置页面

测试 5: 导航和路由保护

测试报告

常见问题

1. 页面加载超时

2. 登录失败

3. 元素找不到

总结

37 KiB

Raw Blame History