diff --git a/frontend/react-shadcn/pc/tests/navigation.test.ts b/frontend/react-shadcn/pc/tests/navigation.test.ts new file mode 100644 index 0000000..7a3fde9 --- /dev/null +++ b/frontend/react-shadcn/pc/tests/navigation.test.ts @@ -0,0 +1,171 @@ +import { TEST_CONFIG, ROUTES, SELECTORS } from './config'; + +/** + * 测试场景: 导航和路由保护 + */ + +export const navigationTests = { + name: '导航和路由保护测试', + + // Test 1: 侧边栏导航 + async testSidebarNavigation() { + console.log('🧪 Test: 侧边栏导航'); + + // 先登录 + await login(); + + // 测试首页导航 + await mcp__plugin_playwright_playwright__browser_click({ + element: '首页导航链接', + ref: 'dashboard-link-ref' + }); + + await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 }); + + let snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({}); + console.assert( + snapshot.includes('总用户数') || snapshot.includes('用户增长趋势'), + '应该导航到仪表板' + ); + + // 测试用户管理导航 + await mcp__plugin_playwright_playwright__browser_click({ + element: '用户管理导航链接', + ref: 'users-link-ref' + }); + + await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 }); + + snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({}); + console.assert( + snapshot.includes('用户列表'), + '应该导航到用户管理' + ); + + // 测试设置导航 + await mcp__plugin_playwright_playwright__browser_click({ + element: '设置导航链接', + ref: 'settings-link-ref' + }); + + await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 }); + + snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({}); + console.assert( + snapshot.includes('个人设置'), + '应该导航到设置页面' + ); + + console.log('✅ 侧边栏导航测试通过'); + }, + + // Test 2: 未登录访问受保护路由 + async testProtectedRouteRedirect() { + console.log('🧪 Test: 未登录访问受保护路由'); + + // 清除 localStorage(模拟未登录) + await mcp__plugin_playwright_playwright__browser_evaluate({ + function: () => { + localStorage.clear(); + return 'localStorage cleared'; + } + }); + + // 尝试直接访问仪表板 + await mcp__plugin_playwright_playwright__browser_navigate({ + url: `${TEST_CONFIG.baseURL}${ROUTES.dashboard}` + }); + + 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 3: 登出功能 + async testLogout() { + console.log('🧪 Test: 登出功能'); + + // 先登录 + await login(); + + // 点击登出按钮 + await mcp__plugin_playwright_playwright__browser_click({ + element: '退出登录按钮', + ref: 'logout-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('管理面板登录'), + '登出后应该重定向到登录页' + ); + + console.log('✅ 登出功能测试通过'); + }, + + // Test 4: 页面标题验证 + async testPageTitles() { + console.log('🧪 Test: 页面标题'); + + await login(); + + // 访问各个页面验证标题或主要内容 + const pages = [ + { route: ROUTES.dashboard, expected: '总用户数' }, + { route: ROUTES.users, expected: '用户列表' }, + { route: ROUTES.settings, expected: '个人设置' }, + ]; + + for (const page of pages) { + await mcp__plugin_playwright_playwright__browser_navigate({ + url: `${TEST_CONFIG.baseURL}${page.route}` + }); + + await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 }); + + const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({}); + console.assert( + snapshot.includes(page.expected), + `页面 ${page.route} 应该包含 "${page.expected}"` + ); + } + + console.log('✅ 页面标题验证通过'); + }, +}; + +// 辅助函数:登录 +async function login() { + 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', value: TEST_CONFIG.testUser.email }, + { name: '密码', type: 'textbox', ref: 'password-input', 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 }); +}