183 lines
6.3 KiB
Markdown
183 lines
6.3 KiB
Markdown
# 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. ...
|
||
|
||
## 预期结果
|
||
|
||
{预期结果描述}
|
||
|
||
## 实际结果
|
||
|
||
{实际结果描述}
|
||
|
||
## 截图
|
||
|
||
{截图}
|
||
|
||
## 备注
|
||
|
||
{其他备注信息}
|
||
```
|