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
This commit is contained in:
@@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user