novalon-manage-system/novalon-manage-web/e2e/performance-optimization.spec.ts

import { test, expect } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';
import { DashboardPage } from './pages/DashboardPage';
import { UserManagementPage } from './pages/UserManagementPage';
import { RoleManagementPage } from './pages/RoleManagementPage';
import { TestHelper } from './utils/testHelper';

test.describe('性能优化测试', () => {
  let loginPage: LoginPage;
  let dashboardPage: DashboardPage;
  let userManagementPage: UserManagementPage;
  let roleManagementPage: RoleManagementPage;

  test.beforeEach(async ({ page }) => {
    loginPage = new LoginPage(page);
    dashboardPage = new DashboardPage(page);
    userManagementPage = new UserManagementPage(page);
    roleManagementPage = new RoleManagementPage(page);

    await loginPage.goto();
  });

  test.afterEach(async ({ page }) => {
    await TestHelper.clearAllStorage(page);
  });

  test.describe('等待策略优化测试', () => {
    test('登录页面 - 使用精确等待', async ({ page }) => {
      const startTime = Date.now();

      await test.step('等待登录页面加载完成', async () => {
        await page.waitForLoadState('networkidle');
        await page.waitForSelector('[data-testid="login-form"]', { state: 'visible' });
      });

      const endTime = Date.now();
      const loadTime = endTime - startTime;

      console.log(`登录页面加载时间: ${loadTime}ms`);
      expect(loadTime).toBeLessThan(3000);
    });

    test('用户列表 - 使用智能等待', async ({ page }) => {
      await loginPage.login('admin', 'admin123');
      await page.waitForURL(/.*dashboard/);

      const startTime = Date.now();

      await test.step('等待用户列表加载完成', async () => {
        await page.goto('/users');
        await page.waitForLoadState('domcontentloaded');
        await page.waitForSelector('[data-testid="user-table"]', { state: 'attached' });
        await page.waitForSelector('.el-table__body tr', { state: 'visible' });
      });

      const endTime = Date.now();
      const loadTime = endTime - startTime;

      console.log(`用户列表加载时间: ${loadTime}ms`);
      expect(loadTime).toBeLessThan(2000);
    });

    test('角色列表 - 使用条件等待', async ({ page }) => {
      await loginPage.login('admin', 'admin123');
      await page.waitForURL(/.*dashboard/);

      const startTime = Date.now();

      await test.step('等待角色列表加载完成', async () => {
        await page.goto('/roles');
        await page.waitForFunction(() => {
          const rows = document.querySelectorAll('.el-table__body tr');
          return rows.length > 0;
        });
      });

      const endTime = Date.now();
      const loadTime = endTime - startTime;

      console.log(`角色列表加载时间: ${loadTime}ms`);
      expect(loadTime).toBeLessThan(2000);
    });
  });

  test.describe('选择器优化测试', () => {
    test('使用data-testid选择器', async ({ page }) => {
      await loginPage.login('admin', 'admin123');
      await page.waitForURL(/.*dashboard/);

      const startTime = Date.now();

      await test.step('使用data-testid定位元素', async () => {
        await page.goto('/users');
        await page.waitForSelector('[data-testid="user-table"]');

        const createButton = page.locator('[data-testid="create-user-button"]');
        await createButton.click();

        await page.waitForSelector('[data-testid="user-form"]');
        await page.fill('[data-testid="username-input"]', 'testuser');
        await page.fill('[data-testid="password-input"]', 'password123');
        await page.fill('[data-testid="email-input"]', 'test@example.com');
        await page.click('[data-testid="save-button"]');
      });

      const endTime = Date.now();
      const operationTime = endTime - startTime;

      console.log(`data-testid选择器操作时间: ${operationTime}ms`);
      expect(operationTime).toBeLessThan(3000);
    });

    test('选择器性能对比', async ({ page }) => {
      await loginPage.login('admin', 'admin123');
      await page.waitForURL(/.*dashboard/);

      await test.step('对比不同选择器性能', async () => {
        await page.goto('/users');
        await page.waitForSelector('[data-testid="user-table"]');

        const startTime1 = Date.now();
        const element1 = page.locator('[data-testid="create-user-button"]');
        await element1.click();
        const time1 = Date.now() - startTime1;

        await page.click('.el-button--primary');
        await page.waitForTimeout(500);

        const startTime2 = Date.now();
        const element2 = page.locator('button.el-button--primary');
        await element2.click();
        const time2 = Date.now() - startTime2;

        console.log(`data-testid选择器: ${time1}ms`);
        console.log(`CSS选择器: ${time2}ms`);
        expect(time1).toBeLessThan(time2);
      });
    });
  });

  test.describe('测试数据优化测试', () => {
    test('使用缓存数据', async ({ page }) => {
      await loginPage.login('admin', 'admin123');
      await page.waitForURL(/.*dashboard/);

      const startTime = Date.now();

      await test.step('首次加载用户列表', async () => {
        await page.goto('/users');
        await page.waitForSelector('[data-testid="user-table"]');
      });

      const firstLoadTime = Date.now() - startTime;

      await page.goto('/dashboard');
      await page.waitForURL(/.*dashboard/);

      const startTime2 = Date.now();

      await test.step('再次加载用户列表（使用缓存）', async () => {
        await page.goto('/users');
        await page.waitForSelector('[data-testid="user-table"]');
      });

      const secondLoadTime = Date.now() - startTime2;

      console.log(`首次加载时间: ${firstLoadTime}ms`);
      console.log(`缓存加载时间: ${secondLoadTime}ms`);
      expect(secondLoadTime).toBeLessThan(firstLoadTime);
    });

    test('优化数据准备时间', async ({ page, request }) => {
      await loginPage.login('admin', 'admin123');
      await page.waitForURL(/.*dashboard/);

      const startTime = Date.now();

      await test.step('批量创建用户并测试性能', async () => {
        const users = [];
        for (let i = 0; i < 10; i++) {
          const user = {
            username: `perfuser${i}`,
            password: 'password123',
            email: `perfuser${i}@example.com`,
            roleIds: ['1']
          };
          users.push(user);

          await request.post('http://localhost:8084/api/users', {
            data: user,
            headers: {
              'Authorization': `Bearer ${await TestHelper.getAuthToken(page)}`
            }
          });
        }
      });

      const dataPrepTime = Date.now() - startTime;

      const startTime2 = Date.now();

      await test.step('加载大量用户数据', async () => {
        await page.goto('/users');
        await page.waitForSelector('[data-testid="user-table"]');
        await page.waitForFunction(() => {
          const rows = document.querySelectorAll('.el-table__body tr');
          return rows.length >= 10;
        });
      });

      const loadTime = Date.now() - startTime2;

      console.log(`数据准备时间: ${dataPrepTime}ms`);
      console.log(`数据加载时间: ${loadTime}ms`);
      expect(loadTime).toBeLessThan(5000);
    });
  });

  test.describe('测试隔离优化测试', () => {
    test('独立测试环境', async ({ page, context }) => {
      const page1 = page;
      const page2 = await context.newPage();

      await test.step('在独立页面中执行测试', async () => {
        await page1.goto('/login');
        await page2.goto('/login');

        await page1.fill('[data-testid="username-input"]', 'admin');
        await page2.fill('[data-testid="username-input"]', 'testuser');

        await page1.fill('[data-testid="password-input"]', 'admin123');
        await page2.fill('[data-testid="password-input"]', 'password123');

        await page1.click('[data-testid="login-button"]');
        await page2.click('[data-testid="login-button"]');

        await page1.waitForURL(/.*dashboard/);
        await page2.waitForURL(/.*dashboard/);
      });

      await test.step('验证页面隔离', async () => {
        const url1 = page1.url();
        const url2 = page2.url();

        expect(url1).toContain('/dashboard');
        expect(url2).toContain('/dashboard');
        expect(url1).not.toBe(url2);
      });
    });

    test('测试清理优化', async ({ page, request }) => {
      await loginPage.login('admin', 'admin123');
      await page.waitForURL(/.*dashboard/);

      const startTime = Date.now();

      await test.step('创建测试数据', async () => {
        const user = {
          username: 'cleanupuser',
          password: 'password123',
          email: 'cleanup@example.com',
          roleIds: ['1']
        };

        await request.post('http://localhost:8084/api/users', {
          data: user,
          headers: {
            'Authorization': `Bearer ${await TestHelper.getAuthToken(page)}`
          }
        });
      });

      const createTime = Date.now() - startTime;

      const startTime2 = Date.now();

      await test.step('快速清理测试数据', async () => {
        const usersResponse = await request.get('http://localhost:8084/api/users', {
          headers: {
            'Authorization': `Bearer ${await TestHelper.getAuthToken(page)}`
          }
        });

        const usersData = await usersResponse.json();
        const cleanupUser = usersData.find(u => u.username === 'cleanupuser');
        if (cleanupUser) {
          await request.delete(`http://localhost:8084/api/users/${cleanupUser.id}`, {
            headers: {
              'Authorization': `Bearer ${await TestHelper.getAuthToken(page)}`
            }
          });
        }
      });

      const cleanupTime = Date.now() - startTime2;

      console.log(`数据创建时间: ${createTime}ms`);
      console.log(`数据清理时间: ${cleanupTime}ms`);
      expect(cleanupTime).toBeLessThan(1000);
    });
  });

  test.describe('并行化优化测试', () => {
    test('并行执行多个测试', async ({ page }) => {
      await loginPage.login('admin', 'admin123');
      await page.waitForURL(/.*dashboard/);

      const startTime = Date.now();

      await test.step('并行加载多个页面', async () => {
        const promises = [
          page.goto('/users'),
          page.goto('/roles'),
          page.goto('/settings')
        ];

        await Promise.all(promises);
      });

      const endTime = Date.now();
      const parallelTime = endTime - startTime;

      console.log(`并行加载时间: ${parallelTime}ms`);
      expect(parallelTime).toBeLessThan(5000);
    });

    test('并发API请求', async ({ page, request }) => {
      await loginPage.login('admin', 'admin123');
      await page.waitForURL(/.*dashboard/);

      const startTime = Date.now();

      await test.step('并发发送多个API请求', async () => {
        const promises = [
          request.get('http://localhost:8084/api/users', {
            headers: {
              'Authorization': `Bearer ${await TestHelper.getAuthToken(page)}`
            }
          }),
          request.get('http://localhost:8084/api/roles', {
            headers: {
              'Authorization': `Bearer ${await TestHelper.getAuthToken(page)}`
            }
          }),
          request.get('http://localhost:8084/api/permissions', {
            headers: {
              'Authorization': `Bearer ${await TestHelper.getAuthToken(page)}`
            }
          })
        ];

        await Promise.all(promises);
      });

      const endTime = Date.now();
      const concurrentTime = endTime - startTime;

      console.log(`并发请求时间: ${concurrentTime}ms`);
      expect(concurrentTime).toBeLessThan(2000);
    });
  });

  test.describe('内存和资源优化测试', () => {
    test('内存使用监控', async ({ page }) => {
      await loginPage.login('admin', 'admin123');
      await page.waitForURL(/.*dashboard/);

      const initialMemory = await page.evaluate(() => {
        if ((window.performance as any).memory) {
          return (window.performance as any).memory.usedJSHeapSize;
        }
        return 0;
      });

      await test.step('执行多个操作', async () => {
        await page.goto('/users');
        await page.waitForSelector('[data-testid="user-table"]');

        await page.goto('/roles');
        await page.waitForSelector('[data-testid="role-table"]');

        await page.goto('/settings');
        await page.waitForSelector('[data-testid="settings-form"]');
      });

      const finalMemory = await page.evaluate(() => {
        if ((window.performance as any).memory) {
          return (window.performance as any).memory.usedJSHeapSize;
        }
        return 0;
      });

      const memoryIncrease = finalMemory - initialMemory;
      const memoryIncreaseMB = memoryIncrease / (1024 * 1024);

      console.log(`内存增长: ${memoryIncreaseMB.toFixed(2)}MB`);
      expect(memoryIncreaseMB).toBeLessThan(50);
    });

    test('DOM节点数量监控', async ({ page }) => {
      await loginPage.login('admin', 'admin123');
      await page.waitForURL(/.*dashboard/);

      await test.step('监控DOM节点数量', async () => {
        await page.goto('/users');
        await page.waitForSelector('[data-testid="user-table"]');

        const nodeCount = await page.evaluate(() => {
          return document.querySelectorAll('*').length;
        });

        console.log(`DOM节点数量: ${nodeCount}`);
        expect(nodeCount).toBeLessThan(5000);
      });
    });
  });
});