🧪 API 测试模块使用指南

📋 功能概述

API 测试模块是一个集成的接口测试工具，可以自动测试所有后端 API 接口，并提供详细的测试结果报告。

🚀 快速开始

访问测试页面

打开浏览器访问：http://localhost:3001/api-test

或点击导航栏的 🧪 API测试 按钮

📦 测试覆盖范围

1. 认证接口测试

✅ 管理员登录
✅ 用户注册

2. 商品接口测试

✅ 获取所有商品
✅ 获取限制数量商品
✅ 获取单个商品详情
✅ 创建商品（管理员权限）
✅ 更新商品（管理员权限）
✅ 删除商品（管理员权限）

📊 测试数据集

管理员账户

{
  "email": "admin@example.com",
  "password": "admin123"
}

测试用户

{
  "name": "测试用户",
  "email": "test@example.com",
  "password": "test123"
}

测试商品

{
  "name": "测试商品",
  "description": "这是一个测试商品",
  "price": 999,
  "image": "https://via.placeholder.com/300",
  "category": "测试分类",
  "stock": 10
}

🎯 使用步骤

步骤 1: 访问测试页面

打开 http://localhost:3001/api-test

步骤 2: 查看测试数据集

页面上方显示所有测试用到的数据

步骤 3: 运行测试

点击 🚀 运行所有测试 按钮

步骤 4: 查看结果

实时查看每个测试的状态
查看响应时间
查看响应数据
查看错误信息（如果有）

步骤 5: 查看测试摘要

页面底部显示：

总测试数
成功数量
失败数量
平均响应时间

🔍 测试结果说明

状态标识

✅ 成功：API 正常工作
❌ 失败：API 返回错误
⏳ 测试中：正在执行测试

结果详情

每个测试结果包含：

测试名称：测试的功能描述
HTTP 方法：GET/POST/PUT/DELETE
端点：API 路径
状态码：HTTP 响应状态码
响应时间：API 响应耗时（毫秒）
响应数据：点击"查看响应数据"展开详情
错误信息：如果失败，显示错误原因

📈 测试流程

测试按以下顺序自动执行：

管理员登录 → 获取 token
用户注册 → 创建测试用户
获取所有商品 → 获取商品列表并保存第一个商品ID
获取限制数量商品 → 测试查询参数
获取单个商品 → 使用步骤3获取的ID
创建商品 → 使用管理员token创建新商品
更新商品 → 使用步骤6创建的商品ID
删除商品 → 删除步骤6创建的商品

⚡ 特性

自动化测试

自动获取管理员 token
自动获取商品 ID
串联测试流程

实时反馈

测试进度实时显示
动画效果标识测试中状态
结果即时展示

详细报告

每个接口的完整信息
响应数据可展开查看
错误详情清晰显示

统计分析

成功/失败统计
平均响应时间
可视化卡片展示

🛠️ 测试场景

场景 1: 验证所有接口正常

运行全部测试，确保所有接口返回 ✅

场景 2: 测试权限控制

创建/更新/删除商品需要管理员权限
观察未授权情况下的错误

场景 3: 性能测试

查看平均响应时间
识别慢速接口

场景 4: 调试问题

当接口出错时，查看详细错误信息
检查请求参数和响应数据

🔧 自定义测试

如需添加更多测试用例，编辑文件： frontend/src/pages/ApiTest.tsx

在 testCases 数组中添加：

{
  name: '测试名称',
  method: 'GET/POST/PUT/DELETE',
  endpoint: '/api/xxx',
  data: { /* 请求数据 */ },
  requiresAuth: true/false
}

❓ 常见问题

Q: 所有测试都失败

A: 检查后端服务是否运行在 5000 端口

Q: 管理员相关测试失败

A: 确保管理员登录成功，检查账号密码

Q: 创建商品失败

A: 检查是否有管理员权限，查看错误详情

Q: 响应时间过长

A: 检查网络连接和数据库性能

📝 测试报告示例

测试摘要
━━━━━━━━━━━━━━━━━━━━━━━━
总测试数: 8
成功: 8
失败: 0
平均响应时间: 125ms
━━━━━━━━━━━━━━━━━━━━━━━━

✅ 1. 管理员登录 (POST /api/auth/login) - 150ms
✅ 2. 用户注册 (POST /api/auth/register) - 180ms
✅ 3. 获取所有商品 (GET /api/products) - 95ms
✅ 4. 获取限制数量商品 (GET /api/products?limit=3) - 88ms
✅ 5. 获取单个商品 (GET /api/products/:id) - 76ms
✅ 6. 创建商品 (POST /api/products) - 120ms
✅ 7. 更新商品 (PUT /api/products/:id) - 110ms
✅ 8. 删除商品 (DELETE /api/products/:id) - 105ms

🎨 界面特点

🌈 渐变色背景
📊 卡片式布局
🎭 动画效果
📱 响应式设计
🎯 直观的状态标识

🔗 相关文档

💡 提示

首次运行可能需要几秒钟
测试会自动清理创建的测试数据
可以多次运行测试
建议在开发过程中经常运行测试验证接口

享受测试！🚀

FilesExpand file tree

API_TEST_GUIDE.md

Latest commit

History