fix: 修复E2E测试选择器和等待策略

问题分析:
1. 错误消息使用ElMessage toast,测试期望页面文本
2. 登出下拉菜单选择器不够精确
3. 用户管理页面按钮文本不匹配
4. 缺少适当的等待策略

修复内容:
- 登录流程测试:检测.el-message--error toast消息
- 表单验证测试:触发blur事件后检测.el-form-item__error
- 登出流程测试:使用更精确的下拉菜单选择器
- 用户管理测试:修正按钮文本为'新增用户'
- 添加waitForLoadState确保页面加载完成
- 增加timeout参数提高测试稳定性
This commit is contained in:
张翔
2026-04-04 22:43:15 +08:00
parent f2dde38467
commit 977e283fbd
3 changed files with 28 additions and 18 deletions
@@ -36,7 +36,7 @@ test.describe('登录流程测试', () => {
await page.fill('input[placeholder*="密码"]', 'wrongpassword');
await page.click('button:has-text("登录")');
const errorMessage = page.locator('text=/用户名或密码错误|登录失败|密码错误/i');
const errorMessage = page.locator('.el-message--error');
await expect(errorMessage).toBeVisible({ timeout: 5000 });
await expect(page).toHaveURL(/\/login/);
@@ -46,9 +46,11 @@ test.describe('登录流程测试', () => {
await page.goto('/login');
await page.fill('input[placeholder*="密码"]', 'Test@123');
await page.click('input[placeholder*="用户名"]');
await page.click('input[placeholder*="密码"]');
await page.click('button:has-text("登录")');
const validationMessage = page.locator('text=/请输入用户名|用户名不能为空|请输入用户名/i');
const validationMessage = page.locator('.el-form-item__error');
await expect(validationMessage).toBeVisible({ timeout: 5000 });
});
@@ -56,9 +58,11 @@ test.describe('登录流程测试', () => {
await page.goto('/login');
await page.fill('input[placeholder*="用户名"]', 'admin');
await page.click('input[placeholder*="密码"]');
await page.click('input[placeholder*="用户名"]');
await page.click('button:has-text("登录")');
const validationMessage = page.locator('text=/请输入密码|密码不能为空|请输入密码/i');
const validationMessage = page.locator('.el-form-item__error');
await expect(validationMessage).toBeVisible({ timeout: 5000 });
});
@@ -13,9 +13,10 @@ test.describe('登出流程测试', () => {
test('用户登出成功', async ({ page }) => {
await page.goto('/dashboard');
await page.click('.el-dropdown');
await page.waitForSelector('.el-dropdown-menu', { state: 'visible' });
await page.click('text=退出登录');
await page.waitForSelector('.el-dropdown', { state: 'visible' });
await page.click('.el-dropdown .el-avatar');
await page.waitForSelector('.el-dropdown-menu', { state: 'visible', timeout: 3000 });
await page.click('.el-dropdown-menu-item:has-text("退出登录")');
await expect(page).toHaveURL(/\/login/, { timeout: 10000 });
@@ -26,9 +27,10 @@ test.describe('登出流程测试', () => {
test('登出后无法访问受保护页面', async ({ page }) => {
await page.goto('/dashboard');
await page.click('.el-dropdown');
await page.waitForSelector('.el-dropdown-menu', { state: 'visible' });
await page.click('text=退出登录');
await page.waitForSelector('.el-dropdown', { state: 'visible' });
await page.click('.el-dropdown .el-avatar');
await page.waitForSelector('.el-dropdown-menu', { state: 'visible', timeout: 3000 });
await page.click('.el-dropdown-menu-item:has-text("退出登录")');
await expect(page).toHaveURL(/\/login/);
@@ -40,9 +42,10 @@ test.describe('登出流程测试', () => {
test('登出后Token被清除', async ({ page, context }) => {
await page.goto('/dashboard');
await page.click('.el-dropdown');
await page.waitForSelector('.el-dropdown-menu', { state: 'visible' });
await page.click('text=退出登录');
await page.waitForSelector('.el-dropdown', { state: 'visible' });
await page.click('.el-dropdown .el-avatar');
await page.waitForSelector('.el-dropdown-menu', { state: 'visible', timeout: 3000 });
await page.click('.el-dropdown-menu-item:has-text("退出登录")');
await expect(page).toHaveURL(/\/login/);
@@ -66,9 +69,10 @@ test.describe('登出流程测试', () => {
await page.goto('/dashboard');
await page.click('.el-dropdown');
await page.waitForSelector('.el-dropdown-menu', { state: 'visible' });
await page.click('text=退出登录');
await page.waitForSelector('.el-dropdown', { state: 'visible' });
await page.click('.el-dropdown .el-avatar');
await page.waitForSelector('.el-dropdown-menu', { state: 'visible', timeout: 3000 });
await page.click('.el-dropdown-menu-item:has-text("退出登录")');
await expect(page).toHaveURL(/\/login/, { timeout: 10000 });
}
@@ -25,23 +25,25 @@ test.describe('权限边界验证测试', () => {
test('管理员可以创建用户', async ({ page }) => {
await page.goto('/users');
const createButton = page.locator('button:has-text("新增")');
const createButton = page.locator('button:has-text("新增用户")');
await expect(createButton).toBeVisible();
await expect(createButton).toBeEnabled();
});
test('管理员可以编辑用户', async ({ page }) => {
await page.goto('/users');
await page.waitForLoadState('networkidle');
const editButton = page.locator('button:has-text("编辑")').first();
await expect(editButton).toBeVisible();
await expect(editButton).toBeVisible({ timeout: 5000 });
});
test('管理员可以删除用户', async ({ page }) => {
await page.goto('/users');
await page.waitForLoadState('networkidle');
const deleteButton = page.locator('button:has-text("删除")').first();
await expect(deleteButton).toBeVisible();
await expect(deleteButton).toBeVisible({ timeout: 5000 });
});
});