204 lines
8.1 KiB
Markdown
204 lines
8.1 KiB
Markdown
# 报告厅信息界面功能测试用例
|
||
|
||
## 🎯 测试概览
|
||
|
||
**编写时间**: 2025-07-09
|
||
**测试工具**: Cursor + Playwright MCP
|
||
**测试范围**: 后勤管理 → 报告厅信息界面
|
||
**测试类型**: 端到端功能 + UI 可用性 + 校验逻辑
|
||
**预计执行时长**: 40–60 分钟
|
||
|
||
## 📋 测试准备
|
||
|
||
### 1. 环境要求
|
||
|
||
- ✅ 前端运行地址: `http://localhost` (默认 80 端口)
|
||
- ✅ 后端运行地址: `http://localhost:8080`
|
||
- ✅ 管理员测试账号: `admin / admin123`
|
||
- ✅ Playwright MCP 插件已启用
|
||
- ✅ 测试图片目录: `test/hall-info/test-images/`
|
||
|
||
### 2. 基础测试数据
|
||
|
||
```json
|
||
{
|
||
"testHalls": [
|
||
{
|
||
"hallName": "测试报告厅 A",
|
||
"hallDescription": "可容纳 200 人的大型多媒体报告厅",
|
||
"hallStatus": "1",
|
||
"hallImageFile": "报告厅-01.jpg"
|
||
},
|
||
{
|
||
"hallName": "测试报告厅 B",
|
||
"hallDescription": "小型多功能报告厅，适合研讨会",
|
||
"hallStatus": "1",
|
||
"hallImageFile": "报告厅-02.jpg"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 🧪 测试执行计划
|
||
|
||
> **Playwright 代码片段**示例均遵循 MCP snapshot → click/type → waitFor 的通用写法，可直接复制到 Playwright 脚本中。
|
||
|
||
### 阶段一：页面基础验证（10 分钟）
|
||
|
||
#### TC001: 页面加载和核心元素检查
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| **测试目标** | 验证“报告厅信息”页面可以在 3 秒内完成加载并正确渲染核心元素 |
|
||
| **前置条件** | 已登录系统，导航到 `后勤管理 → 报告厅管理 → 报告厅信息` 菜单 |
|
||
| **步骤** | 1. 调用 `browser.navigate('http://localhost/hq/bgtgl/hallInfo')` <br/>2. `await browser.waitFor(3000)` <br/>3. `const snapshot = await browser.snapshot()` 验证页面包含“报告厅信息”标题、搜索框、【新增】按钮、表格区域、分页组件 |
|
||
| **预期结果** | 页面 3 秒内加载完成；所有核心元素可见且可交互 |
|
||
| **Playwright 示例** |
|
||
```javascript
|
||
await browser.navigate('http://localhost/hq/hallInfo');
|
||
await browser.waitFor(3000);
|
||
const snapshot = await browser.snapshot();
|
||
// 断言标题存在
|
||
```
|
||
|
||
#### TC002: 默认数据列表展示
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| **测试目标** | 验证表格列（名称、状态、图片、描述、操作）显示完整，数据加载正确 |
|
||
| **步骤** | 1. 页面加载完成后解析表格 <br/>2. 检查列头文本 <br/>3. 验证至少存在 1 条数据 |
|
||
| **预期结果** | 列头文本正确，数据行显示完整，分页信息正确 |
|
||
|
||
### 阶段二：CRUD 功能测试（20 分钟）
|
||
|
||
#### TC003: 新增报告厅信息
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| **测试目标** | 验证新增功能完整性，包括表单校验、图片上传、保存成功提示及列表刷新 |
|
||
| **前置条件** | None |
|
||
| **步骤** | 1. 点击【新增】按钮 <br/>2. 填写“报告厅名称”、“描述” <br/>3. 选择状态为“可用” <br/>4. 上传 任意一张图片 (路径: test/hall-info/test-images/`) <br/>5. 点击【保存】按钮 <br/>6. 等待成功提示并搜索新增名称 |
|
||
| **预期结果** | 弹窗关闭、提示“操作成功”，列表第一行显示新数据，图片缩略图显示正常 |
|
||
| **Playwright 示例** |
|
||
```javascript
|
||
await browser.click('新增按钮', "button:has-text('新增')");
|
||
await browser.type('名称', "input[placeholder*='报告厅名称']", '测试报告厅 A');
|
||
await browser.type('描述', "textarea[placeholder*='描述']", '可容纳 200 人的大型多媒体报告厅');
|
||
await browser.click('状态下拉', "select[placeholder*='状态']");
|
||
await browser.selectOption('状态选项', 'select', ['1']);
|
||
// 上传图片
|
||
await browser.fileUpload('选择图片', "input[type='file']", 'test/hall-info/test-images/');
|
||
await browser.click('保存', "button:has-text('保存')");
|
||
await browser.waitFor(2000);
|
||
```
|
||
|
||
#### TC004: 编辑报告厅信息
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| **测试目标** | 验证编辑功能并确保修改后的数据正确保存 |
|
||
| **前置条件** | 已存在“测试报告厅 A”记录 |
|
||
| **步骤** | 1. 在列表中搜索并点击对应行【编辑】 <br/>2. 修改描述为“可容纳 180–200 人，带高清投影” <br/>3. 点击【保存】 <br/>4. 验证修改生效 |
|
||
| **预期结果** | 提示“操作成功”，描述字段显示新内容 |
|
||
|
||
#### TC005: 状态切换（可用 ↔ 不可用）
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| **测试目标** | 验证状态切换按钮或下拉框能实时更新报告厅可用状态 |
|
||
| **步骤** | 1. 点击状态切换或下拉，改为“不可用” <br/>2. 等待提示刷新 <br/>3. 再次切换回“可用” |
|
||
| **预期结果** | 状态字段值正确切换，表格颜色/标签同步更新 |
|
||
|
||
#### TC006: 删除报告厅信息
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| **测试目标** | 验证单条删除与批量删除功能 |
|
||
| **步骤** | 1. 勾选“测试报告厅 A”复选框 <br/>2. 点击【删除】按钮，确认弹窗 <br/>3. 验证提示成功并列表中不再出现该数据 |
|
||
| **预期结果** | 数据删除成功，表格刷新后该条目消失 |
|
||
|
||
### 阶段三：表单校验与异常测试（5 分钟）
|
||
|
||
#### TC007: 必填字段校验
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| **测试目标** | 验证未填写必填项时的校验提示 |
|
||
| **步骤** | 1. 点击【新增】 <br/>2. 不填任何字段直接保存 |
|
||
| **预期结果** | 名称、状态、图片均显示红色校验提示，无法提交成功 |
|
||
|
||
#### TC008: 名称重复校验
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| **测试目标** | 当报告厅名称已存在时，系统应提示重复并阻止保存 |
|
||
| **步骤** | 1. 新增或编辑时填写已存在的名称“测试报告厅 B” <br/>2. 点击保存 |
|
||
| **预期结果** | 弹窗提示“报告厅名称已存在”，表单不关闭 |
|
||
|
||
### 阶段四：搜索、排序与分页（5 分钟）
|
||
|
||
#### TC009: 关键字搜索
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| **步骤** | 1. 在搜索框输入“测试报告厅” <br/>2. 点击【搜索】 |
|
||
| **预期结果** | 表格仅显示名称包含“测试报告厅”的记录，分页信息更新 |
|
||
|
||
#### TC010: 分页跳转
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| **步骤** | 1. 若数据超过 10 条，点击分页到第 2 页 <br/>2. 观察页面加载 |
|
||
| **预期结果** | 正确跳转到第 2 页，数据加载正常 |
|
||
|
||
### 阶段五：图片上传专项测试（5 分钟）
|
||
|
||
#### TC011: 多张图片上传
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| **测试目标** | 验证支持一次上传多张图片并正确保存 |
|
||
| **步骤** | 1. 新增报告厅时选择 任意多张图片 <br/>2. 保存后查看图片列表 |
|
||
| **预期结果** | 所有上传图片均生成缩略图，放大预览正常 |
|
||
|
||
#### TC012: 不合法格式/大小校验
|
||
|
||
| 字段 | 说明 |
|
||
|------|------|
|
||
| **测试目标** | 上传超出大小或非图片格式文件时提示错误 |
|
||
| **步骤** | 1. 尝试上传 `test.txt` 或 >5MB 的图片 |
|
||
| **预期结果** | 显示“仅支持 jpg/png 且大小 ≤5MB”错误提示，禁止上传 |
|
||
|
||
### 阶段六：权限与安全（可选）
|
||
|
||
- TC013: 普通用户无法访问“报告厅信息”菜单
|
||
- TC014: Token 失效后访问页面应跳转登录
|
||
|
||
## ✅ 验证点汇总
|
||
|
||
- 页面元素存在性与响应速度
|
||
- CRUD 全流程成功提示与数据持久化
|
||
- 表单前端 & 后端校验一致性
|
||
- 图片上传与文件系统存储完整性
|
||
- 搜索/分页/排序交互稳定性
|
||
- 权限与安全控制
|
||
|
||
## ⏱️ 性能指标
|
||
|
||
| 指标 | 目标 |
|
||
|------|------|
|
||
| 页面首次加载 | ≤ 3 秒 |
|
||
| 新增 / 编辑请求 | ≤ 1 秒 |
|
||
| 图片上传 | ≤ 2 秒/张 |
|
||
|
||
## 📂 Playwright 代码与资源路径
|
||
|
||
- **脚本目录**: `test/hall-info/`
|
||
- **示例脚本**: `test/hall-info/hall-info-e2e.spec.js`
|
||
- **图片资源**: `test/hall-info/test-images/`
|
||
|
||
## 📝 备注
|
||
|
||
1. 以上测试用例可作为 Playwright 自动化脚本直接参考。
|
||
2. 图片上传请使用绝对路径或 `path.join(process.env.HOME, 'Downloads/报告厅照片', fileName)` 动态拼接。
|
||
3. 测试完成后，请生成执行报告并提交至 `docs/测试文档/后勤管理/报告厅信息/` 目录下，命名为 `报告厅信息界面测试执行报告-YYYY-MM-DD.md`。 |