test: add navigation and route protection Playwright MCP tests

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 });
+}