HaniBlindBox/.kiro/specs/admin-ui-testing/design.md

Design Document: 后台管理系统 UI 功能测试

Overview

本设计文档描述了 HoneyBox 后台管理系统 UI 功能测试的方法和流程。测试将通过浏览器自动化工具（Playwright）进行，验证所有页面的按钮功能是否正常工作。

Architecture

测试架构

┌─────────────────────────────────────────────────────────────┐
│                    测试执行层                                │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  Playwright │  │  截图工具   │  │  Bug记录    │         │
│  │  浏览器自动化│  │             │  │  生成器     │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────────────┐
│                    被测系统                                  │
│  ┌─────────────────────────────────────────────────────┐   │
│  │              HoneyBox Admin Web                      │   │
│  │              http://localhost:5173                   │   │
│  └─────────────────────────────────────────────────────┘   │
│                           │                                 │
│                           ▼                                 │
│  ┌─────────────────────────────────────────────────────┐   │
│  │              HoneyBox Admin API                      │   │
│  │              http://localhost:5239                   │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

Components and Interfaces

测试模块划分

模块	页面数量	主要功能
首页仪表盘	1	数据统计、快捷操作、主题设置
用户管理	5	用户列表、盈亏统计、VIP管理、邀请统计、登录统计
商品管理	2	盒子管理、盒子类型管理
订单管理	5	购买订单、发货订单、回收订单、卡单订单、综合订单
营销活动	8	优惠券、领取记录、广告、周榜、月榜、排行榜
钻石商城	1	钻石商品管理
系统配置	8	各类配置页面
内容管理	3	单页、悬浮球、福利屋入口
福利与任务	4	奖励、签到、任务、权益等级
系统管理	6	菜单、角色、权限、部门、管理员、日志

测试接口

每个页面测试包含以下标准测试点：

1. 页面加载测试

   • 验证页面正常加载
   • 验证数据列表显示
   • 验证无控制台错误

2. 查询功能测试

   • 验证筛选条件输入
   • 验证查询按钮点击
   • 验证查询结果显示
   • 验证重置按钮功能

3. CRUD 功能测试

   • 验证新增按钮和表单
   • 验证编辑按钮和表单
   • 验证删除按钮和确认
   • 验证表单验证规则

4. 分页功能测试

   • 验证分页组件显示
   • 验证页码切换
   • 验证每页条数切换

Data Models

Bug 记录模型

interface BugReport {
  id: string;           // Bug ID，格式：BUG-{模块}-{序号}
  title: string;        // Bug 标题
  module: string;       // 所属模块
  page: string;         // 所属页面
  severity: 'high' | 'medium' | 'low';  // 严重程度
  steps: string[];      // 复现步骤
  expected: string;     // 预期结果
  actual: string;       // 实际结果
  screenshot?: string;  // 截图路径
  createdAt: string;    // 发现时间
  status: 'open' | 'fixed' | 'closed';  // 状态
}

测试结果模型

interface TestResult {
  taskId: string;       // 任务ID
  taskName: string;     // 任务名称
  status: 'pass' | 'fail' | 'skip';  // 测试状态
  bugs: string[];       // 关联的 Bug ID 列表
  executedAt: string;   // 执行时间
  notes?: string;       // 备注
}

Error Handling

测试异常处理

1. 页面加载超时

   • 等待时间：30秒
   • 超时后记录为 Bug

2. 元素未找到

   • 记录元素选择器
   • 截图保存当前页面状态

3. API 请求失败

   • 记录请求 URL 和响应状态
   • 检查控制台错误信息

4. 表单提交失败

   • 记录表单数据
   • 记录错误提示信息

Testing Strategy

测试执行顺序

1. 首先测试系统管理模块（确保基础功能正常）
2. 然后测试用户管理模块
3. 接着测试商品管理和订单管理
4. 最后测试营销活动和其他模块

测试数据准备

• 使用现有数据库数据进行测试
• 新增测试数据时使用明显的测试标识（如：测试_xxx）
• 测试完成后清理测试数据

Bug 记录规范

每个 Bug 记录文件格式：

# BUG-{模块}-{序号}: {简要描述}

## 基本信息

- **所属模块**: {模块名}
- **所属页面**: {页面名}
- **严重程度**: 高/中/低
- **发现时间**: {时间}

## 复现步骤

1. {步骤1}
2. {步骤2}
3. ...

## 预期结果

{预期结果描述}

## 实际结果

{实际结果描述}

## 截图

{截图}

## 备注

{其他备注信息}