base/frontend/react-shadcn/pc/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 snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

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

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

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

    // 点击添加用户按钮
    await mcp__plugin_playwright_playwright__browser_click({
      element: '添加用户按钮',
      ref: 'add-user-button-ref'
    });

    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('取消'),
      '应该有创建和取消按钮'
    );

    // 点击取消关闭弹窗
    await mcp__plugin_playwright_playwright__browser_click({
      element: '取消按钮',
      ref: 'cancel-button-ref'
    });

    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'
    };

    // 打开创建弹窗
    await mcp__plugin_playwright_playwright__browser_click({
      element: '添加用户按钮',
      ref: 'add-user-button-ref'
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 1 });

    // 填写表单
    await mcp__plugin_playwright_playwright__browser_fill_form({
      fields: [
        { name: '用户名', type: 'textbox', ref: 'username-input', value: newUser.username },
        { name: '邮箱', type: 'textbox', ref: 'email-input', value: newUser.email },
        { name: '密码', type: 'textbox', ref: 'password-input', value: newUser.password },
        { name: '手机号', type: 'textbox', ref: 'phone-input', value: newUser.phone }
      ]
    });

    // 点击创建
    await mcp__plugin_playwright_playwright__browser_click({
      element: '创建按钮',
      ref: 'create-button-ref'
    });

    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: 编辑用户');

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

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 1 });

    const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});

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

    // 点击保存
    await mcp__plugin_playwright_playwright__browser_click({
      element: '保存按钮',
      ref: 'save-button-ref'
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

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

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

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

    // 找到最后一个测试用户的删除按钮并点击
    await mcp__plugin_playwright_playwright__browser_click({
      element: '删除按钮',
      ref: 'delete-button-ref'
    });

    await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });

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