test: add user management page Playwright MCP tests

frontend/react-shadcn/pc/tests/users.test.ts

@@ -0,0 +1,212 @@
+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('✅ 删除用户测试通过');
+  },
+};