test(e2e): 改进 Playwright 测试框架和 E2E 测试

- 更新 Playwright 配置,添加认证状态管理和 setup 项目
- 优化 E2E 测试用例,简化测试流程
- 添加 auth-debug.spec.ts 用于调试认证问题
- 添加 playwright/.auth/user.json 认证状态文件
This commit is contained in:
张翔
2026-04-18 13:06:07 +08:00
parent a2bb6be0b9
commit 44215d3b2d
16 changed files with 235 additions and 292 deletions
@@ -1,6 +1,7 @@
import { test, expect } from '@playwright/test';
test.describe('管理员完整工作流', () => {
test.use({ storageState: 'playwright/.auth/user.json' });
test.describe.configure({ mode: 'serial' });
const timestamp = Date.now();
@@ -11,9 +12,24 @@ test.describe('管理员完整工作流', () => {
test('创建角色并分配权限', async ({ page }) => {
await test.step('导航到角色管理', async () => {
await page.goto('/dashboard');
await page.waitForLoadState('networkidle');
await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(1000);
const token = await page.evaluate(() => localStorage.getItem('token'));
console.log('Token in journey test:', token ? 'exists' : 'missing');
const permission = await page.evaluate(() => localStorage.getItem('permission'));
console.log('Permission in journey test:', permission ? 'exists' : 'missing');
if (permission) {
const permData = JSON.parse(permission);
console.log('Has system:role:add:', permData.permissions?.includes('system:role:add'));
}
await page.waitForTimeout(2000);
await page.waitForSelector('text=系统管理', { state: 'visible', timeout: 10000 });
await page.locator('text=系统管理').click();
await page.waitForTimeout(500);
await page.waitForSelector('text=角色管理', { state: 'visible', timeout: 5000 });
await page.locator('text=角色管理').click();
await page.waitForLoadState('networkidle');
await expect(page).toHaveURL(/.*roles/, { timeout: 10000 });
@@ -32,9 +48,30 @@ test.describe('管理员完整工作流', () => {
});
await test.step('提交表单', async () => {
await page.locator('.el-dialog button:has-text("确定")').click();
const [response] = await Promise.all([
page.waitForResponse(resp =>
resp.url().includes('/api/roles') && resp.request().method() === 'POST',
{ timeout: 10000 }
).catch(() => null),
page.locator('.el-dialog button:has-text("确定")').click()
]);
if (response) {
console.log('Response status:', response.status());
console.log('Response URL:', response.url());
} else {
console.log('No response received - request may have been blocked by frontend');
}
await page.waitForSelector('.el-dialog', { state: 'hidden', timeout: 10000 });
await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 5000 });
if (response && response.ok()) {
await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 5000 });
} else {
const errorMsg = await page.locator('.el-message--error').textContent().catch(() => 'Unknown error');
console.log('Error message:', errorMsg);
throw new Error(`创建角色失败: ${errorMsg}`);
}
});
});
@@ -42,8 +79,10 @@ test.describe('管理员完整工作流', () => {
await test.step('导航到用户管理', async () => {
await page.goto('/dashboard');
await page.waitForLoadState('networkidle');
await page.waitForSelector('text=系统管理', { state: 'visible', timeout: 10000 });
await page.locator('text=系统管理').click();
await page.waitForTimeout(500);
await page.waitForSelector('text=用户管理', { state: 'visible', timeout: 5000 });
await page.locator('text=用户管理').click();
await page.waitForLoadState('networkidle');
await expect(page).toHaveURL(/.*users/, { timeout: 10000 });
@@ -138,7 +177,8 @@ test.describe('管理员完整工作流', () => {
test('验证新用户登录', async ({ page }) => {
await test.step('管理员登出', async () => {
await page.goto('/dashboard');
await page.waitForLoadState('networkidle');
await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(1000);
const avatarButton = page.locator('.el-avatar').first();
await avatarButton.click({ timeout: 10000 });