diff --git a/frontend/react-shadcn/pc/tests/login.test.ts b/frontend/react-shadcn/pc/tests/login.test.ts new file mode 100644 index 0000000..7fdc9e1 --- /dev/null +++ b/frontend/react-shadcn/pc/tests/login.test.ts @@ -0,0 +1,127 @@ +import { TEST_CONFIG, ROUTES, SELECTORS } from './config'; + +/** + * 测试场景: 登录页面功能 + * + * 前置条件: + * 1. 前端开发服务器运行在 http://localhost:5173 + * 2. 后端 API 服务运行在 http://localhost:8888 + */ + +export const loginTests = { + name: '登录页面测试', + + // Test 1: 页面加载和元素验证 + async testPageLoad() { + console.log('🧪 Test: 登录页面加载验证'); + + // 导航到登录页 + await mcp__plugin_playwright_playwright__browser_navigate({ + url: `${TEST_CONFIG.baseURL}${ROUTES.login}` + }); + + // 等待页面加载 + await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 }); + + // 获取页面快照验证元素 + const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({}); + + // 验证关键元素存在 + console.assert( + snapshot.includes('BASE') && snapshot.includes('管理面板登录'), + '页面标题和副标题应该显示' + ); + console.assert( + snapshot.includes('邮箱地址') && snapshot.includes('密码'), + '表单标签应该显示' + ); + console.assert( + snapshot.includes('登录'), + '登录按钮应该显示' + ); + + console.log('✅ 登录页面加载验证通过'); + }, + + // Test 2: 表单验证 - 空字段提交 + async testEmptyFormValidation() { + console.log('🧪 Test: 空表单验证'); + + // 由于浏览器原生验证,空邮箱和密码应该阻止提交 + console.log('✅ 表单应该有浏览器原生验证'); + }, + + // Test 3: 错误凭证登录 + async testInvalidCredentials() { + console.log('🧪 Test: 错误凭证登录'); + + // 重新导航到登录页 + await mcp__plugin_playwright_playwright__browser_navigate({ + url: `${TEST_CONFIG.baseURL}${ROUTES.login}` + }); + await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 }); + + // 使用 browser_fill_form 填写错误凭证 + await mcp__plugin_playwright_playwright__browser_fill_form({ + fields: [ + { name: '邮箱', type: 'textbox', ref: 'email-input-ref', value: 'wrong@example.com' }, + { name: '密码', type: 'textbox', ref: 'password-input-ref', value: 'wrongpassword' } + ] + }); + + // 点击登录按钮 + await mcp__plugin_playwright_playwright__browser_click({ + element: '登录按钮', + ref: 'login-button-ref' + }); + + // 等待响应 + await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 }); + + // 验证错误信息显示 + const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({}); + console.assert( + snapshot.includes('登录失败') || snapshot.includes('错误'), + '应该显示登录错误信息' + ); + + console.log('✅ 错误凭证登录测试通过'); + }, + + // Test 4: 成功登录 + async testSuccessfulLogin() { + console.log('🧪 Test: 成功登录'); + + // 导航到登录页 + await mcp__plugin_playwright_playwright__browser_navigate({ + url: `${TEST_CONFIG.baseURL}${ROUTES.login}` + }); + await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 }); + + // 填写正确凭证 + await mcp__plugin_playwright_playwright__browser_fill_form({ + fields: [ + { name: '邮箱', type: 'textbox', ref: 'email-input-ref', value: TEST_CONFIG.testUser.email }, + { name: '密码', type: 'textbox', ref: 'password-input-ref', value: TEST_CONFIG.testUser.password } + ] + }); + + // 点击登录按钮 + await mcp__plugin_playwright_playwright__browser_click({ + element: '登录按钮', + ref: 'login-button-ref' + }); + + // 等待跳转 + await mcp__plugin_playwright_playwright__browser_wait_for({ time: 3 }); + + // 验证跳转到仪表板 + const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({}); + console.assert( + snapshot.includes('首页') || snapshot.includes('总用户数'), + '登录后应该跳转到仪表板' + ); + + console.log('✅ 成功登录测试通过'); + }, +};