everything-is-suitable/everything-is-suitable-test/e2e/views/user-management-view.spec.ts

/**
 * UserManagement页面E2E测试
 * 
 * 测试用户管理页面的所有功能和交互
 * 
 * @tags @user-management @e2e @view
 */

import { test, expect } from '@playwright/test';
import { TestLogger } from '../core/test-logger.js';

test.describe('E2E: UserManagement页面', () => {
  let logger: TestLogger;

  test.beforeEach(async ({ page }) => {
    logger = new TestLogger();
    // 先登录
    await page.goto('http://localhost:5174/login');
    await page.fill('input[placeholder="请输入用户名"]', 'admin');
    await page.fill('input[placeholder="请输入密码"]', 'admin123');
    await page.click('button:has-text("登录")');
    await page.waitForURL('**/dashboard');
    
    // 导航到用户管理页面
    await page.click('.el-menu-item:has-text("用户管理")');
    await page.waitForURL('**/user-management');
  });

  test('应该显示用户管理页面 @smoke', async ({ page }) => {
    // Then: 应该显示页面元素
    await expect(page.locator('.user-management, .el-table')).toBeVisible();
    await expect(page.locator('.el-pagination')).toBeVisible();
  });

  test('应该显示用户列表 @smoke', async ({ page }) => {
    // Then: 应该显示用户数据表格
    await expect(page.locator('.el-table__row')).toHaveCount.greaterThan(0);
    
    // 验证表头
    const headers = ['用户名', '邮箱', '手机号', '状态', '操作'];
    for (const header of headers) {
      await expect(page.locator(`.el-table__header:has-text("${header}")`)).toBeVisible();
    }
  });

  test('应该能够搜索用户 @regression', async ({ page }) => {
    // Given: 搜索关键词
    const searchInput = page.locator('.search-input, input[placeholder*="搜索"]').first();
    
    if (await searchInput.isVisible()) {
      // When: 输入搜索关键词
      await searchInput.fill('admin');
      await searchInput.press('Enter');
      
      // Then: 应该显示搜索结果
      await page.waitForTimeout(500);
      await expect(page.locator('.el-table__row')).toBeVisible();
    }
  });

  test('应该能够打开新增用户对话框 @critical', async ({ page }) => {
    // When: 点击新增按钮
    const addBtn = page.locator('button:has-text("新增"), .add-btn').first();
    await addBtn.click();
    
    // Then: 应该显示新增对话框
    await expect(page.locator('.el-dialog:has-text("新增用户")')).toBeVisible();
    await expect(page.locator('.el-dialog input[placeholder*="用户名"]').first()).toBeVisible();
  });

  test('应该能够创建新用户 @critical', async ({ page }) => {
    // When: 打开新增对话框
    const addBtn = page.locator('button:has-text("新增"), .add-btn').first();
    await addBtn.click();
    
    // 填写表单
    await page.fill('.el-dialog input[placeholder*="用户名"]', 'testuser');
    await page.fill('.el-dialog input[placeholder*="邮箱"]', 'test@example.com');
    await page.fill('.el-dialog input[placeholder*="手机号"]', '13800138000');
    
    // 提交表单
    const submitBtn = page.locator('.el-dialog button:has-text("确定"), .el-dialog .el-button--primary').first();
    await submitBtn.click();
    
    // Then: 应该显示成功消息
    await expect(page.locator('.el-message--success')).toBeVisible();
  });

  test('应该能够编辑用户 @critical', async ({ page }) => {
    // When: 点击编辑按钮
    const editBtn = page.locator('.el-table__row .el-button:has-text("编辑"), .el-table__row .edit-btn').first();
    if (await editBtn.isVisible()) {
      await editBtn.click();
      
      // Then: 应该显示编辑对话框
      await expect(page.locator('.el-dialog:has-text("编辑用户")')).toBeVisible();
      
      // 修改数据
      const usernameInput = page.locator('.el-dialog input[placeholder*="用户名"]').first();
      await usernameInput.clear();
      await usernameInput.fill('updateduser');
      
      // 提交
      const submitBtn = page.locator('.el-dialog button:has-text("确定")').first();
      await submitBtn.click();
      
      // Then: 应该显示成功消息
      await expect(page.locator('.el-message--success')).toBeVisible();
    }
  });

  test('应该能够删除用户 @critical', async ({ page }) => {
    // When: 点击删除按钮
    const deleteBtn = page.locator('.el-table__row .el-button:has-text("删除"), .el-table__row .delete-btn').first();
    if (await deleteBtn.isVisible()) {
      await deleteBtn.click();
      
      // Then: 应该显示确认对话框
      await expect(page.locator('.el-message-box:has-text("确认删除")')).toBeVisible();
      
      // 确认删除
      const confirmBtn = page.locator('.el-message-box button:has-text("确定")').first();
      await confirmBtn.click();
      
      // Then: 应该显示成功消息
      await expect(page.locator('.el-message--success')).toBeVisible();
    }
  });

  test('应该能够分页 @regression', async ({ page }) => {
    // When: 点击下一页
    const nextBtn = page.locator('.el-pagination .btn-next, .el-pagination button:has-text("下一页")').first();
    if (await nextBtn.isVisible() && await nextBtn.isEnabled()) {
      await nextBtn.click();
      await page.waitForTimeout(500);
      
      // Then: 应该显示不同数据
      await expect(page.locator('.el-table__row')).toBeVisible();
    }
  });

  test('应该能够重置搜索条件 @regression', async ({ page }) => {
    // Given: 输入搜索条件
    const searchInput = page.locator('.search-input, input[placeholder*="搜索"]').first();
    if (await searchInput.isVisible()) {
      await searchInput.fill('test');
      
      // When: 点击重置按钮
      const resetBtn = page.locator('button:has-text("重置"), .reset-btn').first();
      if (await resetBtn.isVisible()) {
        await resetBtn.click();
        
        // Then: 搜索条件应该被清空
        await expect(searchInput).toHaveValue('');
      }
    }
  });

  test('应该能够批量删除 @regression', async ({ page }) => {
    // When: 选择多个用户
    const checkboxes = page.locator('.el-table__row .el-checkbox__input').slice(0, 2);
    for (const checkbox of await checkboxes.all()) {
      await checkbox.click();
    }
    
    // 点击批量删除
    const batchDeleteBtn = page.locator('button:has-text("批量删除")').first();
    if (await batchDeleteBtn.isVisible()) {
      await batchDeleteBtn.click();
      
      // Then: 应该显示确认对话框
      await expect(page.locator('.el-message-box:has-text("确认")')).toBeVisible();
    }
  });

  test('应该在不同视口下正常显示 @responsive', async ({ page }) => {
    // Given: 不同视口尺寸
    const viewports = [
      { width: 1920, height: 1080, name: 'desktop' },
      { width: 1366, height: 768, name: 'laptop' },
      { width: 1024, height: 768, name: 'tablet' }
    ];

    for (const viewport of viewports) {
      await page.setViewportSize({ width: viewport.width, height: viewport.height });
      await page.goto('http://localhost:5174/user-management');
      await page.waitForTimeout(1000);
      
      // Then: 用户列表应该可见
      await expect(page.locator('.el-table')).toBeVisible();
    }
  });
});