378 lines
8.6 KiB
Markdown
378 lines
8.6 KiB
Markdown
# DDNS 双模式功能测试指南
|
||
|
||
## 🎯 测试目标
|
||
|
||
验证 DDNS 双模式架构的前端实现是否正确，包括：
|
||
1. Tab 4 重命名为"增强"
|
||
2. DDNS 表单支持两种模式切换
|
||
3. 增强页服务卡片显示正确
|
||
4. 表单验证逻辑区分模式
|
||
|
||
---
|
||
|
||
## 📋 前置准备
|
||
|
||
### 1. 启动服务
|
||
```bash
|
||
cd e:\Project\MeshRay
|
||
.\meshray.exe
|
||
```
|
||
|
||
### 2. 访问页面
|
||
- URL: http://localhost:9531
|
||
- 默认账号：admin / admin123
|
||
|
||
### 3. 打开浏览器开发者工具（F12）
|
||
- Console 标签 - 查看是否有 JavaScript 错误
|
||
- Network 标签 - 查看 API 请求
|
||
|
||
---
|
||
|
||
## ✅ 测试用例
|
||
|
||
### 测试 1：验证 Tab 名称修改
|
||
|
||
**步骤**：
|
||
1. 登录系统
|
||
2. 点击左侧菜单"服务管理"
|
||
3. 查看顶部的 Tab 标签
|
||
|
||
**预期结果**：
|
||
- ✅ Tab 1: "TUN" 🔌
|
||
- ✅ Tab 2: "TURN" 🔗
|
||
- ✅ Tab 3: "DDNS" 🌐
|
||
- ✅ Tab 4: "增强" 🚀 ← **重点验证**
|
||
|
||
**截图位置**：
|
||
```
|
||
[在此处粘贴 Tab 栏截图]
|
||
```
|
||
|
||
---
|
||
|
||
### 测试 2：验证 Tab 3 "DDNS"说明文案
|
||
|
||
**步骤**：
|
||
1. 点击 Tab 3 "DDNS"
|
||
2. 查看顶部的信息卡片
|
||
|
||
**预期结果**：
|
||
- ✅ 标题：**DDNS 配置（基础设施）**
|
||
- ✅ 描述：配置 DNS 服务商对接信息，用于组网同步、内网穿透等场景
|
||
- ✅ 列表项：
|
||
- 支持阿里云、腾讯云、Cloudflare
|
||
- 配置后可在组网创建时直接选用
|
||
- 也可在「增强」页创建完整的 DDNS 服务
|
||
|
||
**实际结果**：
|
||
```
|
||
[记录实际显示的文案]
|
||
```
|
||
|
||
---
|
||
|
||
### 测试 3：测试 DDNS 基础设施配置模式
|
||
|
||
**步骤**：
|
||
1. 在 Tab 3 点击"添加 DDNS"按钮
|
||
2. 查看弹出的对话框
|
||
|
||
**预期结果**：
|
||
- ✅ 对话框标题："添加 DDNS"
|
||
- ✅ 表单包含"配置模式"单选框
|
||
- ✅ 默认选中"🏗️ 基础设施配置"
|
||
- ✅ 选择基础设施模式后，显示：
|
||
- DNS 服务商下拉框
|
||
- 根域名输入框
|
||
- 根据服务商显示不同的认证字段（Cloudflare API Token、阿里云 AccessKey 等）
|
||
|
||
**验证表单字段**：
|
||
| 字段 | 是否显示 | 备注 |
|
||
|------|---------|------|
|
||
| 服务名称 | ✅ | 通用字段 |
|
||
| 服务类型 | ✅ | 固定为 DDNS |
|
||
| 配置模式 | ✅ | 单选框 |
|
||
| DNS 服务商 | ✅ | 基础设施模式特有 |
|
||
| 根域名 | ✅ | 基础设施模式特有 |
|
||
| API Token/AccessKey | ✅ | 根据服务商显示 |
|
||
| 主机记录 | ❌ | 全功能模式才有 |
|
||
| 目标 IP | ❌ | 全功能模式才有 |
|
||
|
||
**截图位置**：
|
||
```
|
||
[在此处粘贴表单截图]
|
||
```
|
||
|
||
---
|
||
|
||
### 测试 4：测试 DDNS 全功能服务模式
|
||
|
||
**步骤**：
|
||
1. 在 DDNS 添加对话框中
|
||
2. 切换配置模式为"🚀 全功能 DDNS 服务"
|
||
|
||
**预期结果**：
|
||
- ✅ 显示"选择 DDNS 配置"下拉框（从已配置的 DDNS 服务中选择）
|
||
- ✅ 显示"记录类型"下拉框（A/AAAA/TXT/CNAME）
|
||
- ✅ 选择 A/AAAA 记录时，显示：
|
||
- 主机记录输入框
|
||
- 目标 IP 输入框
|
||
- 检测端口输入框
|
||
- ✅ 选择 TXT 记录时，显示：
|
||
- TXT 记录名称输入框
|
||
- TXT 记录值输入框
|
||
- ✅ 选择 CNAME 记录时，显示：
|
||
- 目标域名输入框
|
||
- ✅ TTL 设置下拉框
|
||
|
||
**验证表单字段**：
|
||
| 字段 | 是否显示 | 备注 |
|
||
|------|---------|------|
|
||
| 选择 DDNS 配置 | ✅ | 级联选择 |
|
||
| 记录类型 | ✅ | A/AAAA/TXT/CNAME |
|
||
| 主机记录 | ✅ | A/AAAA 模式显示 |
|
||
| 目标 IP | ✅ | A/AAAA 模式显示 |
|
||
| 检测端口 | ✅ | A/AAAA 模式显示 |
|
||
| TXT 记录名称 | ✅ | TXT 模式显示 |
|
||
| TXT 记录值 | ✅ | TXT 模式显示 |
|
||
| 目标域名 | ✅ | CNAME 模式显示 |
|
||
| TTL | ✅ | 通用 |
|
||
|
||
**测试不同记录类型的切换**：
|
||
1. 选择 A 记录 → 验证显示主机记录、IPv4 目标 IP
|
||
2. 选择 AAAA 记录 → 验证显示主机记录、IPv6 目标 IP
|
||
3. 选择 TXT 记录 → 验证显示 TXT 记录名称和值
|
||
4. 选择 CNAME 记录 → 验证显示目标域名
|
||
|
||
**截图位置**：
|
||
```
|
||
[在此处粘贴全功能模式表单截图]
|
||
```
|
||
|
||
---
|
||
|
||
### 测试 5：验证表单验证规则
|
||
|
||
**测试场景 A：基础设施模式**
|
||
1. 切换到基础设施模式
|
||
2. 不填写任何字段，点击提交
|
||
|
||
**预期验证错误**：
|
||
- ✅ "请输入服务名称"
|
||
- ✅ "请选择 DNS 服务商"
|
||
- ✅ "请输入域名"
|
||
|
||
**测试场景 B：全功能模式 - A 记录**
|
||
1. 切换到全功能模式
|
||
2. 选择 A 记录类型
|
||
3. 不填写字段，点击提交
|
||
|
||
**预期验证错误**：
|
||
- ✅ "请输入服务名称"
|
||
- ✅ "请选择 DDNS 配置"
|
||
- ✅ "请选择记录类型"
|
||
- ✅ "请输入主机记录"
|
||
- ✅ "请输入目标 IP"
|
||
- ✅ "请输入检测端口"
|
||
|
||
**测试场景 C：全功能模式 - TXT 记录**
|
||
1. 切换到全功能模式
|
||
2. 选择 TXT 记录类型
|
||
3. 填写 TXT 记录名称为"test_invalid!@#"
|
||
|
||
**预期验证错误**：
|
||
- ✅ "只能包含字母、数字、点、下划线和连字符"
|
||
|
||
**记录实际测试结果**：
|
||
```
|
||
[记录每个场景的实际验证结果]
|
||
```
|
||
|
||
---
|
||
|
||
### 测试 6：验证增强页服务卡片
|
||
|
||
**步骤**：
|
||
1. 切换到 Tab 4 "增强"
|
||
2. 查看页面内容
|
||
|
||
**预期结果**：
|
||
- ✅ 顶部信息卡片：
|
||
- 标题："增强服务"
|
||
- 图标：🚀
|
||
- 描述：基于已配置的基础设施，创建完整的业务服务
|
||
- 列表项：DDNS 内网穿透、自定义服务
|
||
|
||
- ✅ 服务卡片网格显示：
|
||
- 卡片 1: "DDNS 内网穿透" 🌐
|
||
- 描述：基于 DDNS 配置创建 A/AAAA 记录，实现内网穿透
|
||
- 标签：内网穿透、DDNS
|
||
- 卡片 2: "自定义服务" 🔧
|
||
- 描述：未来扩展更多能力
|
||
- 标签：自定义、灵活配置
|
||
|
||
- ✅ 鼠标悬停效果：
|
||
- 卡片上浮（translateY）
|
||
- 边框变蓝色
|
||
- 阴影加深
|
||
- "立即创建"按钮变蓝
|
||
|
||
**截图位置**：
|
||
```
|
||
[在此处粘贴增强页截图]
|
||
```
|
||
|
||
---
|
||
|
||
### 测试 7：测试点击增强服务卡片
|
||
|
||
**步骤**：
|
||
1. 点击"DDNS 内网穿透"卡片
|
||
2. 观察弹出的对话框
|
||
|
||
**预期结果**：
|
||
- ✅ 对话框标题："添加 DDNS"
|
||
- ✅ 服务名称自动填充："DDNS 内网穿透"
|
||
- ✅ 服务类型：DDNS
|
||
- ✅ 配置模式：全功能 DDNS 服务（默认选中）
|
||
- ✅ 记录类型：A（默认）
|
||
- ✅ 其他字段为空，等待用户填写
|
||
|
||
**点击"自定义服务"卡片**：
|
||
- ✅ 对话框标题："添加 TURN"或"添加 STUN"（取决于服务类型）
|
||
- ✅ 配置模式：基础设施配置（默认）
|
||
|
||
**记录实际结果**：
|
||
```
|
||
[记录点击卡片的实际行为]
|
||
```
|
||
|
||
---
|
||
|
||
### 测试 8：检查浏览器控制台
|
||
|
||
**步骤**：
|
||
1. 按 F12 打开开发者工具
|
||
2. 切换到 Console 标签
|
||
3. 执行上述所有测试操作
|
||
4. 查看是否有红色错误信息
|
||
|
||
**预期结果**：
|
||
- ✅ 无 JavaScript 运行时错误
|
||
- ✅ 无 Vue 警告
|
||
- ✅ 无组件未定义错误
|
||
|
||
**如果看到错误，记录详细信息**：
|
||
```
|
||
错误信息：
|
||
发生时的操作：
|
||
堆栈跟踪：
|
||
```
|
||
|
||
---
|
||
|
||
### 测试 9：检查 Network 请求
|
||
|
||
**步骤**：
|
||
1. 开发者工具 → Network 标签
|
||
2. 清空之前的请求记录
|
||
3. 点击"添加 DDNS" → 提交表单
|
||
4. 查看发送的 API 请求
|
||
|
||
**预期结果**：
|
||
- ✅ 请求 URL: `/api/v1/services`
|
||
- ✅ 请求方法：POST
|
||
- ✅ 请求体包含正确的字段结构：
|
||
```json
|
||
{
|
||
"name": "测试 DDNS",
|
||
"type": "DDNS",
|
||
"config_mode": "infrastructure",
|
||
"provider": "cloudflare",
|
||
"domain": "example.com",
|
||
"api_token": "***",
|
||
"enabled": true,
|
||
"timeout": 10
|
||
}
|
||
```
|
||
|
||
**对于全功能模式**：
|
||
```json
|
||
{
|
||
"name": "NAS 内网穿透",
|
||
"type": "DDNS",
|
||
"config_mode": "fullservice",
|
||
"ddns_config_id": "xxx-xxx-xxx",
|
||
"record_type": "AAAA",
|
||
"subdomain": "nas",
|
||
"target_ip": "::ffff:192.168.1.100",
|
||
"port": 80,
|
||
"ttl": 600
|
||
}
|
||
```
|
||
|
||
**记录实际请求**：
|
||
```
|
||
[粘贴请求详情]
|
||
```
|
||
|
||
---
|
||
|
||
## 🐛 问题记录表
|
||
|
||
如果在测试中发现任何问题，请在此记录：
|
||
|
||
| 编号 | 问题描述 | 复现步骤 | 严重程度 | 截图 |
|
||
|------|---------|---------|---------|------|
|
||
| 1 | | | 高/中/低 | |
|
||
| 2 | | | 高/中/低 | |
|
||
|
||
---
|
||
|
||
## 📊 测试总结
|
||
|
||
### 通过的测试项
|
||
- [ ] Tab 名称修改
|
||
- [ ] Tab 3 文案更新
|
||
- [ ] 基础设施配置模式
|
||
- [ ] 全功能服务模式
|
||
- [ ] 表单验证规则
|
||
- [ ] 增强页服务卡片
|
||
- [ ] 点击卡片行为
|
||
- [ ] 无控制台错误
|
||
- [ ] API 请求正确
|
||
|
||
### 整体评价
|
||
```
|
||
[对 DDNS 双模式功能的主观评价]
|
||
例如：
|
||
- UI 设计清晰直观
|
||
- 两种模式切换流畅
|
||
- 表单验证逻辑完善
|
||
- 用户体验良好
|
||
```
|
||
|
||
### 改进建议
|
||
```
|
||
[提出任何改进建议]
|
||
例如：
|
||
1. 可以添加更多预设的 DDNS 服务商
|
||
2. 全功能模式下可以提供快速配置向导
|
||
3. ...
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 下一步行动
|
||
|
||
根据测试结果：
|
||
1. 如果所有测试通过 → 开始后端集成开发
|
||
2. 如果有问题 → 修复后重新测试
|
||
3. 如果有优化建议 → 评估后决定是否实施
|
||
|
||
---
|
||
|
||
**测试日期**：2026-03-20
|
||
**测试人员**：_____________
|
||
**测试状态**：⏳ 进行中 / ✅ 已完成 / ❌ 阻塞
|