fix(e2e): 修复 E2E 测试认证流程与路由配置

修复问题： 1. Vue Router 使用 hash 模式，所有 URL 需要添加 /#/ 前缀 2. 登录页选择器更新为实际 DOM 结构（name="mobile", #verificationCode） 3. 手机号验证需要触发 blur 事件 4. localStorage 存储使用 currentUser 而非 user_info 5. 添加等待时间确保 getUserInfoAPI 异步完成核心功能测试通过： - ✓ 应该成功登录 - ✓ 访问受保护页面应跳转到登录页 - ✓ 未登录打卡应跳转到登录页 - ✓ 快速登录跳过输入流程 - ✓ 复用 token 多次测试其他测试需要根据实际页面结构调整。

fix(e2e): 修复 E2E 测试认证流程与路由配置
修复问题： 1. Vue Router 使用 hash 模式，所有 URL 需要添加 /#/ 前缀 2. 登录页选择器更新为实际 DOM 结构（name="mobile", #verificationCode） 3. 手机号验证需要触发 blur 事件 4. localStorage 存储使用 currentUser 而非 user_info 5. 添加等待时间确保 getUserInfoAPI 异步完成核心功能测试通过： - ✓ 应该成功登录 - ✓ 访问受保护页面应跳转到登录页 - ✓ 未登录打卡应跳转到登录页 - ✓ 快速登录跳过输入流程 - ✓ 复用 token 多次测试其他测试需要根据实际页面结构调整。
hookehuyr
Commit 5df430c4203595e35470a1129caa8c6d51996d47 5df430c4 1 parent 0741a141
Showing 4 changed files with 90 additions and 87 deletions
e2e/auth.spec.js
e2e/courses.spec.js
e2e/helpers/auth.js
playwright.config.js
--- a/e2e/auth.spec.js
View file @5df430c
+++ b/e2e/auth.spec.js
View file @5df430c
@@ -6,24 +6,19 @@ import { test, expect } from '@playwright/test'
 import { login, logout, isLoggedIn, quickLogin, TEST_ACCOUNT } from './helpers/auth'
 test.describe('用户认证', () => {
-  test.beforeEach(async ({ page }) => {
-    // 每个测试前确保是登出状态
-    await logout(page)
-  })
-
   test('应该成功登录', async ({ page }) => {
     // 1. 访问登录页
-    await page.goto('/login')
+    await page.goto('/#/login')
     // 2. 检查登录表单元素
-    const phoneInput = page.locator('input[name="phone"]')
+    const phoneInput = page.locator('input[name="mobile"]')
     await expect(phoneInput).toBeVisible()
     // 3. 执行登录
     await login(page)
     // 4. 验证登录成功
-    await expect(page).toHaveURL(/\/(home|index)?/)
+    await expect(page).toHaveURL(/\/#\/(home|index)?/)
     // 5. 验证用户信息已保存
     const loggedIn = await isLoggedIn(page)
@@ -31,13 +26,13 @@ test.describe('用户认证', () => {
   })
   test('应该显示登录错误信息（手机号格式错误）', async ({ page }) => {
-    await page.goto('/login')
+    await page.goto('/#/login')
     // 输入错误格式的手机号
-    await page.fill('input[name="phone"]', '12345')
+    await page.fill('input[name="mobile"]', '12345')
     // 点击发送验证码
-    await page.click('button:has-text("发送验证码")')
+    await page.click('button:has-text("获取验证码")')
     // 验证错误提示
     const errorToast = page.locator('.van-toast--fail').or(page.locator('.van-toast--error'))
@@ -62,17 +57,17 @@ test.describe('用户认证', () => {
     expect(loggedIn).toBe(false)
     // 验证跳转到登录页
-    await expect(page).toHaveURL(/\/login/)
+    await expect(page).toHaveURL(/\/#\/login/)
   })
 })
 test.describe('需要登录的功能', () => {
   test('访问受保护页面应跳转到登录页', async ({ page }) => {
     // 直接访问需要登录的页面
-    await page.goto('/profile')
+    await page.goto('/#/profile')
     // 验证跳转到登录页
-    await expect(page).toHaveURL(/\/login/)
+    await expect(page).toHaveURL(/\/#\/login/)
   })
   test('登录后可以访问个人中心', async ({ page }) => {
@@ -80,10 +75,10 @@ test.describe('需要登录的功能', () => {
     await login(page)
     // 访问个人中心
-    await page.goto('/profile')
+    await page.goto('/#/profile')
     // 验证页面加载成功
-    await expect(page).toHaveURL(/\/profile/)
+    await expect(page).toHaveURL(/\/#\/profile/)
     // 检查页面元素
     const profileContent = page.locator('.profile').or(page.locator('[class*="profile"]'))
@@ -95,7 +90,7 @@ test.describe('需要登录的功能', () => {
     await login(page)
     // 访问学习进度页面
-    await page.goto('/study/progress')
+    await page.goto('/#/study/progress')
     // 验证页面内容
     const progressContent = page.locator('.study-progress').or(page.locator('[class*="progress"]'))
@@ -109,7 +104,7 @@ test.describe('购买流程（需要登录）', () => {
     await login(page)
     // 访问课程详情页（假设课程ID为123）
-    await page.goto('/courses/123')
+    await page.goto('/#/courses/123')
     // 点击购买按钮
     const buyButton = page
@@ -121,7 +116,7 @@ test.describe('购买流程（需要登录）', () => {
     await buyButton.click()
     // 验证跳转到结算页或支付页
-    await expect(page).toHaveURL(/\/(checkout|payment)/)
+    await expect(page).toHaveURL(/\/#\/(checkout|payment)/)
     // 检查结算页内容
     const checkoutContent = page.locator('.checkout').or(page.locator('[class*="checkout"]'))
@@ -129,11 +124,8 @@ test.describe('购买流程（需要登录）', () => {
   })
   test('未登录购买课程应跳转到登录页', async ({ page }) => {
-    // 确保未登录
-    await logout(page)
-
     // 访问课程详情页
-    await page.goto('/courses/123')
+    await page.goto('/#/courses/123')
     // 点击购买按钮
     const buyButton = page
@@ -143,7 +135,7 @@ test.describe('购买流程（需要登录）', () => {
     await buyButton.click()
     // 验证跳转到登录页
-    await expect(page).toHaveURL(/\/login/)
+    await expect(page).toHaveURL(/\/#\/login/)
   })
 })
@@ -153,7 +145,7 @@ test.describe('打卡功能（需要登录）', () => {
     await login(page)
     // 访问打卡页面
-    await page.goto('/checkin')
+    await page.goto('/#/checkin')
     // 填写打卡内容
     const textarea = page.locator('textarea').or(page.locator('input[type="text"]'))
@@ -171,14 +163,11 @@ test.describe('打卡功能（需要登录）', () => {
   })
   test('未登录打卡应跳转到登录页', async ({ page }) => {
-    // 确保未登录
-    await logout(page)
-
     // 访问打卡页面
-    await page.goto('/checkin')
+    await page.goto('/#/checkin')
     // 验证跳转到登录页
-    await expect(page).toHaveURL(/\/login/)
+    await expect(page).toHaveURL(/\/#\/login/)
   })
 })
@@ -188,20 +177,20 @@ test.describe('使用快速登录', () => {
     await quickLogin(page)
     // 访问需要登录的页面
-    await page.goto('/profile')
+    await page.goto('/#/profile')
     // 验证页面正常访问
-    await expect(page).toHaveURL(/\/profile/)
+    await expect(page).toHaveURL(/\/#\/profile/)
   })
   test('复用 token 多次测试', async ({ page }) => {
     // 第一次登录获取 token
     await login(page)
-    // 获取 token
+    // 获取用户信息
     const token = await page.evaluate(() => {
-      const userInfo = localStorage.getItem('user_info')
+      const currentUser = localStorage.getItem('currentUser')
-      return JSON.parse(userInfo).token
+      return JSON.parse(currentUser)
     })
     // 登出
--- a/e2e/courses.spec.js
View file @5df430c
+++ b/e2e/courses.spec.js
View file @5df430c
@@ -18,7 +18,7 @@ const authenticatedTest = test.extend({
 authenticatedTest.describe('课程浏览（已登录）', () => {
   authenticatedTest('可以浏览课程列表', async ({ authenticatedPage }) => {
     // 页面已经登录，直接访问
-    await authenticatedPage.goto('/courses-list')
+    await authenticatedPage.goto('/#/courses-list')
     // 等待课程列表加载
     await authenticatedPage.waitForSelector('.course-card', { timeout: 5000 })
@@ -34,7 +34,7 @@ authenticatedTest.describe('课程浏览（已登录）', () => {
   authenticatedTest('可以查看课程详情', async ({ authenticatedPage }) => {
     // 访问课程详情页
-    await authenticatedPage.goto('/courses/123')
+    await authenticatedPage.goto('/#/courses/123')
     // 等待页面加载
     await authenticatedPage.waitForLoadState('networkidle')
@@ -48,7 +48,7 @@ authenticatedTest.describe('课程浏览（已登录）', () => {
   authenticatedTest('可以收藏课程', async ({ authenticatedPage }) => {
     // 访问课程详情页
-    await authenticatedPage.goto('/courses/123')
+    await authenticatedPage.goto('/#/courses/123')
     // 点击收藏按钮
     const favoriteButton = authenticatedPage
@@ -72,7 +72,7 @@ authenticatedTest.describe('课程浏览（已登录）', () => {
 authenticatedTest.describe('学习进度（已登录）', () => {
   authenticatedTest('可以查看学习记录', async ({ authenticatedPage }) => {
     // 访问学习记录页面
-    await authenticatedPage.goto('/study/records')
+    await authenticatedPage.goto('/#/study/records')
     // 等待加载
     await authenticatedPage.waitForLoadState('networkidle')
@@ -86,7 +86,7 @@ authenticatedTest.describe('学习进度（已登录）', () => {
   authenticatedTest('可以继续学习', async ({ authenticatedPage }) => {
     // 访问学习页面
-    await authenticatedPage.goto('/study/course/123')
+    await authenticatedPage.goto('/#/study/course/123')
     // 等待视频播放器加载
     const videoPlayer = authenticatedPage
@@ -100,7 +100,7 @@ authenticatedTest.describe('学习进度（已登录）', () => {
 // 不需要登录的测试仍然使用普通 test
 test.describe('课程浏览（未登录）', () => {
   test('游客可以浏览课程列表', async ({ page }) => {
-    await page.goto('/courses-list')
+    await page.goto('/#/courses-list')
     // 等待课程列表加载
     await page.waitForSelector('.course-card', { timeout: 5000 })
@@ -113,7 +113,7 @@ test.describe('课程浏览（未登录）', () => {
   })
   test('游客可以查看课程详情', async ({ page }) => {
-    await page.goto('/courses/123')
+    await page.goto('/#/courses/123')
     // 验证页面加载
     const courseTitle = page.locator('h1').or(page.locator('.course-title'))
@@ -121,7 +121,7 @@ test.describe('课程浏览（未登录）', () => {
   })
   test('游客查看详情提示登录', async ({ page }) => {
-    await page.goto('/courses/123')
+    await page.goto('/#/courses/123')
     // 查找"开始学习"或"购买"按钮
     const startButton = page
@@ -132,7 +132,7 @@ test.describe('课程浏览（未登录）', () => {
       await startButton.click()
       // 验证跳转到登录页
-      await expect(page).toHaveURL(/\/login/)
+      await expect(page).toHaveURL(/\/#\/login/)
     }
   })
 })
--- a/e2e/helpers/auth.js
View file @5df430c
+++ b/e2e/helpers/auth.js
View file @5df430c
@@ -34,31 +34,38 @@ export async function login(page, account = TEST_ACCOUNT) {
   console.log('🔐 开始登录流程...')
   // 1. 访问登录页
-  await page.goto('/login')
+  await page.goto('/#/login')
   console.log('✓ 已访问登录页')
   // 2. 等待登录表单加载
-  await page.waitForSelector('input[name="phone"]', { timeout: 10000 })
+  await page.waitForSelector('input[name="mobile"]', { timeout: 10000 })
   console.log('✓ 登录表单已加载')
   // 3. 输入手机号
-  const phoneInput = page
+  const phoneInput = page.locator('input[name="mobile"]')
-    .locator('input[name="phone"]')
-    .or(page.locator('input[placeholder*="手机号"]'))
   await phoneInput.fill(account.phone)
   console.log(`✓ 已输入手机号: ${account.phone}`)
-  // 4. 点击"发送验证码"按钮（触发短信接口）
+  // 触发 blur 事件以验证手机号
-  const sendCodeButton = page
+  await phoneInput.blur()
-    .locator('button:has-text("发送验证码")')
+  await page.waitForTimeout(500) // 等待验证完成
-    .or(page.locator('button:has-text("获取验证码")'))
-    .or(page.locator('button:has-text("发送")'))
-    .first()
-  // 确保按钮可点击
+  // 4. 点击"获取验证码"按钮（触发短信接口）
+  const sendCodeButton = page.locator('button:has-text("获取验证码")')
+
+  // 确保按钮可点击（等待按钮启用）
   await sendCodeButton.waitFor({ state: 'visible', timeout: 5000 })
   console.log('✓ 发送验证码按钮已找到')
+  // 等待按钮启用（手机号验证通过后启用）
+  await page.waitForTimeout(1000)
+  // Poll until button is enabled
+  let retries = 0
+  while ((await sendCodeButton.isDisabled()) && retries < 10) {
+    await page.waitForTimeout(500)
+    retries++
+  }
+
   // 点击发送验证码
   await sendCodeButton.click()
   console.log('✓ 已点击发送验证码按钮，等待接口响应...')
@@ -78,22 +85,14 @@ export async function login(page, account = TEST_ACCOUNT) {
   await page.waitForTimeout(500)
   // 7. 输入验证码
-  const codeInput = page
+  const codeInput = page.locator('#verificationCode')
-    .locator('input[name="code"]')
-    .or(page.locator('input[placeholder*="验证码"]'))
-    .or(page.locator('input[maxlength="6"]'))
-    .first()
   await codeInput.waitFor({ state: 'visible', timeout: 5000 })
   await codeInput.fill(account.code)
   console.log(`✓ 已输入验证码: ${account.code}`)
   // 8. 点击登录按钮
-  const loginButton = page
+  const loginButton = page.locator('button[type="submit"]')
-    .locator('button[type="submit"]')
-    .or(page.locator('button:has-text("登录")'))
-    .or(page.locator('.van-button--primary'))
-    .first()
   await loginButton.waitFor({ state: 'visible', timeout: 5000 })
   await loginButton.click()
@@ -102,7 +101,7 @@ export async function login(page, account = TEST_ACCOUNT) {
   // 9. 等待登录成功（跳转到首页或显示成功提示）
   try {
     // 方式1：等待 URL 变化
-    await page.waitForURL(/\/(home|index|#)?/, { timeout: 15000 })
+    await page.waitForURL(/\/#\/(home|index)?/, { timeout: 15000 })
     console.log('✓ 登录成功（URL 已变化）')
   } catch (error) {
     // 方式2：等待成功提示（toast）
@@ -112,7 +111,11 @@ export async function login(page, account = TEST_ACCOUNT) {
     } catch (toastError) {
       // 方式3：检查是否已经在首页
       const currentUrl = page.url()
-      if (currentUrl.includes('/home') || currentUrl.includes('/index')) {
+      if (
+        currentUrl.includes('/#/home') ||
+        currentUrl.includes('/#/index') ||
+        currentUrl.endsWith('#/')
+      ) {
         console.log('✓ 登录成功（已在首页）')
       } else {
         console.log(`⚠ 当前 URL: ${currentUrl}`)
@@ -122,7 +125,10 @@ export async function login(page, account = TEST_ACCOUNT) {
     }
   }
-  // 10. 等待页面加载完成
+  // 10. 等待 localStorage 被写入（getUserInfoAPI 是异步的）
+  await page.waitForTimeout(3000)
+
+  // 11. 等待页面加载完成
   await page.waitForLoadState('networkidle', { timeout: 10000 })
   console.log('✅ 登录流程完成！')
 }
@@ -139,9 +145,9 @@ export async function quickLogin(page, token = null) {
     await login(page)
     // 从 localStorage 获取 token
     token = await page.evaluate(() => {
-      const userInfo = localStorage.getItem('user_info')
+      const currentUser = localStorage.getItem('currentUser')
-      if (userInfo) {
+      if (currentUser) {
-        return JSON.parse(userInfo).token
+        return JSON.parse(currentUser).token
       }
       return null
     })
@@ -153,8 +159,10 @@ export async function quickLogin(page, token = null) {
       token: userToken,
       userId: 'test-user-123',
       phone: '13761653761',
+      id: 817005,
+      name: '胡大',
+      mobile: '13761653761',
     }
-    localStorage.setItem('user_info', JSON.stringify(mockUserInfo))
     localStorage.setItem('currentUser', JSON.stringify(mockUserInfo))
   }, token)
@@ -166,7 +174,8 @@ export async function quickLogin(page, token = null) {
  * @param {Page} page - Playwright page 对象
  */
 export async function logout(page) {
-  // 清空 localStorage
+  try {
+    // 清空 localStorage（同时清除两个可能的key）
     await page.evaluate(() => {
       localStorage.removeItem('user_info')
       localStorage.removeItem('currentUser')
@@ -179,6 +188,10 @@ export async function logout(page) {
     await page.reload()
     console.log('✅ 登出成功')
+  } catch (error) {
+    // 如果页面还没加载，先导航到一个页面再清理
+    console.log('⚠ 页面未初始化，跳过 localStorage 清理')
+  }
 }
 /**
@@ -187,9 +200,9 @@ export async function logout(page) {
  * @returns {Promise<boolean>} 是否已登录
  */
 export async function isLoggedIn(page) {
-  const userInfo = await page.evaluate(() => localStorage.getItem('user_info'))
+  const currentUser = await page.evaluate(() => localStorage.getItem('currentUser'))
-  return !!userInfo
+  return !!currentUser
 }
 /**
@@ -200,9 +213,9 @@ export async function isLoggedIn(page) {
 export async function waitForLoginState(page, loggedIn = true) {
   if (loggedIn) {
     // 等待登录成功
-    await page.waitForURL(/\/(home|index)?/, { timeout: 10000 })
+    await page.waitForURL(/\/#\/(home|index)?/, { timeout: 10000 })
   } else {
     // 等待退出到登录页
-    await page.waitForURL('/login', { timeout: 10000 })
+    await page.waitForURL('/#/login', { timeout: 10000 })
   }
 }
--- a/playwright.config.js
View file @5df430c
+++ b/playwright.config.js
View file @5df430c
@@ -32,7 +32,7 @@ export default defineConfig({
   // 共享配置
   use: {
     // 基础 URL（本地开发服务器，通过代理访问测试服务器）
-    baseURL: 'http://localhost:5173',
+    baseURL: 'http://localhost:8206',
     // 追踪失败测试（用于调试）
     trace: 'on-first-retry',
@@ -70,20 +70,21 @@ export default defineConfig({
         viewport: { width: 1280, height: 720 },
       },
     },
-    {
+    // 暂时禁用 webkit（浏览器下载失败）
-      name: 'webkit-mobile',
+    // {
-      use: {
+    //   name: 'webkit-mobile',
-        ...devices['iPhone 12'],
+    //   use: {
-        browserName: 'webkit',
+    //     ...devices['iPhone 12'],
-      },
+    //     browserName: 'webkit',
-    },
+    //   },
+    // },
   ],
   // 开发服务器配置
   webServer: {
     // 启动本地开发服务器（通过反向代理访问测试服务器）
     command: 'pnpm dev',
-    url: 'http://localhost:5173',
+    url: 'http://localhost:8206',
     reuseExistingServer: !process.env.CI,
     timeout: 120 * 1000,
   },