E2E 测试快速入门
⚠️ 重要：路由配置检查
在编写任何测试前，必须先检查 Vue Router 的配置模式：
# 查看 router 配置
cat src/router/index.js | grep "createWeb"
本项目使用 Hash 模式：
history: createWebHashHistory(import.meta.env.VITE_BASE || '/')
因此所有路由 URL 必须添加 /#/ 前缀：
- ✅ 正确：
/#/login,/#/profile,/#/courses/123 - ❌ 错误：
/login,/profile,/courses/123
🚀 快速开始
运行测试
# 运行所有 E2E 测试
pnpm test:e2e
# UI 模式（推荐）
pnpm test:e2e:ui
# 调试模式
pnpm test:e2e:debug
🔑 测试账号
测试服务器: http://oa-dev.onwall.cn（通过反向代理访问）
测试环境使用固定验证码：
-
手机号:
13761653761 -
验证码:
888888
重要说明:
- ⚠️ 必须点击"发送验证码"按钮触发接口
- ⚠️ 等待接口响应后，才能输入验证码
- ⚠️ 测试服务器会自动返回固定验证码
888888
代理说明:
- 测试通过本地 Vite 开发服务器（
localhost:5173）运行 - 所有
/srv/*请求代理到http://oa-dev.onwall.cn/srv/*
📝 编写测试
1. 需要登录的测试
import { login } from './helpers/auth'
test('测试功能', async ({ page }) => {
// 登录
await login(page)
// 进行测试...
await page.goto('/profile')
})
2. 自动登录（推荐）
import { test } from './helpers/auth'
test.describe('功能测试', () => {
// 使用 authenticatedPage 自动登录
test('测试功能', async ({ authenticatedPage }) => {
// 页面已自动登录
await authenticatedPage.goto('/profile')
})
})
3. 不需要登录的测试
test('浏览课程', async ({ page }) => {
await page.goto('/courses-list')
// 测试...
})
📚 详细文档
🛠️ 工具函数
所有工具函数都在 e2e/helpers/auth.js：
| 函数 | 说明 |
|---|---|
login(page) |
执行登录流程 |
quickLogin(page) |
快速登录（localStorage） |
logout(page) |
登出 |
isLoggedIn(page) |
检查登录状态 |
💡 最佳实践
- 测试前确保干净的登录状态
test.beforeEach(async ({ page }) => {
await logout(page)
})
- 使用明确的等待
// ✓ 好
await page.waitForSelector('.content')
// ✗ 不好
await page.waitForTimeout(3000)
-
使用多个选择器备选
javascript const button = page.locator('button[type="submit"]').or(page.locator('button:has-text("登录")'))
🐛 调试技巧
UI 模式
pnpm test:e2e:ui
逐步调试
test('调试', async ({ page }) => {
await page.goto('/login')
await page.pause() // 暂停，打开 Inspector
await login(page)
})
查看执行过程
# 有头模式（可以看到浏览器）
pnpm test:e2e --headed
# 慢动作模式
pnpm test:e2e --slow-mo=1000
📂 文件结构
e2e/
├── helpers/
│ └── auth.js # 认证工具
├── auth.spec.js # 认证测试示例
├── courses.spec.js # 课程功能测试
├── example.spec.js # 基础测试示例
└── README.md # 本文件