test: add Dashboard operation log display E2E tests

- Add comprehensive tests for Dashboard statistics cards - Verify operation log count display - Test other statistics cards (users, roles, logins) - Verify card icons and hover effects - Test recent login records display - Test system information display - Add performance and responsive layout tests Closes #4
2026-04-03 22:04:05 +08:00
parent c279b0a6e4
commit cb59ed173b
1 changed files with 185 additions and 0 deletions
@@ -0,0 +1,185 @@
+import { test, expect } from '@playwright/test';
+import { LoginPage } from './pages/LoginPage';
+import { DashboardPage } from './pages/DashboardPage';
+
+test.describe('Dashboard操作日志显示验证', () => {
+  let loginPage: LoginPage;
+  let dashboardPage: DashboardPage;
+
+  test.beforeEach(async ({ page }) => {
+    loginPage = new LoginPage(page);
+    dashboardPage = new DashboardPage(page);
+
+    await loginPage.goto();
+    await loginPage.login('admin', 'admin123');
+    await expect(page).toHaveURL(/.*dashboard/);
+  });
+
+  test.afterEach(async ({ page }) => {
+    await loginPage.logout();
+  });
+
+  test('Dashboard应显示操作日志统计卡片', async ({ page }) => {
+    await test.step('验证操作日志统计卡片存在', async () => {
+      const operationLogCard = page.locator('.stat-card.log-card');
+      await expect(operationLogCard).toBeVisible();
+    });
+
+    await test.step('验证操作日志统计标题', async () => {
+      const title = page.locator('.stat-card.log-card .el-statistic__head');
+      await expect(title).toContainText('操作日志');
+    });
+
+    await test.step('验证操作日志统计数值', async () => {
+      const value = page.locator('.stat-card.log-card .el-statistic__number');
+      await expect(value).toBeVisible();
+      const countText = await value.textContent();
+      expect(countText).not.toBeNull();
+      const count = parseInt(countText!);
+      expect(count).toBeGreaterThanOrEqual(0);
+    });
+  });
+
+  test('Dashboard应显示其他统计卡片', async ({ page }) => {
+    await test.step('验证用户总数卡片', async () => {
+      const userCard = page.locator('.stat-card.user-card');
+      await expect(userCard).toBeVisible();
+      const title = userCard.locator('.el-statistic__head');
+      await expect(title).toContainText('用户总数');
+    });
+
+    await test.step('验证角色总数卡片', async () => {
+      const roleCard = page.locator('.stat-card.role-card');
+      await expect(roleCard).toBeVisible();
+      const title = roleCard.locator('.el-statistic__head');
+      await expect(title).toContainText('角色总数');
+    });
+
+    await test.step('验证今日登录卡片', async () => {
+      const loginCard = page.locator('.stat-card.login-card');
+      await expect(loginCard).toBeVisible();
+      const title = loginCard.locator('.el-statistic__head');
+      await expect(title).toContainText('今日登录');
+    });
+  });
+
+  test('Dashboard统计卡片应显示图标', async ({ page }) => {
+    await test.step('验证操作日志图标', async () => {
+      const icon = page.locator('.stat-card.log-card .stat-icon');
+      await expect(icon).toBeVisible();
+    });
+
+    await test.step('验证用户图标', async () => {
+      const icon = page.locator('.stat-card.user-card .stat-icon');
+      await expect(icon).toBeVisible();
+    });
+
+    await test.step('验证角色图标', async () => {
+      const icon = page.locator('.stat-card.role-card .stat-icon');
+      await expect(icon).toBeVisible();
+    });
+
+    await test.step('验证登录图标', async () => {
+      const icon = page.locator('.stat-card.login-card .stat-icon');
+      await expect(icon).toBeVisible();
+    });
+  });
+
+  test('Dashboard统计卡片应有悬停效果', async ({ page }) => {
+    await test.step('验证操作日志卡片悬停效果', async () => {
+      const card = page.locator('.stat-card.log-card');
+      await card.hover();
+      await page.waitForTimeout(500);
+      await expect(card).toBeVisible();
+    });
+  });
+
+  test('Dashboard应显示最近登录记录', async ({ page }) => {
+    await test.step('验证最近登录卡片存在', async () => {
+      const recentLoginCard = page.locator('.recent-login-card');
+      await expect(recentLoginCard).toBeVisible();
+    });
+
+    await test.step('验证最近登录标题', async () => {
+      const title = page.locator('.recent-login-card .card-title');
+      await expect(title).toContainText('最近登录');
+    });
+  });
+
+  test('Dashboard应显示系统信息', async ({ page }) => {
+    await test.step('验证系统信息卡片存在', async () => {
+      const systemInfoCard = page.locator('.system-info-card');
+      await expect(systemInfoCard).toBeVisible();
+    });
+
+    await test.step('验证系统信息标题', async () => {
+      const title = page.locator('.system-info-card .card-title');
+      await expect(title).toContainText('系统信息');
+    });
+
+    await test.step('验证系统版本显示', async () => {
+      const versionItem = page.locator('.system-info-card').getByText('系统版本');
+      await expect(versionItem).toBeVisible();
+    });
+
+    await test.step('验证Java版本显示', async () => {
+      const javaItem = page.locator('.system-info-card').getByText('Java版本');
+      await expect(javaItem).toBeVisible();
+    });
+
+    await test.step('验证前端框架显示', async () => {
+      const frontendItem = page.locator('.system-info-card').getByText('前端框架');
+      await expect(frontendItem).toBeVisible();
+    });
+
+    await test.step('验证数据库显示', async () => {
+      const dbItem = page.locator('.system-info-card').getByText('数据库');
+      await expect(dbItem).toBeVisible();
+    });
+  });
+
+  test('Dashboard操作日志统计应正确反映实际数据', async ({ page }) => {
+    await test.step('获取Dashboard显示的操作日志数量', async () => {
+      const value = page.locator('.stat-card.log-card .el-statistic__number');
+      await expect(value).toBeVisible();
+      const countText = await value.textContent();
+      expect(countText).not.toBeNull();
+      const dashboardCount = parseInt(countText!);
+      expect(dashboardCount).toBeGreaterThanOrEqual(0);
+    });
+  });
+
+  test('Dashboard页面加载性能', async ({ page }) => {
+    await test.step('验证页面加载时间', async () => {
+      const startTime = Date.now();
+      await dashboardPage.goto();
+      const loadTime = Date.now() - startTime;
+      expect(loadTime).toBeLessThan(10000);
+    });
+
+    await test.step('验证统计卡片加载', async () => {
+      const cards = page.locator('.stat-card');
+      await expect(cards.first()).toBeVisible({ timeout: 5000 });
+    });
+  });
+
+  test('Dashboard响应式布局验证', async ({ page }) => {
+    await test.step('验证桌面端布局', async () => {
+      await page.setViewportSize({ width: 1280, height: 720 });
+      const cards = page.locator('.stat-card');
+      expect(await cards.count()).toBe(4);
+    });
+
+    await test.step('验证平板端布局', async () => {
+      await page.setViewportSize({ width: 768, height: 1024 });
+      const cards = page.locator('.stat-card');
+      expect(await cards.count()).toBe(4);
+    });
+
+    await test.step('验证移动端布局', async () => {
+      await page.setViewportSize({ width: 375, height: 667 });
+      const cards = page.locator('.stat-card');
+      expect(await cards.count()).toBe(4);
+    });
+  });
+});