企业官网建设流程全解析

TestHub｜基于 Django+Vue3 的 AI 驱动全栈智能测试管理平台

🔖 本文仅作为个人项目复盘分享

一、项目背景

在日常软件测试工作中，传统测试平台往往功能割裂：接口测试、Web UI 自动化、APP 自动化、测试用例管理分散在不同工具；同时需求解析、编写测试用例大量重复人工工作。 为此我独立开发TestHub 智能测试管理平台，一站式集成AI 需求分析、测试用例管理、用例评审、API 接口测试、Web‑UI 自动化、Android APP 自动化、测试数据工厂，把测试全流程统一到一套系统，降低测试人员学习成本，提升测试效率。

技术栈：

• 后端：Python3.12 + Django4.2 + DRF + MySQL8.0 + Redis + Celery
• 前端：Vue3.3 + Vite + Element‑Plus + Pinia + ECharts + Monaco Editor
• 自动化：Playwright / Selenium / Airtest / Allure 测试报告
• AI 能力：Browser‑use、Langchain，支持 DeepSeek、通义千问、硅基流动等大模型

二、平台核心模块介绍

1. AI 智能化能力（项目亮点）

AI 是本平台最大特色，将大模型深度融入测试全流程：

1. AI 需求文档解析：上传 PDF/Word/TXT 需求文档，自动提取业务需求点，一键生成测试用例，减少人工编写成本。
2. Browser‑use AI 智能 Web 自动化：不需要写脚本，输入自然语言测试任务，AI 自动解析页面 DOM，自主完成页面操作、断言，支持文本模式 / 视觉模式。
3. Dify 智能助手：内置测试领域 AI 助手，支持会话聊天，解答测试疑问。
4. 多模型统一配置：后台统一配置 API‑Key，支持 DeepSeek、通义千问、硅基流动等多种大模型，区分用例编写、用例评审、浏览器自动化不同角色模型。

2. 安全认证体系

自研企业级 JWT 双 Token 安全机制：

• AccessToken 短期有效（30min），RefreshToken 长期（7 天）；
• 前端请求拦截器自动刷新 Token，实现无感续期；
• Token 黑名单，登出直接拉黑 RefreshToken，防范重放攻击；
• 刷新 Token 期间请求队列排队，避免接口 401 报错。

3. 测试用例 + 用例评审模块

• 完整用例生命周期：创建、编辑、归档、版本管理，支持前置条件、操作步骤、预期结果、附件、评论协作；
• 完整用例评审流程：创建评审任务、分配评审人、多层级意见（整体、用例、步骤）、自定义评审模板；
• 状态流转：待评审 → 评审中 → 通过 / 拒绝，完整记录评审过程，适合团队协作。

4. API 接口测试模块

对标 Postman、Apifox 的后端接口测试能力：

• 支持 HTTP/WebSocket，GET/POST/PUT/DELETE/PATCH 全方法；
• 项目‑集合‑请求三层树形管理；
• 全局 / 局部环境变量，支持变量模板渲染；
• 测试套件批量执行，支持断言配置；
• 请求历史完整留存，支持 Cron 定时任务，执行结果通过钉钉 / 企业微信 Webhook 通知；
• 自动生成 Allure 测试报告。

5. Web UI 自动化测试

双引擎支持Playwright与Selenium：

• 元素库管理，支持 ID/XPath/CSS/text/role 等 12 种定位策略；
• POM 页面对象模型，便于脚本维护；
• 可视化脚本编排，支持录制回放；
• 多浏览器执行，自动截图、录制视频；
• 支持定时调度执行 Allure 报告输出；
• 结合 Browser‑use 实现 AI 自主执行 Web 测试任务。

6. Android APP 自动化测试（新增完成）✅

基于 Airtest 图像识别实现 Android APP 自动化整套能力：

1. 设备资源池：管理模拟器、远程 ADB 设备，设备锁定避免多用户抢占设备；
2. 元素库：图片、坐标、区域三类元素，支持多分辨率适配；
3. 组件化编排：基础组件、自定义组件包导入导出；
4. UI‑Flow JSON 流程编排，Monaco 代码编辑器编写流程；
5. 多作用域变量global/local/outputs，模板变量{{var}}；
6. Celery 异步分布式执行，实时推送执行进度，输出 Allure 报告；
7. 完整 7 套前端页面，40+RESTful 接口。

解决 Airtest 原生缺少平台化管理、多设备并发、任务调度的痛点。

7. 数据工厂模块

内置 51 个测试工具，解决测试数据构造、格式转换痛点：

• 字符工具、编码转换、随机数据生成、MD5/AES 加密解密；
• 一键生成国内真实格式：姓名、手机号、邮箱、地址；
• JSON 格式化、JSONPath 查询、JSON 对比、JSON 转 XML/YAML/CSV；
• Cron 表达式解析生成工具、二维码 / 条形码生成；
• 生成的数据可以直接在接口测试、UI 自动化中引用；
• 工具使用历史记录，标签分类管理。

8. 测试计划 & 执行报告

• 创建测试计划，关联版本、用例集合，执行手动 / 自动化测试；
• 完整执行历史，通过率统计；
• ECharts 可视化大盘；
• Allure 标准化测试报告输出。

9. 团队权限管理

多项目管理，项目内成员角色权限控制，用户个性化配置。

三、系统架构与项目目录

后端架构

Django + DRF 作为 REST 接口层；MySQL 存储业务数据；Redis 做缓存与 Celery 消息队列；APScheduler 做定时任务；Celery 处理耗时自动化任务（APP 自动化、AI 任务）。 AI 层做统一封装，隔离不同大模型的接口差异。

项目关键目录结构：

testhub_platform/ ├── apps/ # Django业务子应用 │ ├── users/ # 用户、权限 │ ├── projects/ # 项目版本管理 │ ├── testcases/ # 测试用例 │ ├── reviews/ # 用例评审 │ ├── api_testing/ # API接口测试 │ ├── ui_automation/ # Web UI自动化 │ ├── requirement_analysis/ # AI需求解析 │ ├── assistant/ # AI智能助手 │ ├── data_factory/ # 数据工厂工具集 │ ├── executions/ # 测试执行 │ ├── core/ # 全局核心，通知、管理命令 ├── frontend/ # Vue3前端工程 ├── media/ # 截图、上传附件 ├── logs/ # 调度器日志 ├── allure/ # 测试报告输出 └── manage.py

四、快速部署启动

环境依赖 Python3.12、Node.js18+、MySQL8.0、Java17（Allure 报告）、Redis（可选 APP 自动化）

后端部署

# 1.克隆代码 git clone 你的仓库地址 cd testhub_platform # 2.虚拟环境 python -m venv venv venv\Scripts\activate # 3.安装依赖 pip install -r requirements.txt # 4.复制配置文件，修改数据库、密钥 cp .env.example .env # 5.创建数据库，执行迁移 mysql -uroot -p CREATE DATABASE testhub CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; python manage.py makemigrations python manage.py migrate # 初始化基础数据 python manage.py init_locator_strategies python manage.py load_component_pack # 创建管理员账号 python manage.py createsuperuser # 启动定时调度器 python manage.py run_all_scheduled_tasks # 启动后端服务 python manage.py runserver # （可选）celery处理APP自动化任务 celery -A backend worker -l info

前端部署

cd frontend npm install npm run dev # 开发调试 npm run build # 生产打包

访问地址：

• 前端页面：http://127.0.0.1:3000
• 后端接口：http://127.0.0.1:8000
• Swagger 接口文档：http://127.0.0.1:8000/api/docs/

五、项目难点与踩坑复盘

1. JWT 双 Token 刷新并发问题：多个请求同时 401，出现重复刷新 Token。解决方案：增加请求排队队列，刷新期间请求阻塞等待新 Token，防循环调用保护。
2. Airtest 平台化改造：原生 Airtest 是脚本工具，无 Web 接口、设备管理。封装执行器，把执行状态通过数据库实时回写给前端，实现 Web 端远程运行 APP 自动化用例。
3. Browser‑use 浏览器 AI 自动化适配：对 Browser‑use 做二次封装，适配多种大模型，区分 DOM 文本模式与截图视觉模式，控制 token 消耗。
4. Celery 任务状态持久化：APP 自动化是长时间任务，解决进程异常丢失进度，数据库记录每一步执行结果。
5. 数据工厂跨模块数据引用：设计标签系统，在接口、UI 自动化组件可以直接调用工具生成的数据，做到测试数据与用例解耦。

六、总结

TestHub 完整实现了从需求解析 → 生成用例 → 用例评审 → 接口测试 / Web‑UI/APP 自动化执行 → 报告输出完整测试链路。 既可以作为学习 Django、Vue、测试开发、自动化测试的实战项目，也可以小团队内部部署使用。后续计划持续优化 AI 用例生成准确率，增加更多测试工具。