2.1 KiB
2.1 KiB
测试方案 — 2026-04-16-17-15-37
测试环境准备
- 项目已完成上一次构建,无类型错误。
- 使用测试账号
admin / 123456(超级管理员)登录系统。 - 进入 图文报告生成 页面并上传视频完成抽帧,确保视频分析面板有关键帧截图。
测试项清单
测试项 1:"插入" 按钮位于图片中央且为实体按钮样式
测试步骤:
- 将鼠标悬停到任意关键帧截图卡片上。
- 观察按钮的位置、颜色、形状。
预期结果:
- 按钮显示在图片的正中央。
- 按钮是实体胶囊按钮(带背景色、圆角、阴影),不是纯文字链接。
- 按钮颜色为绿色系(
emerald-500),与底部 "可拖拽" 的蓝色明显不同。
测试项 2:"插入" 按钮显隐行为正确
测试步骤:
- 鼠标移入关键帧卡片。
- 鼠标移出关键帧卡片。
预期结果:
- 移入时按钮与 "可拖拽" 文字同时淡入显示。
- 移出时按钮与 "可拖拽" 文字同时淡出隐藏。
- 未悬停时图片上无遮挡文字。
测试项 3:点击按钮功能保持正常
测试步骤:
- 鼠标悬停到关键帧卡片,点击中央的 "插入" 按钮。
预期结果:
- 编辑器中第一个空置的
image-placeholder被填充为该帧图片。 - 视频播放器时间不发生变化(未触发卡片跳转)。
- 若无可插入空位,弹出
没有可插入图片的空位提示。
测试项 4:"手动" 徽章不被遮挡
测试步骤:
- 查看手动截取的关键帧截图。
预期结果:
- 左上角的 "手动" 徽章清晰可见,未被中央按钮遮挡。
测试项 5:构建与类型检查回归
测试步骤:
- 在项目根目录执行:
npm run lint npm run build
预期结果:
npm run lint无 TypeScript 编译错误。npm run build构建成功。
回归验证范围
- 拖拽插入功能未被破坏。
- 关键帧卡片的删除、视频跳转功能正常。
- 编辑器保存、打印功能正常。