# 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 记录模型

```typescript
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';  // 状态
}
```

### 测试结果模型

```typescript
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 记录文件格式：

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

## 基本信息

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

## 复现步骤

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

## 预期结果

{预期结果描述}

## 实际结果

{实际结果描述}

## 截图

{截图}

## 备注

{其他备注信息}
```