张翔
101 lines
3.6 KiB
TypeScript
101 lines
3.6 KiB
TypeScript
/**
|
|
* Login页面E2E测试
|
|
*
|
|
* 测试登录页面的所有功能和交互
|
|
*
|
|
* @tags @login @auth @e2e @view
|
|
*/
|
|
|
|
import { test, expect } from '@playwright/test';
|
|
import { TestLogger } from '../core/test-logger.js';
|
|
|
|
test.describe('E2E: Login页面', () => {
|
|
let logger: TestLogger;
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
logger = new TestLogger();
|
|
await page.goto('http://localhost:5174/login');
|
|
await page.waitForLoadState('networkidle');
|
|
});
|
|
|
|
test('应该显示登录表单 @smoke', async ({ page }) => {
|
|
// Then: 应该显示登录表单元素
|
|
await expect(page.locator('input[placeholder="请输入用户名"]')).toBeVisible();
|
|
await expect(page.locator('input[placeholder="请输入密码"]')).toBeVisible();
|
|
await expect(page.locator('button:has-text("登录")')).toBeVisible();
|
|
});
|
|
|
|
test('应该能够成功登录 @critical', async ({ page }) => {
|
|
// Given: 输入有效的登录凭据
|
|
await page.fill('input[placeholder="请输入用户名"]', 'admin');
|
|
await page.fill('input[placeholder="请输入密码"]', 'admin123');
|
|
|
|
// When: 点击登录按钮
|
|
await page.click('button:has-text("登录")');
|
|
|
|
// Then: 应该跳转到仪表盘
|
|
await page.waitForURL('**/dashboard');
|
|
await expect(page).toHaveURL(/.*dashboard/);
|
|
});
|
|
|
|
test('应该显示错误消息当凭据无效 @regression', async ({ page }) => {
|
|
// Given: 输入无效的登录凭据
|
|
await page.fill('input[placeholder="请输入用户名"]', 'invalid');
|
|
await page.fill('input[placeholder="请输入密码"]', 'wrongpassword');
|
|
|
|
// When: 点击登录按钮
|
|
await page.click('button:has-text("登录")');
|
|
|
|
// Then: 应该显示错误消息
|
|
await expect(page.locator('.el-message--error')).toBeVisible();
|
|
});
|
|
|
|
test('应该验证必填字段 @regression', async ({ page }) => {
|
|
// When: 直接点击登录按钮（不输入任何内容）
|
|
await page.click('button:has-text("登录")');
|
|
|
|
// Then: 应该显示验证错误
|
|
await expect(page.locator('.el-form-item__error')).toBeVisible();
|
|
});
|
|
|
|
test('应该记住用户名当勾选记住我 @regression', async ({ page, context }) => {
|
|
// Given: 输入凭据并勾选记住我
|
|
await page.fill('input[placeholder="请输入用户名"]', 'admin');
|
|
await page.fill('input[placeholder="请输入密码"]', 'admin123');
|
|
|
|
// 勾选记住我（如果存在）
|
|
const rememberMe = page.locator('input[type="checkbox"]').first();
|
|
if (await rememberMe.isVisible().catch(() => false)) {
|
|
await rememberMe.check();
|
|
}
|
|
|
|
// When: 登录
|
|
await page.click('button:has-text("登录")');
|
|
await page.waitForURL('**/dashboard');
|
|
|
|
// Then: 重新打开登录页面应该记住用户名
|
|
await page.goto('http://localhost:5174/login');
|
|
const usernameInput = page.locator('input[placeholder="请输入用户名"]');
|
|
await expect(usernameInput).toHaveValue('admin');
|
|
});
|
|
|
|
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' },
|
|
{ width: 375, height: 667, name: 'mobile' }
|
|
];
|
|
|
|
for (const viewport of viewports) {
|
|
await page.setViewportSize({ width: viewport.width, height: viewport.height });
|
|
await page.goto('http://localhost:5174/login');
|
|
|
|
// Then: 登录表单应该可见
|
|
await expect(page.locator('input[placeholder="请输入用户名"]')).toBeVisible();
|
|
await expect(page.locator('input[placeholder="请输入密码"]')).toBeVisible();
|
|
}
|
|
});
|
|
});
|