张翔
132 lines
4.8 KiB
TypeScript
132 lines
4.8 KiB
TypeScript
/**
|
|
* Dashboard页面E2E测试
|
|
*
|
|
* 测试仪表盘页面的所有功能和交互
|
|
*
|
|
* @tags @dashboard @e2e @view
|
|
*/
|
|
|
|
import { test, expect } from '@playwright/test';
|
|
import { TestLogger } from '../core/test-logger.js';
|
|
|
|
test.describe('E2E: Dashboard页面', () => {
|
|
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');
|
|
});
|
|
|
|
test('应该显示仪表盘内容 @smoke', async ({ page }) => {
|
|
// Then: 应该显示仪表盘元素
|
|
await expect(page.locator('.dashboard')).toBeVisible();
|
|
await expect(page.locator('.el-header')).toBeVisible();
|
|
await expect(page.locator('.el-aside')).toBeVisible();
|
|
});
|
|
|
|
test('应该显示侧边栏菜单 @smoke', async ({ page }) => {
|
|
// Then: 应该显示菜单项
|
|
await expect(page.locator('.el-menu')).toBeVisible();
|
|
|
|
// 验证主要菜单项存在
|
|
const menuItems = ['系统管理', '用户管理', '角色管理', '菜单管理'];
|
|
for (const item of menuItems) {
|
|
await expect(page.locator(`.el-menu-item:has-text("${item}")`)).toBeVisible();
|
|
}
|
|
});
|
|
|
|
test('应该能够导航到用户管理页面 @regression', async ({ page }) => {
|
|
// When: 点击用户管理菜单
|
|
await page.click('.el-menu-item:has-text("用户管理")');
|
|
|
|
// Then: 应该导航到用户管理页面
|
|
await page.waitForURL('**/user-management');
|
|
await expect(page).toHaveURL(/.*user-management/);
|
|
});
|
|
|
|
test('应该能够导航到角色管理页面 @regression', async ({ page }) => {
|
|
// When: 点击角色管理菜单
|
|
await page.click('.el-menu-item:has-text("角色管理")');
|
|
|
|
// Then: 应该导航到角色管理页面
|
|
await page.waitForURL('**/role-management');
|
|
await expect(page).toHaveURL(/.*role-management/);
|
|
});
|
|
|
|
test('应该能够导航到菜单管理页面 @regression', async ({ page }) => {
|
|
// When: 点击菜单管理菜单
|
|
await page.click('.el-menu-item:has-text("菜单管理")');
|
|
|
|
// Then: 应该导航到菜单管理页面
|
|
await page.waitForURL('**/menu-management');
|
|
await expect(page).toHaveURL(/.*menu-management/);
|
|
});
|
|
|
|
test('应该显示用户信息 @regression', async ({ page }) => {
|
|
// Then: 应该显示用户头像或用户名
|
|
const avatarVisible = await page.locator('.el-avatar').isVisible().catch(() => false);
|
|
const usernameVisible = await page.locator('.username').isVisible().catch(() => false);
|
|
const headerVisible = await page.locator('.el-header').isVisible().catch(() => false);
|
|
|
|
// 至少有一个元素可见
|
|
expect(avatarVisible || usernameVisible || headerVisible).toBe(true);
|
|
});
|
|
|
|
test('应该能够展开/收起侧边栏 @regression', async ({ page }) => {
|
|
// Given: 侧边栏是展开的
|
|
const aside = page.locator('.el-aside');
|
|
const initialWidth = await aside.boundingBox().then(box => box?.width || 200);
|
|
|
|
// When: 点击收起按钮（如果存在）
|
|
const collapseBtn = page.locator('.collapse-btn, .hamburger');
|
|
if (await collapseBtn.isVisible().catch(() => false)) {
|
|
await collapseBtn.click();
|
|
|
|
// Then: 侧边栏应该收起
|
|
const collapsedWidth = await aside.boundingBox().then(box => box?.width || 64);
|
|
expect(collapsedWidth).toBeLessThan(initialWidth);
|
|
}
|
|
});
|
|
|
|
test('应该能够退出登录 @critical', async ({ page }) => {
|
|
// When: 点击用户头像或退出按钮
|
|
const userMenu = page.locator('.el-avatar, .user-menu').first();
|
|
if (await userMenu.isVisible()) {
|
|
await userMenu.click();
|
|
|
|
// 点击退出登录
|
|
const logoutBtn = page.locator('.el-dropdown-menu__item:has-text("退出"), button:has-text("退出")');
|
|
if (await logoutBtn.isVisible().catch(() => false)) {
|
|
await logoutBtn.click();
|
|
|
|
// Then: 应该跳转到登录页面
|
|
await page.waitForURL('**/login');
|
|
await expect(page).toHaveURL(/.*login/);
|
|
}
|
|
}
|
|
});
|
|
|
|
test('应该在不同视口下正常显示 @responsive', async ({ page }) => {
|
|
// Given: 不同视口尺寸
|
|
const viewports = [
|
|
{ width: 1920, height: 1080, name: 'desktop' },
|
|
{ width: 1366, height: 768, name: 'laptop' },
|
|
{ width: 768, height: 1024, name: 'tablet' }
|
|
];
|
|
|
|
for (const viewport of viewports) {
|
|
await page.setViewportSize({ width: viewport.width, height: viewport.height });
|
|
await page.goto('http://localhost:5174/dashboard');
|
|
|
|
// Then: 仪表盘应该可见
|
|
await expect(page.locator('.dashboard')).toBeVisible();
|
|
await expect(page.locator('.el-header')).toBeVisible();
|
|
}
|
|
});
|
|
});
|