胡绍康andCopilot
cf7817bb95
UI 改进: - 设置页面内嵌显示（不再弹窗） - 临时邮箱卡片添加验证码提取按钮 - 导入账号弹窗 textarea 样式优化 - 账号头像 8 色渐变轮转 - 临时邮箱页顶栏邮箱点击复制 - 邮箱管理页自动选中默认分组 - 切换分组时重置邮件列 UI - 修复收件箱/垃圾邮件 Tab 切换（.folder-tab → .email-tab） - 修复从临时邮箱返回后账号列数据残留 - 仪表盘分组列表可点击导航 恢复: - 恢复 .github/ CI 工作流 - 恢复 tests/ 测试目录 - 恢复 docs/ 文档目录 - 恢复 CONTRIBUTING.md, SECURITY.md Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
542 lines
15 KiB
Python
542 lines
15 KiB
Python
"""
|
||
前端功能测试说明文档
|
||
|
||
由于前端测试需要在浏览器环境中运行，这里提供测试用例的详细说明和手动测试步骤。
|
||
如果需要自动化测试，可以使用 Selenium、Playwright 或 Cypress 等工具。
|
||
|
||
本文档包含：
|
||
- 全选功能测试（7 个用例）
|
||
- 复制功能测试（5 个用例）
|
||
- 轮询功能测试（6 个用例）
|
||
- 设置界面测试（3 个用例）
|
||
"""
|
||
|
||
# ==================== 全选功能测试 ====================
|
||
|
||
|
||
class FrontendSelectAllTests:
|
||
"""
|
||
全选功能测试用例集
|
||
|
||
测试前置条件：
|
||
1. 前端页面已加载
|
||
2. 已登录系统
|
||
3. 当前分组有至少 5 个邮箱
|
||
"""
|
||
|
||
def test_ft_001_select_all_accounts(self):
|
||
"""
|
||
测试用例 FT-001：全选所有邮箱
|
||
|
||
测试步骤：
|
||
1. 打开邮箱管理页面
|
||
2. 选择一个分组
|
||
3. 点击全选复选框
|
||
4. 观察所有邮箱的复选框状态
|
||
|
||
预期结果：
|
||
- 全选复选框显示为选中状态
|
||
- 所有邮箱的复选框都被选中
|
||
- 批量操作栏显示"已选 N 项"
|
||
|
||
验证方法：
|
||
```javascript
|
||
// 在浏览器控制台执行
|
||
const selectAllCheckbox = document.getElementById('selectAllAccounts');
|
||
console.log('全选框状态:', selectAllCheckbox.checked); // 应该为 true
|
||
|
||
const accountCheckboxes = document.querySelectorAll('.account-checkbox');
|
||
const allChecked = Array.from(accountCheckboxes).every(cb => cb.checked);
|
||
console.log('所有邮箱都被选中:', allChecked); // 应该为 true
|
||
|
||
const batchBar = document.getElementById('batchActionBar');
|
||
console.log('批量操作栏显示:', batchBar.style.display !== 'none'); // 应该为 true
|
||
```
|
||
"""
|
||
pass
|
||
|
||
def test_ft_002_unselect_all(self):
|
||
"""
|
||
测试用例 FT-002：取消全选
|
||
|
||
测试步骤：
|
||
1. 在全选状态下
|
||
2. 再次点击全选复选框
|
||
3. 观察所有邮箱的复选框状态
|
||
|
||
预期结果：
|
||
- 全选复选框显示为未选中状态
|
||
- 所有邮箱的复选框都被取消选中
|
||
- 批量操作栏隐藏
|
||
|
||
验证方法：
|
||
```javascript
|
||
const selectAllCheckbox = document.getElementById('selectAllAccounts');
|
||
console.log('全选框状态:', selectAllCheckbox.checked); // 应该为 false
|
||
|
||
const accountCheckboxes = document.querySelectorAll('.account-checkbox');
|
||
const noneChecked = Array.from(accountCheckboxes).every(cb => !cb.checked);
|
||
console.log('所有邮箱都未选中:', noneChecked); // 应该为 true
|
||
```
|
||
"""
|
||
pass
|
||
|
||
def test_ft_0erminate_state(self):
|
||
"""
|
||
测试用例 FT-003：半选状态
|
||
|
||
测试步骤：
|
||
1. 手动选中部分邮箱（不是全部）
|
||
2. 观察全选复选框状态
|
||
|
||
预期结果：
|
||
- 全选复选框显示为半选状态（indeterminate）
|
||
- 批量操作栏显示"已选 N 项"
|
||
|
||
验证方法：
|
||
```javascript
|
||
const selectAllCheckbox = document.getElementById('selectAllAccounts');
|
||
console.log('半选状态:', selectAllCheckbox.indeterminate); // 应该为 true
|
||
console.log('选中状态:', selectAllCheckbox.checked); // 应该为 false
|
||
```
|
||
"""
|
||
pass
|
||
|
||
def test_ft_004_batch_move_group(self):
|
||
"""
|
||
测试用例 FT-004：全选后批量移动分组
|
||
|
||
测试步骤：
|
||
1. 点击全选复选框
|
||
2. 点击批量操作栏的"移动分组"按钮
|
||
3. 选择目标分组
|
||
4. 确认移动
|
||
|
||
预期结果：
|
||
- 所有邮箱成功移动到目标分组
|
||
- 显示成功提示
|
||
- 当前分组的邮箱列表更新
|
||
"""
|
||
pass
|
||
|
||
def test_ft_005_batch_add_tags(self):
|
||
"""
|
||
测试用例 FT-005：全选后批量打标签
|
||
|
||
测试步骤：
|
||
1. 点击全选复选框
|
||
2. 点击批量操作栏的"打标签"按钮
|
||
3. 选择标签
|
||
|
||
预期结果：
|
||
- 所有邮箱成功添加标签
|
||
- 显示成功提示
|
||
- 邮箱列表显示标签
|
||
"""
|
||
pass
|
||
|
||
def test_ft_006_reset_on_group_change(self):
|
||
"""
|
||
测试用例 FT-006：切换分组重置全选状态
|
||
|
||
测试步骤：
|
||
1. 选中部分或全部邮箱
|
||
2. 切换到其他分组
|
||
3. 观察全选复选框状态
|
||
|
||
预期结果：
|
||
- 全选复选框显示为未选中状态
|
||
- 批量操作栏隐藏
|
||
|
||
验证方法：
|
||
```javascript
|
||
// 切换分组后
|
||
const selectAllCheckbox = document.getElementById('selectAllAccounts');
|
||
console.log('全选框状态:', selectAllCheckbox.checked); // 应该为 false
|
||
console.log('半选状态:', selectAllCheckbox.indeterminate); // 应该为 false
|
||
```
|
||
"""
|
||
pass
|
||
|
||
def test_ft_007_select_filtered_only(self):
|
||
"""
|
||
测试用例 FT-007：搜索后全选只影响显示的邮箱
|
||
|
||
测试步骤：
|
||
1. 在搜索框输入关键词，过滤部分邮箱
|
||
2. 点击全选复选框
|
||
3. 观察选中数量
|
||
|
||
预期结果：
|
||
- 只有当前显示的邮箱被选中
|
||
- 批量操作栏显示的数量等于显示的邮箱数量
|
||
|
||
验证方法：
|
||
```javascript
|
||
const visibleAccounts = document.querySelectorAll('.account-item:not([style*="display: none"])');
|
||
const selectedCount = selectedAccounts.size;
|
||
console.log('显示的邮箱数:', visibleAccounts.length);
|
||
console.log('选中的邮箱数:', selectedCount);
|
||
console.log('数量一致:', visibleAccounts.length === selectedCount); // 应该为 true
|
||
```
|
||
"""
|
||
pass
|
||
|
||
|
||
# ==================== 复制功能测试 ====================
|
||
|
||
|
||
class FrontendCopyTests:
|
||
"""
|
||
复制功能测试用例集
|
||
|
||
测试前置条件：
|
||
1. 前端页面已加载
|
||
2. 已登录系统
|
||
3. 测试邮箱有邮件数据
|
||
"""
|
||
|
||
def test_ft_008_copy_verification_success(self):
|
||
"""
|
||
测试用例 FT-008：复制验证码成功
|
||
|
||
测试步骤：
|
||
1. 找到测试邮箱
|
||
2. 点击复制按钮
|
||
3. 等待加载完成
|
||
4. 粘贴到文本框验证
|
||
|
||
预期结果：
|
||
- 显示"已复制"通知
|
||
- 复制按钮显示绿色对勾（1秒后恢复）
|
||
- 粘贴的内容包含验证码
|
||
|
||
验证方法：
|
||
1. 点击复制按钮
|
||
2. 在任意文本框按 Ctrl+V 粘贴
|
||
3. 检查粘贴的内容是否包含验证码
|
||
"""
|
||
pass
|
||
|
||
def test_ft_009_copy_code_and_links(self):
|
||
"""
|
||
测试用例 FT-009：复制验证码和链接
|
||
|
||
测试步骤：
|
||
1. 找到测试邮箱（邮件同时包含验证码和链接）
|
||
2. 点击复制按钮
|
||
3. 等待加载完成
|
||
4. 粘贴到文本框验证
|
||
|
||
预期结果：
|
||
- 显示"已复制"通知
|
||
- 粘贴的内容格式为"验证码 链接1 链接2"（空格分隔）
|
||
|
||
验证方法：
|
||
```javascript
|
||
// 粘贴后检查格式
|
||
const pastedText = "999888 https://example.com/activate";
|
||
const parts = pastedText.split(' ');
|
||
console.log('验证码:', parts[0]); // 999888
|
||
console.log('链接:', parts.slice(1)); // ["https://example.com/activate"]
|
||
```
|
||
"""
|
||
pass
|
||
|
||
def test_ft_010_not_found_verification(self):
|
||
"""
|
||
测试用例 FT-010：未找到验证信息
|
||
|
||
测试步骤：
|
||
1. 找到测试邮箱（邮件不包含验证码和链接）
|
||
2. 点击复制按钮
|
||
3. 等待加载完成
|
||
|
||
预期结果：
|
||
- 显示"未找到验证信息"提示
|
||
- 复制按钮恢复正常状态
|
||
"""
|
||
pass
|
||
|
||
def test_ft_011_auto_fetch_emails(self):
|
||
"""
|
||
测试用例 FT-011：邮箱无数据取
|
||
|
||
测试步骤：
|
||
1. 找到未获取过邮件的测试邮箱
|
||
2. 点击复制按钮
|
||
3. 观察页面行为
|
||
|
||
预期结果：
|
||
- 显示"正在获取邮件..."提示
|
||
- 自动调用获取邮件接口
|
||
- 获取成功后自动复制验证信息
|
||
|
||
验证方法：
|
||
打开浏览器开发者工具 Network 标签，观察是否有：
|
||
1. GET /api/emails/<email> 请求
|
||
2. GET /api/emails/<email>/extract-verification 请求
|
||
"""
|
||
pass
|
||
|
||
def test_ft_012_button_loading_state(self):
|
||
"""
|
||
测试用例 FT-012：复制按钮加载状态
|
||
|
||
测试步骤：
|
||
1. 点击复制按钮
|
||
2. 观察按钮状态变化
|
||
|
||
预期结果：
|
||
- 按钮立即变为禁用状态
|
||
- 显示加载动画
|
||
- 加载完成后恢复正常状态
|
||
|
||
验证方法：
|
||
```javascript
|
||
const btn = document.querySelector('.copy-verification-btn');
|
||
console.log('按钮禁用:', btn.disabled); // 加载时应该为 true
|
||
console.log('加载样式:', btn.classList.contains('loading')); // 加载时应该为 true
|
||
```
|
||
"""
|
||
pass
|
||
|
||
|
||
# ==================== 轮询功能测试 ====================
|
||
|
||
|
||
class FrontendPollingTests:
|
||
"""
|
||
轮询功能测试用例集
|
||
|
||
测试前置条件：
|
||
1. 前端页面已加载
|
||
2. 已登录系统
|
||
3. 在设置中启用了自动轮询
|
||
"""
|
||
|
||
def test_ft_013_auto_start_polling(self):
|
||
"""
|
||
测试用例 FT-013：启用轮询后自动开始
|
||
|
||
测试步骤：
|
||
1. 打开设置，启用自动轮询
|
||
2. 设置轮询间隔为 10 秒，次数为 3 次
|
||
3. 保存设置
|
||
4. 选中一个邮箱
|
||
5. 等待观察
|
||
|
||
预期结果：
|
||
- 每 10 秒自动获取一次邮件
|
||
- 总共轮询 3 次后自动停止
|
||
- 控制台输出轮询日志
|
||
|
||
验证方法：
|
||
打开浏览器控制台，观察日志输出：
|
||
```
|
||
开始轮询邮箱: test@example.com, 间隔: 10000ms, 次数: 3
|
||
轮询第 1/3 次
|
||
轮询第 2/3 次
|
||
轮询第 3/3 次
|
||
轮询已完成
|
||
```
|
||
"""
|
||
pass
|
||
|
||
def test_ft_014_new_email_notification(self):
|
||
"""
|
||
测试用例 FT-014：检测到新邮件显示通知
|
||
|
||
测试步骤：
|
||
1. 在轮询过程中，向测试邮箱发送新邮件
|
||
2. 等待下一次轮询
|
||
3. 观察页面通知
|
||
|
||
预期结果：
|
||
- 右上角显示通知："邮箱地址 收到新邮件：邮件主题"
|
||
- 通知 5 秒后自动消失
|
||
- 邮箱列表显示红点提示
|
||
"""
|
||
pass
|
||
|
||
def test_ft_015_new_email_badge(self):
|
||
"""
|
||
测试用例 FT-015：邮箱列表红点提示
|
||
|
||
测试步骤：
|
||
1. 观察有新邮件的邮箱
|
||
2. 点击该邮箱查看邮件
|
||
3. 观察红点状态
|
||
|
||
预期结果：
|
||
- 邮箱名称旁边显示红色圆点
|
||
- 点击邮箱后红点消失
|
||
|
||
验证方法：
|
||
```javascript
|
||
const badge = document.querySelector('.new-email-badge');
|
||
console.log('红点存在:', badge !== null); // 应该为 true
|
||
|
||
// 点击邮箱后
|
||
console.log('红点消失:', document.querySelector('.new-email-badge') === null); // 应该为 true
|
||
```
|
||
"""
|
||
pass
|
||
|
||
def test_ft_016_stop_on_account_change(self):
|
||
"""
|
||
测试用例 FT-016：切换邮箱停止轮询
|
||
|
||
测试步骤：
|
||
1. 在轮询过程中
|
||
2. 切换到其他邮箱
|
||
3. 观察控制台日志
|
||
|
||
预期结果：
|
||
- 当前轮询立即停止
|
||
- 控制台输出"停止轮询"日志
|
||
- 开始轮询新选中的邮箱
|
||
"""
|
||
pass
|
||
|
||
def test_ft_017_stop_on_error(self):
|
||
"""
|
||
测试用例 FT-017：轮询失败自动停止
|
||
|
||
测试步骤：
|
||
1. 在轮询过程中
|
||
2. 模拟网络错误（断开网络或使用开发者工具模拟）
|
||
3. 观察页面行为
|
||
|
||
预期结果：
|
||
- 轮询立即停止
|
||
- 显示错误提示："轮询失败，已自动停止"
|
||
- 控制台输出错误日志
|
||
"""
|
||
pass
|
||
|
||
def test_ft_018_close_notification(self):
|
||
"""
|
||
测试用例 FT-018：通知点击关闭
|
||
|
||
测试步骤：
|
||
1. 等待新邮件通知显示
|
||
2. 点击通知的关闭按钮（×）
|
||
|
||
预期结果：
|
||
- 通知立即消失
|
||
"""
|
||
pass
|
||
|
||
|
||
# ==================== 设置界面测试 ====================
|
||
|
||
|
||
class FrontendSettingsTests:
|
||
"""
|
||
设置界面测试用例集
|
||
|
||
测试前置条件：
|
||
1. 前端页面已加载
|
||
2. 已登录系统
|
||
"""
|
||
|
||
def test_ft_019_load_polling_settings(self):
|
||
"""
|
||
测试用例 FT-019：加载轮询配置
|
||
|
||
测试步骤：
|
||
1. 打开设置页面
|
||
2. 观察轮询配置项
|
||
|
||
预期结果：
|
||
- 显示当前的轮询开关状态
|
||
- 显示当前的轮询间隔
|
||
- 显示当前的轮询次数
|
||
|
||
验证方法：
|
||
```javascript
|
||
const enableCheckbox = document.getElementById('enableAutoPolling');
|
||
const intervalInput = document.getElementById('pollingInterval');
|
||
const countInput = document.getElementById('pollingCount');
|
||
|
||
console.log('轮询开关:', enableCheckbox.checked);
|
||
console.log('轮询间隔:', intervalInput.value);
|
||
console.log('轮询次数:', countInput.value);
|
||
```
|
||
"""
|
||
pass
|
||
|
||
def test_ft_020_save_polling_settings(self):
|
||
"""
|
||
测试用例 FT-020：保存轮询配置
|
||
|
||
测试步骤：
|
||
1. 修改轮询配置
|
||
2. 点击保存按钮
|
||
3. 观察提示信息
|
||
|
||
预期结果：
|
||
- 显示"设置已保存，下次选中邮箱时生效"提示
|
||
- 刷新页面后配置保持
|
||
"""
|
||
pass
|
||
|
||
def test_ft_021_interval_input_validation(self):
|
||
"""
|
||
测试用例 FT-021：轮询间隔输入验证
|
||
|
||
测试步骤：
|
||
1. 尝试输入小于 5 的值
|
||
2. 尝试输入大于 300 的值
|
||
3. 点击保存
|
||
|
||
预期结果：
|
||
- 输入框显示验证错误
|
||
- 或保存时显示错误提示
|
||
|
||
验证方法：
|
||
```javascript
|
||
const intervalInput = document.getElementById('pollingInterval');
|
||
intervalInput.value = 3;
|
||
// 触发验证
|
||
intervalInput.dispatchEvent(new Event('change'));
|
||
|
||
// 检查验证状态
|
||
console.log('验证失败:', intervalInput.validity.valid === false);
|
||
```
|
||
"""
|
||
pass
|
||
|
||
|
||
# ==================== 测试执行说明 ====================
|
||
|
||
"""
|
||
前端测试执行说明：
|
||
|
||
1. 手动测试：
|
||
- 按照每个测试用例的步骤逐一执行
|
||
- 记录实际结果
|
||
- 对比预期结果，判断是否通过
|
||
|
||
2. 自动化测试（可选）：
|
||
- 使用 Selenium WebDriver
|
||
- 使用 Playwright
|
||
- 使用 Cypress
|
||
|
||
3. 测试数据准备：
|
||
- 创建测试邮箱账号
|
||
- 准备测试邮件（包含不同格式的验证码）
|
||
- 创建测试分组和标签
|
||
|
||
4. 测试环境：
|
||
- Chrome 最新版（推荐）
|
||
- Firefox 最新版
|
||
- Edge 最新版
|
||
|
||
5. 测试报告：
|
||
- 记录每个测试用例的执行结果
|
||
- 截图保存关键步骤
|
||
- 记录发现的问题
|
||
"""
|