08ea5fbe98
添加用户管理视图、API和状态管理文件
123 lines
4.0 KiB
TypeScript
123 lines
4.0 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
import { MockManager } from './mock-manager';
|
|
|
|
test.describe('用户认证 - 调试', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
const mockManager = new MockManager({
|
|
enabled: true,
|
|
mode: 'full',
|
|
mockPaths: [],
|
|
delay: 0,
|
|
logCalls: true,
|
|
validateResponses: true,
|
|
dataSource: 'memory'
|
|
});
|
|
|
|
mockManager.presetTestData({
|
|
menus: [
|
|
{
|
|
id: 1,
|
|
name: '仪表盘',
|
|
code: 'dashboard',
|
|
path: '/dashboard',
|
|
icon: 'DashboardOutlined',
|
|
sortOrder: 1,
|
|
status: 'active',
|
|
parentId: 0,
|
|
component: 'views/Dashboard.vue',
|
|
createBy: 'system',
|
|
updateBy: 'system',
|
|
createdAt: '2024-01-01T00:00:00.000Z',
|
|
updatedAt: '2024-01-01T00:00:00.000Z',
|
|
children: []
|
|
}
|
|
]
|
|
});
|
|
|
|
await mockManager.interceptAPIRequest(page);
|
|
|
|
page.on('console', msg => {
|
|
console.log(`[Browser Console] ${msg.type()}: ${msg.text()}`);
|
|
});
|
|
|
|
page.on('response', async (response) => {
|
|
if (response.url().includes('/sys/auth/login')) {
|
|
console.log(`[Network Response] ${response.url()} - Status: ${response.status()}`);
|
|
try {
|
|
const body = await response.text();
|
|
console.log(`[Network Response] Body: ${body}`);
|
|
} catch (e) {
|
|
console.log(`[Network Response] Failed to read body: ${e}`);
|
|
}
|
|
}
|
|
});
|
|
|
|
await page.goto('/login');
|
|
});
|
|
|
|
test('调试 - 登录失败应该显示错误信息', async ({ page }) => {
|
|
console.log('=== 测试开始 ===');
|
|
|
|
const usernameInput = page.locator('input[placeholder="请输入用户名"]');
|
|
const passwordInput = page.locator('input[placeholder="请输入密码"]');
|
|
const loginButton = page.locator('button[type="submit"]');
|
|
|
|
await usernameInput.waitFor({ state: 'visible', timeout: 10000 });
|
|
await passwordInput.waitFor({ state: 'visible', timeout: 10000 });
|
|
await loginButton.waitFor({ state: 'visible', timeout: 10000 });
|
|
|
|
console.log('=== 填写错误凭据 ===');
|
|
await usernameInput.fill('wronguser');
|
|
await passwordInput.fill('wrongpassword');
|
|
|
|
console.log('=== 点击登录按钮 ===');
|
|
await loginButton.click();
|
|
|
|
console.log('=== 等待页面响应 ===');
|
|
await page.waitForTimeout(3000);
|
|
|
|
console.log('=== 检查当前URL ===');
|
|
const currentUrl = page.url();
|
|
console.log(`Current URL: ${currentUrl}`);
|
|
|
|
console.log('=== 检查页面内容 ===');
|
|
const pageContent = await page.content();
|
|
console.log(`Page contains '仪表盘': ${pageContent.includes('仪表盘')}`);
|
|
console.log(`Page contains '登录': ${pageContent.includes('登录')}`);
|
|
|
|
console.log('=== 检查错误消息 ===');
|
|
const errorMessage = page.locator('.ant-message-error');
|
|
const errorCount = await errorMessage.count();
|
|
console.log(`Error message count: ${errorCount}`);
|
|
|
|
if (errorCount > 0) {
|
|
const errorText = await errorMessage.textContent();
|
|
console.log(`Error message text: ${errorText}`);
|
|
}
|
|
|
|
console.log('=== 检查所有消息 ===');
|
|
const allMessages = page.locator('.ant-message');
|
|
const messageCount = await allMessages.count();
|
|
console.log(`All messages count: ${messageCount}`);
|
|
|
|
for (let i = 0; i < messageCount; i++) {
|
|
const msg = allMessages.nth(i);
|
|
const text = await msg.textContent();
|
|
console.log(`Message ${i}: ${text}`);
|
|
}
|
|
|
|
console.log('=== 检查是否跳转到仪表盘 ===');
|
|
const isDashboard = currentUrl.includes('dashboard');
|
|
console.log(`Is dashboard: ${isDashboard}`);
|
|
|
|
if (isDashboard) {
|
|
console.log('=== 仪表盘页面内容 ===');
|
|
const usernameDisplay = page.locator('text=wronguser');
|
|
const usernameCount = await usernameDisplay.count();
|
|
console.log(`Username 'wronguser' count: ${usernameCount}`);
|
|
}
|
|
|
|
console.log('=== 测试结束 ===');
|
|
});
|
|
});
|