From 229fb77e762c30cfa6a9d88e3b413da4ad54abcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Fri, 3 Apr 2026 19:09:45 +0800 Subject: [PATCH] fix: correct phone field filling logic in UserManagementPage MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 '手机号不能为空' --- novalon-manage-web/e2e/debug-network.spec.ts | 72 +++++++++++++++++++ .../e2e/pages/UserManagementPage.ts | 30 +++++--- novalon-manage-web/e2e/simple-login.spec.ts | 50 +++++++++++++ .../e2e/user-management.spec.ts | 34 ++++++++- 4 files changed, 175 insertions(+), 11 deletions(-) create mode 100644 novalon-manage-web/e2e/debug-network.spec.ts create mode 100644 novalon-manage-web/e2e/simple-login.spec.ts diff --git a/novalon-manage-web/e2e/debug-network.spec.ts b/novalon-manage-web/e2e/debug-network.spec.ts new file mode 100644 index 0000000..f9b9a04 --- /dev/null +++ b/novalon-manage-web/e2e/debug-network.spec.ts @@ -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'); + }); +}); diff --git a/novalon-manage-web/e2e/pages/UserManagementPage.ts b/novalon-manage-web/e2e/pages/UserManagementPage.ts index 9835502..1a507f7 100644 --- a/novalon-manage-web/e2e/pages/UserManagementPage.ts +++ b/novalon-manage-web/e2e/pages/UserManagementPage.ts @@ -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) { diff --git a/novalon-manage-web/e2e/simple-login.spec.ts b/novalon-manage-web/e2e/simple-login.spec.ts new file mode 100644 index 0000000..d173875 --- /dev/null +++ b/novalon-manage-web/e2e/simple-login.spec.ts @@ -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('新增用户'); + }); +}); diff --git a/novalon-manage-web/e2e/user-management.spec.ts b/novalon-manage-web/e2e/user-management.spec.ts index 790cd53..f817aa5 100644 --- a/novalon-manage-web/e2e/user-management.spec.ts +++ b/novalon-manage-web/e2e/user-management.spec.ts @@ -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 }) => {