# 课程包创建流程全面测试计划

## 测试概述

本次测试针对课程包创建流程进行全面 E2E 测试，确保从登录到课程包创建成功的整个流程正常工作。

## 测试文件

- `tests/e2e/admin/course-package-comprehensive.spec.ts` - 综合测试用例

## 测试场景

### 1. 完整流程测试
- **测试文件**: `完整流程：填写所有 7 个步骤创建课程包`
- **测试内容**:
  - 步骤 1: 基本信息（课程名称、主题、年级、核心内容、绘本名称、领域标签）
  - 步骤 2: 课程介绍（课程简介、课程亮点、课程目标）
  - 步骤 3: 排课参考（总课时、课时时长、排课建议）
  - 步骤 4: 导入课（跳过）
  - 步骤 5: 集体课（创建并填写完整信息）
  - 步骤 6: 领域课（跳过）
  - 步骤 7: 环创建设（填写环境创设内容）
- **预期结果**: 课程包创建成功，列表中显示新课程包

### 2. 最小化测试
- **测试文件**: `最小化流程：只填写必填项创建课程包`
- **测试内容**:
  - 步骤 1: 只填写 4 个必填项（课程名称、主题、年级、核心内容）
  - 步骤 2-7: 全部跳过
- **预期结果**: 课程包创建成功，验证必填项逻辑正确

### 3. 验证逻辑测试
- **测试文件 1**: `必填项验证：未填必填项时无法进入下一步`
  - 不填写任何内容，直接点击下一步
  - 验证仍停留在步骤 1

- **测试文件 2**: `部分填写验证：只填部分必填项时无法进入下一步`
  - 只填写课程名称，不填写主题和年级
  - 验证无法进入下一步

### 4. 数据持久化测试
- **测试文件**: `数据验证：创建后查看详情数据完整`
- **测试内容**:
  - 创建课程包
  - 进入课程包详情页
  - 验证保存的数据完整
- **预期结果**: 详情页显示的数据与填写的一致

## 测试数据

### 完整流程测试数据
```javascript
{
  name: '完整测试课程包-{timestamp}',
  theme: '社会认知',
  grades: ['小班'],
  bookName: '折耳兔奇奇',
  coreContent: '通过折耳兔奇奇的故事，帮助孩子理解友谊和分享的重要性，培养社交能力。',
  domainTags: ['倾听与表达'],
  introSummary: '这是一门专为小班幼儿设计的课程...',
  introHighlights: '1. 故事情节生动有趣...',
  introGoals: '1. 理解故事内容...',
  totalHours: '8',
  hourDuration: '30',
  scheduleAdvice: '建议每周 1-2 课时...',
  collectiveName: '集体课——折耳兔奇奇绘本阅读',
  collectiveDuration: 25,
  collectiveObjectives: '1. 认知：完整观看绘本动画...',
  collectivePreparation: '1. 绘本 PPT\n2. 相关图片...',
  environmentConstruction: '1. 夸夸卡展示区...',
}
```

### 最小化测试数据
```javascript
{
  name: '最小化测试课程包-{timestamp}',
  theme: '社会认知',
  grades: ['中班'],
  coreContent: '最小化测试课程，仅包含必填项。',
  domainTags: ['人际交往'],
}
```

## 运行测试

### 前提条件
1. 后端服务运行在 `http://localhost:8080`
2. 前端服务运行在 `http://localhost:5173`
3. 数据库包含测试主题数据
4. 超管账号可用 (admin/123456)

### 启动服务
```bash
# 启动所有服务
./start-all.sh

# 或分别启动
# 后端
cd reading-platform-java
mvn spring-boot:run

# 前端（新终端）
cd reading-platform-frontend
npm run dev
```

### 运行测试
```bash
cd reading-platform-frontend

# 无头模式（快速执行，不显示浏览器）
npm run test:e2e -- --project=chromium course-package-comprehensive.spec.ts

# 有头模式（显示浏览器操作过程）
npm run test:e2e:headed -- --project=chromium course-package-comprehensive.spec.ts

# UI 调试模式（可视化管理测试用例）
npm run test:e2e:ui
```

### 运行单个测试
```bash
# 运行完整流程测试
npm run test:e2e -- --grep "完整流程"

# 运行最小化测试
npm run test:e2e -- --grep "最小化"

# 运行验证逻辑测试
npm run test:e2e -- --grep "必填项验证"

# 运行数据持久化测试
npm run test:e2e -- --grep "数据验证"
```

## 测试通过标准

1. ✅ 超管登录成功
2. ✅ 能进入课程管理页面
3. ✅ 能进入课程创建页面
4. ✅ 7 个步骤能正常切换
5. ✅ 必填项验证生效
6. ✅ 提交后显示成功提示
7. ✅ 跳转到课程列表页
8. ✅ 新课程包在列表中可见
9. ✅ 查看课程包详情，数据完整

## 测试检查清单

### 测试前检查
- [ ] 后端服务已启动
- [ ] 前端服务已启动
- [ ] 数据库连接正常
- [ ] 测试主题数据存在
- [ ] 超管账号可用

### 测试后清理
- [ ] 停止前后端服务
- [ ] 清理测试数据（可选）
- [ ] 查看测试报告
- [ ] 记录测试结果

## 测试报告

测试完成后，查看 HTML 报告：
```bash
# 生成测试报告
npx playwright show-report

# 或打开报告文件
# reading-platform-frontend/playwright-report/index.html
```

## 故障排查

### 常见问题

1. **登录失败**
   - 检查超管账号密码是否正确
   - 检查后端服务是否运行
   - 检查数据库用户表是否有 admin 用户

2. **页面加载超时**
   - 检查前端服务是否运行
   - 检查端口 5173 是否被占用
   - 增加超时时间 `test.setTimeout()`

3. **元素找不到**
   - 检查页面结构是否变化
   - 检查选择器是否正确
   - 使用 `page.waitForTimeout()` 增加等待时间

4. **创建失败**
   - 检查后端日志
   - 检查请求参数格式
   - 检查数据库表结构

## 测试日志

测试执行过程中的关键日志会输出到控制台，包括：
- ✅ 每个步骤完成情况
- 🎉 测试通过确认
- ❌ 错误信息（如有）

## 更新记录

| 日期 | 更新内容 |
|------|----------|
| 2026-03-16 | 创建测试计划和测试用例 |