everything-is-suitable/everything-is-suitable-test/e2e/auth.spec.ts

import { test, expect } from '@playwright/test';
import { MockManager } from './mock-manager';
import { TestConfig } from './core/test-config';

test.describe('用户认证', () => {
  test.beforeEach(async ({ page }) => {
    const config = TestConfig.getInstance().getEnvironment();
    const mockManager = new MockManager({
      enabled: config.mockEnabled,
      mode: config.mockMode,
      mockPaths: [],
      delay: 0,
      logCalls: true,
      validateResponses: true,
      dataSource: 'memory'
    });
    
    if (config.mockEnabled) {
      mockManager.presetTestData({
        menus: [
          {
            id: 1,
            name: '仪表盘',
            code: 'dashboard',
            path: '/dashboard',
            icon: 'DashboardOutlined',
            sortOrder: 1,
            status: 'active',
            parentId: 0,
            component: 'views/Dashboard.vue',
            createBy: 'system',
            updateBy: 'system',
            createdAt: '2024-01-01T00:00:00.000Z',
            updatedAt: '2024-01-01T00:00:00.000Z',
            children: []
          },
          {
            id: 2,
            name: '用户管理',
            code: 'user',
            path: '/users',
            icon: 'UserOutlined',
            sortOrder: 2,
            status: 'active',
            parentId: 0,
            component: 'views/User.vue',
            createBy: 'system',
            updateBy: 'system',
            createdAt: '2024-01-01T00:00:00.000Z',
            updatedAt: '2024-01-01T00:00:00.000Z',
            children: []
          },
          {
            id: 3,
            name: '角色管理',
            code: 'role',
            path: '/roles',
            icon: 'LockOutlined',
            sortOrder: 3,
            status: 'active',
            parentId: 0,
            component: 'views/Role.vue',
            createBy: 'system',
            updateBy: 'system',
            createdAt: '2024-01-01T00:00:00.000Z',
            updatedAt: '2024-01-01T00:00:00.000Z',
            children: []
          },
          {
            id: 4,
            name: '菜单管理',
            code: 'menu',
            path: '/menus',
            icon: 'MenuOutlined',
            sortOrder: 4,
            status: 'active',
            parentId: 0,
            component: 'views/Menu.vue',
            createBy: 'system',
            updateBy: 'system',
            createdAt: '2024-01-01T00:00:00.000Z',
            updatedAt: '2024-01-01T00:00:00.000Z',
            children: []
          }
        ]
      });
    }
    
    await mockManager.interceptAPIRequest(page);
    await page.goto('/login');
  });

  const getUsernameInput = (page) => page.getByPlaceholder(/用户名/);
  const getPasswordInput = (page) => page.getByPlaceholder(/密码/);
  const getLoginButton = (page) => page.getByRole('button', { name: /登录/ });

  test('应该显示登录页面', async ({ page }) => {
    await expect(page).toHaveTitle(/管理系统/);
    
    await expect(getUsernameInput(page)).toBeVisible({ timeout: 10000 });
    await expect(getPasswordInput(page)).toBeVisible({ timeout: 10000 });
    await expect(getLoginButton(page)).toBeVisible({ timeout: 10000 });
  });

  test('应该成功登录', async ({ page }) => {
    await getUsernameInput(page).fill('admin');
    await getPasswordInput(page).fill('admin123');
    await getLoginButton(page).click();
    
    await page.waitForTimeout(3000);
  });

  test('登录失败应该显示错误信息', async ({ page }) => {
    await getUsernameInput(page).fill('nonexistentuser');
    await getPasswordInput(page).fill('wrongpassword');
    await getLoginButton(page).click();
    
    const errorMessage = page.locator('.el-message');
    await expect(errorMessage.first()).toBeVisible({ timeout: 10000 });
    
    const errorText = await errorMessage.first().textContent();
    console.log('Error message:', errorText);
    
    expect(errorText).toBeTruthy();
    expect(errorText!.length).toBeGreaterThan(0);
  });

  test('表单验证应该工作 - 空用户名和密码', async ({ page }) => {
    await getLoginButton(page).click();

    const formError = page.locator('.el-form-item__error');
    await expect(formError.first()).toBeVisible({ timeout: 5000 });
    
    const errorCount = await formError.count();
    expect(errorCount).toBeGreaterThanOrEqual(2);
  });

  test('表单验证应该工作 - 用户名长度不足', async ({ page }) => {
    await getUsernameInput(page).fill('ab');
    await getLoginButton(page).click();

    const formError = page.locator('.el-form-item__error');
    await expect(formError.first()).toBeVisible({ timeout: 5000 });
  });

  test('表单验证应该工作 - 密码长度不足', async ({ page }) => {
    await getUsernameInput(page).fill('admin');
    await getPasswordInput(page).fill('12345');
    await getLoginButton(page).click();

    const formError = page.locator('.el-form-item__error');
    await expect(formError.first()).toBeVisible({ timeout: 5000 });
  });

  test('应该能够登出', async ({ page }) => {
    await getUsernameInput(page).fill('admin');
    await getPasswordInput(page).fill('admin123');
    await getLoginButton(page).click();

    await page.waitForTimeout(3000);
  });

  test('应该支持记住密码功能', async ({ page }) => {
    const rememberCheckbox = page.locator('.el-checkbox').filter({ hasText: /记住我/ });
    await rememberCheckbox.waitFor({ state: 'visible', timeout: 10000 });
    
    await rememberCheckbox.click();
    await expect(rememberCheckbox.locator('input')).toBeChecked();
  });

  test('应该支持Enter键登录', async ({ page }) => {
    await getUsernameInput(page).fill('admin');
    await getPasswordInput(page).fill('admin123');
    await getPasswordInput(page).press('Enter');
    
    await page.waitForTimeout(3000);
  });

  test('未登录访问需要认证的页面应该跳转到登录页', async ({ page }) => {
    await page.goto('/users');
    
    await expect(getUsernameInput(page)).toBeVisible({ timeout: 10000 });
  });
});