5.0 KiB
5.0 KiB
赛程编排界面测试指南
测试前准备
1. 启动前端服务
cd D:\workspace\31.比赛项目\project\martial-web
npm run dev
访问地址: http://localhost:5173 (或控制台显示的端口)
2. 确认后端服务运行
- 后端地址: http://localhost:8123
- 确认赛事ID: 200 (或其他已有赛程数据的赛事)
测试场景
场景1: 竞赛分组Tab界面测试
测试步骤
- 进入赛程编排页面
- 确认默认显示"竞赛分组"Tab
- 检查时间段选择器显示是否正确
- 点击不同时间段按钮,观察分组数据是否正确切换
预期结果
✅ 分组显示为紧凑列表格式 ✅ 每个分组标题格式: "序号. 项目名称 [类型标签] 队伍数 人数 编号" ✅ 集体项目子项格式: "序号. 单位名称 [场地标签]" ✅ 个人项目子项格式: "序号. 单位-姓名 [场地标签]" ✅ 场地标签显示为小标签(如"场A场") ✅ 时间段切换时数据正确过滤
对比参考图片
- 参考图片:
doc/image/订单管理页面/微信图片_20251127165909_228_2.png - 检查点:
- 布局是否紧凑
- 序号是否显示
- 场地标签是否内联显示
- 颜色样式是否协调
场景2: 场地Tab界面测试
测试步骤
- 点击"场地"Tab切换
- 确认显示时间段选择器
- 观察场地分区是否正确显示
- 检查每个场地的标题样式
- 检查每个场地的表格内容
- 点击不同时间段,观察各场地表格数据变化
预期结果
✅ 显示多个场地分区(一号场地、二号场地等) ✅ 每个场地标题有蓝色背景 ✅ 每个场地显示独立的表格 ✅ 表格列包含: 序号、项目、单人/集体、队伍、组数、合并场、序号 ✅ "单人/集体"列显示带颜色的标签 ✅ 集体项目按单位展开为多行 ✅ 个人项目整个分组显示为一行 ✅ 时间段切换时表格数据正确过滤 ✅ 某场地无数据时显示空数据提示
对比参考图片
- 参考图片:
doc/image/订单管理页面/微信图片_20251127165915_229_2.png - 检查点:
- 场地分区是否清晰
- 场地标题样式是否匹配(蓝色背景)
- 表格列是否对齐
- 表格边框是否显示
- 数据是否正确填充
场景3: 数据过滤测试
测试步骤
- 在"竞赛分组"Tab选择不同时间段
- 记录显示的分组数量
- 切换到"场地"Tab
- 确认相同时间段,各场地表格数据总和与竞赛分组数量一致
- 切换不同时间段,重复验证
预期结果
✅ 两个Tab的时间段选择器状态保持同步 ✅ 同一时间段,两个Tab显示的数据应该对应 ✅ 数据过滤准确,无遗漏或重复
场景4: 空数据测试
测试步骤
- 选择一个没有赛程的时间段
- 观察"竞赛分组"Tab显示
- 观察"场地"Tab显示
预期结果
✅ "竞赛分组"Tab显示空数据提示 ✅ "场地"Tab各场地显示空数据提示 ✅ 空数据提示美观清晰
场景5: 大数据量测试
测试步骤
- 使用有大量参赛者的赛事(如测试赛事ID: 200, 1000人)
- 检查页面加载速度
- 检查表格滚动是否流畅
- 检查数据显示是否完整
预期结果
✅ 页面加载无明显卡顿 ✅ 表格滚动流畅 ✅ 所有数据正确显示 ✅ 序号连续无跳号
场景6: 功能按钮测试
测试步骤
- 点击"刷新"按钮
- 点击"保存编排"按钮(如果状态允许)
- 观察状态标签变化
预期结果
✅ 刷新按钮正常工作 ✅ 保存按钮正常工作 ✅ 状态标签正确显示(未编排/编排中/已锁定)
兼容性测试
浏览器测试
- Chrome (最新版)
- Edge (最新版)
- Firefox (最新版)
分辨率测试
- 1920x1080
- 1366x768
- 1280x720
问题记录
界面问题
| 序号 | 问题描述 | 严重程度 | 截图 | 状态 |
|---|---|---|---|---|
| 1 |
数据问题
| 序号 | 问题描述 | 严重程度 | 截图 | 状态 |
|---|---|---|---|---|
| 1 |
功能问题
| 序号 | 问题描述 | 严重程度 | 截图 | 状态 |
|---|---|---|---|---|
| 1 |
性能指标
页面加载
- 初始加载时间 < 2秒
- Tab切换响应 < 500毫秒
- 时间段切换响应 < 500毫秒
数据渲染
- 100人以下: 即时渲染
- 100-500人: < 1秒
- 500-1000人: < 2秒
- 1000人以上: < 3秒
验收标准
必须满足
✅ 界面布局与参考图片一致 ✅ 所有功能正常工作 ✅ 数据显示准确无误 ✅ 无明显性能问题 ✅ 无控制台错误
建议满足
✅ 页面加载流畅 ✅ 动画过渡自然 ✅ 空数据提示友好 ✅ 多浏览器兼容
测试完成确认
- 所有测试场景已执行
- 所有问题已记录
- 严重问题已修复
- 功能验收通过
- 界面验收通过
测试人员: _____________ 测试日期: _____________ 测试版本: _____________