fix: correct phone field filling logic in UserManagementPage
- Fix fillUserForm method to use correct input indices - Add localStorage cleanup in beforeEach hook - Update all tests to use e2e_test_user account - Add debug and simple login tests for troubleshooting Root cause: Phone field was not being filled correctly, causing 400 error from backend with message '手机号不能为空'
This commit is contained in:
@@ -0,0 +1,72 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { LoginPage } from './pages/LoginPage';
|
||||
import { DashboardPage } from './pages/DashboardPage';
|
||||
import { UserManagementPage } from './pages/UserManagementPage';
|
||||
|
||||
test.describe('调试测试 - 网络请求监控', () => {
|
||||
let loginPage: LoginPage;
|
||||
let dashboardPage: DashboardPage;
|
||||
let userManagementPage: UserManagementPage;
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
loginPage = new LoginPage(page);
|
||||
dashboardPage = new DashboardPage(page);
|
||||
userManagementPage = new UserManagementPage(page);
|
||||
|
||||
// 监控所有网络请求
|
||||
page.on('request', request => {
|
||||
console.log(`>> REQUEST: ${request.method()} ${request.url()}`);
|
||||
if (request.method() === 'POST' || request.method() === 'PUT') {
|
||||
console.log(` POST DATA: ${request.postData()}`);
|
||||
}
|
||||
});
|
||||
|
||||
page.on('response', response => {
|
||||
console.log(`<< RESPONSE: ${response.status()} ${response.url()}`);
|
||||
if (response.status() >= 400) {
|
||||
console.log(` ❌ ERROR RESPONSE: ${response.status()} ${response.url()}`);
|
||||
}
|
||||
});
|
||||
|
||||
// 清理localStorage
|
||||
await page.goto('/');
|
||||
await page.evaluate(() => localStorage.clear());
|
||||
|
||||
// 重新登录
|
||||
await loginPage.goto();
|
||||
await loginPage.login('e2e_test_user', 'admin123');
|
||||
});
|
||||
|
||||
test('创建用户 - 带网络监控', async ({ page }) => {
|
||||
console.log('\n========== 开始创建用户测试 ==========\n');
|
||||
|
||||
await dashboardPage.navigateToUserManagement();
|
||||
console.log('✅ 导航到用户管理页面');
|
||||
|
||||
await userManagementPage.clickCreateUser();
|
||||
console.log('✅ 点击创建用户按钮');
|
||||
|
||||
const timestamp = Date.now();
|
||||
const userData = {
|
||||
username: `testuser_${timestamp}`,
|
||||
nickname: `测试用户${timestamp}`,
|
||||
email: `test_${timestamp}@example.com`,
|
||||
phone: '13800138000',
|
||||
password: 'Test123!@#',
|
||||
confirmPassword: 'Test123!@#',
|
||||
};
|
||||
|
||||
console.log(`📝 填写用户数据: ${JSON.stringify(userData)}`);
|
||||
await userManagementPage.fillUserForm(userData);
|
||||
console.log('✅ 填写用户表单完成');
|
||||
|
||||
console.log('📤 准备提交表单...');
|
||||
await userManagementPage.submitForm();
|
||||
console.log('✅ 表单已提交');
|
||||
|
||||
// 等待一段时间,观察网络请求
|
||||
await page.waitForTimeout(5000);
|
||||
|
||||
console.log('\n========== 测试结束 ==========\n');
|
||||
});
|
||||
});
|
||||
@@ -43,17 +43,31 @@ export class UserManagementPage {
|
||||
status?: string;
|
||||
}) {
|
||||
const dialog = this.page.locator('.el-dialog');
|
||||
const isCreateMode = !userData.hasOwnProperty('id');
|
||||
|
||||
// 表单字段顺序:
|
||||
// 创建模式:用户名(0), 密码(1), 昵称(2), 邮箱(3), 手机号(4)
|
||||
// 编辑模式:用户名(0), 昵称(1), 邮箱(2), 手机号(3)
|
||||
|
||||
await dialog.locator('input').first().fill(userData.username);
|
||||
if (userData.nickname) {
|
||||
await dialog.locator('input').nth(1).fill(userData.nickname);
|
||||
|
||||
if (isCreateMode && userData.password) {
|
||||
await dialog.locator('input[type="password"]').fill(userData.password);
|
||||
}
|
||||
await dialog.locator('input[type="password"]').fill(userData.password);
|
||||
await dialog.locator('input').nth(3).fill(userData.email);
|
||||
|
||||
if (userData.nickname) {
|
||||
const nicknameIndex = isCreateMode ? 2 : 1;
|
||||
await dialog.locator('input').nth(nicknameIndex).fill(userData.nickname);
|
||||
}
|
||||
|
||||
if (userData.email) {
|
||||
const emailIndex = isCreateMode ? 3 : 2;
|
||||
await dialog.locator('input').nth(emailIndex).fill(userData.email);
|
||||
}
|
||||
|
||||
if (userData.phone) {
|
||||
const phoneInput = dialog.locator('input[placeholder*="手机号"]');
|
||||
if (await phoneInput.count() > 0) {
|
||||
await phoneInput.fill(userData.phone);
|
||||
}
|
||||
const phoneIndex = isCreateMode ? 4 : 3;
|
||||
await dialog.locator('input').nth(phoneIndex).fill(userData.phone);
|
||||
}
|
||||
|
||||
if (userData.status) {
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { LoginPage } from './pages/LoginPage';
|
||||
import { DashboardPage } from './pages/DashboardPage';
|
||||
import { UserManagementPage } from './pages/UserManagementPage';
|
||||
|
||||
test.describe('简单登录测试', () => {
|
||||
let loginPage: LoginPage;
|
||||
let dashboardPage: DashboardPage;
|
||||
let userManagementPage: UserManagementPage;
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
loginPage = new LoginPage(page);
|
||||
dashboardPage = new DashboardPage(page);
|
||||
userManagementPage = new UserManagementPage(page);
|
||||
|
||||
// 清理localStorage
|
||||
await page.goto('/');
|
||||
await page.evaluate(() => localStorage.clear());
|
||||
|
||||
// 重新登录
|
||||
await loginPage.goto();
|
||||
await loginPage.login('e2e_test_user', 'admin123');
|
||||
});
|
||||
|
||||
test('登录后导航到用户管理页面', async ({ page }) => {
|
||||
await dashboardPage.navigateToUserManagement();
|
||||
await expect(page).toHaveURL(/.*users/);
|
||||
|
||||
// 验证表格存在
|
||||
await expect(userManagementPage.table).toBeVisible();
|
||||
|
||||
// 验证"新增用户"按钮存在
|
||||
await expect(userManagementPage.createUserButton).toBeVisible();
|
||||
});
|
||||
|
||||
test('点击新增用户按钮', async ({ page }) => {
|
||||
await dashboardPage.navigateToUserManagement();
|
||||
|
||||
// 点击新增用户按钮
|
||||
await userManagementPage.clickCreateUser();
|
||||
|
||||
// 验证对话框出现
|
||||
const dialog = page.locator('.el-dialog');
|
||||
await expect(dialog).toBeVisible();
|
||||
|
||||
// 验证对话框标题
|
||||
const dialogTitle = dialog.locator('.el-dialog__title');
|
||||
await expect(dialogTitle).toContainText('新增用户');
|
||||
});
|
||||
});
|
||||
@@ -14,8 +14,13 @@ test.describe('用户管理 E2E 测试', () => {
|
||||
dashboardPage = new DashboardPage(page);
|
||||
userManagementPage = new UserManagementPage(page);
|
||||
|
||||
// 清理localStorage
|
||||
await page.goto('/');
|
||||
await page.evaluate(() => localStorage.clear());
|
||||
|
||||
// 重新登录
|
||||
await loginPage.goto();
|
||||
await loginPage.login('admin', 'admin123');
|
||||
await loginPage.login('e2e_test_user', 'admin123');
|
||||
});
|
||||
|
||||
test('创建用户完整流程', async ({ page }) => {
|
||||
@@ -68,15 +73,38 @@ test.describe('用户管理 E2E 测试', () => {
|
||||
test('删除用户流程', async ({ page }) => {
|
||||
await dashboardPage.navigateToUserManagement();
|
||||
|
||||
const username = await userManagementPage.getUserName(1);
|
||||
// 先创建一个测试用户
|
||||
await userManagementPage.clickCreateUser();
|
||||
const timestamp = Date.now();
|
||||
const userData = {
|
||||
username: `delete_test_${timestamp}`,
|
||||
nickname: `待删除用户${timestamp}`,
|
||||
email: `delete_${timestamp}@example.com`,
|
||||
phone: '13800138000',
|
||||
password: 'Test123!@#',
|
||||
confirmPassword: 'Test123!@#',
|
||||
};
|
||||
await userManagementPage.fillUserForm(userData);
|
||||
await userManagementPage.submitForm();
|
||||
await expect(userManagementPage.successMessage).toBeVisible();
|
||||
|
||||
// 等待表格刷新
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// 搜索刚创建的用户
|
||||
await userManagementPage.search(userData.username);
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// 删除该用户
|
||||
await userManagementPage.deleteUser(1);
|
||||
await userManagementPage.confirmDelete();
|
||||
|
||||
await expect(userManagementPage.successMessage).toBeVisible();
|
||||
|
||||
// 验证用户已被删除
|
||||
await userManagementPage.reload();
|
||||
await expect(userManagementPage.table).not.toContainText(username);
|
||||
await userManagementPage.search(userData.username);
|
||||
await expect(userManagementPage.table).not.toContainText(userData.username);
|
||||
});
|
||||
|
||||
test('搜索用户功能', async ({ page }) => {
|
||||
|
||||
Reference in New Issue
Block a user