小程序后台管理系统
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

6.1 KiB

🧪 栏目选择记忆功能测试指南

🎯 测试目标

验证栏目选择记忆功能是否按预期工作,确保用户体验的提升。

📋 测试准备

环境要求

  • 浏览器支持 localStorage
  • 已登录 CMS 系统
  • 至少有 2-3 个不同的栏目可供选择

测试数据

  • 栏目A:例如"技术文章"
  • 栏目B:例如"产品动态"
  • 栏目C:例如"公司新闻"

🔬 详细测试用例

测试用例 1:首次使用记忆功能

步骤:

  1. 清空浏览器 localStorage(可选,模拟首次使用)
  2. 进入文章管理页面
  3. 点击"添加文章"按钮
  4. 观察栏目选择框的状态
  5. 选择"栏目A"
  6. 填写文章标题和内容
  7. 保存文章

预期结果:

  • 初始状态栏目选择框为空或显示默认值
  • 选择栏目A后,系统应该记住这个选择
  • 保存成功后,栏目A被保存到 localStorage

验证方法:

  • 打开浏览器开发者工具
  • 查看 Application > Local Storage
  • 确认存在 cms_article_last_category 键,值为栏目A的ID

测试用例 2:记忆功能恢复

步骤:

  1. 在测试用例1的基础上
  2. 关闭添加文章弹窗
  3. 重新点击"添加文章"按钮
  4. 观察栏目选择框的状态

预期结果:

  • 栏目选择框应该自动显示"栏目A"
  • 用户无需重新选择栏目

验证方法:

  • 确认栏目选择框的值确实是栏目A
  • 确认这是自动填入的,不是用户手动选择的

测试用例 3:更换栏目记忆

步骤:

  1. 在测试用例2的基础上
  2. 将栏目从"栏目A"改为"栏目B"
  3. 填写文章内容并保存
  4. 重新打开添加文章弹窗

预期结果:

  • 保存后,localStorage 中的值应该更新为栏目B的ID
  • 重新打开弹窗时,应该显示"栏目B"

验证方法:

  • 检查 localStorage 中的值是否已更新
  • 确认新弹窗中显示的是栏目B

测试用例 4:从栏目页面添加文章

步骤:

  1. 进入栏目管理页面
  2. 找到"栏目C",点击其"添加文章"按钮
  3. 观察栏目选择框的状态
  4. 填写文章内容并保存
  5. 重新从文章管理页面点击"添加文章"

预期结果:

  • 从栏目C页面打开的弹窗应该显示"栏目C"
  • 保存后,记忆应该更新为栏目C
  • 从文章管理页面重新打开时,应该显示栏目C

验证方法:

  • 确认优先级策略正确工作
  • 确认传入的栏目ID优先于记忆的栏目ID

测试用例 5:编辑文章不影响记忆

步骤:

  1. 确保当前记忆的栏目是"栏目C"
  2. 编辑一篇属于"栏目A"的现有文章
  3. 修改文章内容(不修改栏目)
  4. 保存文章
  5. 重新打开添加文章弹窗

预期结果:

  • 编辑时显示的栏目应该是文章原有的栏目A
  • 保存后,记忆的栏目仍然是栏目C(不变)
  • 新建文章时仍然显示栏目C

验证方法:

  • 确认编辑操作不会影响栏目记忆
  • 确认新增和编辑的逻辑完全独立

测试用例 6:跨会话持久化

步骤:

  1. 确保当前记忆的栏目是"栏目C"
  2. 完全关闭浏览器
  3. 重新打开浏览器并登录系统
  4. 点击"添加文章"按钮

预期结果:

  • 栏目选择框应该仍然显示"栏目C"
  • 记忆功能跨会话保持有效

验证方法:

  • 确认 localStorage 数据在浏览器重启后仍然存在
  • 确认功能正常恢复

测试用例 7:手动选择栏目的即时保存

步骤:

  1. 打开添加文章弹窗
  2. 当前显示栏目A,手动改为栏目B
  3. 不保存文章,直接关闭弹窗
  4. 重新打开添加文章弹窗

预期结果:

  • 手动选择栏目B后,应该立即保存到记忆中
  • 重新打开弹窗时应该显示栏目B
  • 即使没有保存文章,栏目记忆也应该更新

验证方法:

  • 确认栏目选择的 onChange 事件正确触发保存
  • 确认不依赖文章保存就能更新记忆

🔍 边界情况测试

边界测试 1:清空栏目选择

步骤:

  1. 打开添加文章弹窗(当前有记忆的栏目)
  2. 点击栏目选择框的"清空"按钮
  3. 观察系统行为

预期结果:

  • 栏目选择框应该变为空
  • 系统应该正常处理空值情况

边界测试 2:无效栏目ID

步骤:

  1. 手动修改 localStorage 中的栏目ID为一个不存在的值
  2. 刷新页面并打开添加文章弹窗
  3. 观察系统行为

预期结果:

  • 系统应该优雅地处理无效ID
  • 栏目选择框应该显示为空或默认状态
  • 不应该出现错误提示

边界测试 3:localStorage 不可用

步骤:

  1. 禁用浏览器的 localStorage 功能
  2. 尝试使用栏目记忆功能
  3. 观察系统行为

预期结果:

  • 系统应该正常工作,只是没有记忆功能
  • 不应该出现 JavaScript 错误
  • 功能应该优雅降级

测试检查清单

基础功能

  • 首次选择栏目能够正确保存
  • 重新打开弹窗能够正确恢复栏目
  • 更换栏目能够正确更新记忆
  • 手动选择栏目能够即时保存

优先级策略

  • 从栏目页面添加文章时优先使用传入栏目
  • 其他情况下使用记忆的栏目
  • 编辑文章时不影响栏目记忆

持久化

  • 关闭浏览器后重新打开仍然有效
  • localStorage 数据格式正确
  • 数据读写操作正常

用户体验

  • 功能对用户透明,不干扰正常操作
  • 栏目选择状态清晰可见
  • 没有不必要的提示或干扰

错误处理

  • 无效栏目ID的处理
  • localStorage 不可用时的降级
  • 空值和边界情况的处理

🎯 测试通过标准

所有测试用例都应该通过,特别是:

  1. 核心功能正常:记忆和恢复功能完全正常
  2. 优先级正确:各种场景下的栏目选择优先级符合预期
  3. 数据持久化:跨会话数据保持有效
  4. 用户体验良好:功能提升效率,不造成困扰
  5. 错误处理完善:边界情况和异常情况处理得当

通过这些测试,可以确保栏目选择记忆功能稳定可靠,真正提升用户的使用体验!