企业官网建设流程全解析

• 人工智能
• AI 应用
• 测试
• 质量保障
• 后端
• 前端
• RAG
• AI Agent

WHartTest 是一款 AI 驱动的测试自动化平台，采用前后端分离的 Monorepo 架构，由 Django 后端、Vue 前端、Actuator 执行器、MCP 工具服务和 Skills 技能库五大组件协同工作，实现从需求文档到可执行测试用例的自动生成与执行。本文带你一次看懂它的整体架构与各组件的职责边界。

一、架构总览：五大组件各司其职

WHartTest 的仓库是一个 Monorepo，顶层目录即组件划分，一眼就能看清边界：

整体架构可以概括为：Vue 负责"看"，Django 负责"想"，MCP + Skills 负责"会"，Actuator 负责"做"。

二、Django 后端：平台的"大脑"与测试资产中心

WHartTest_Django/ 是整个平台的核心，内部按业务域拆分成十余个 Django App，每个 App 职责单一：

• 测试资产管理：testcases/（功能用例）、api_interfaces/（接口定义）、api_modules/（接口模块）
• AI 能力层：langgraph_integration/（LLM 配置、对话会话、Token 统计）、knowledge/（知识库与 RAG 检索）、prompts/（提示词模板管理）
• 执行与调度：ui_automation/（页面、元素、步骤、执行记录）、task_center/（统一任务中心与定时任务）
• AI 扩展：mcp_tools/（远程 MCP 配置管理）、orchestrator_integration/（Agent 任务编排）、skills/（技能安装与管理）

基础设施上，后端依赖 PostgreSQL 存业务数据、Redis 做 Celery 消息队列（异步执行测试任务）、Qdrant 做向量检索（支撑 RAG），三者均在 docker-compose.yml 中一键拉起。

AI 生成的用例并非落库即止，而是进入"待审核"状态，由人工审核后执行：

生成的用例按模块归档管理，每条用例包含名称、优先级、测试类型、前置条件等完整信息，支持查看、编辑与一键运行：

三、Vue 前端：测试团队的统一操作台

WHartTest_Vue/ 基于 Vue 3 + Vite 构建，源码位于 WHartTest_Vue/src/，采用views/（页面）+features/（业务模块）+services/（API 请求）的分层组织，核心能力包括：

• 首页仪表盘：用例状态、执行通过率、Token 消耗一屏总览
• 需求管理：文档上传、AI 智能评审、评分报告导出
• 用例管理：列表视图与思维导图视图双模式
• LLM 对话：基于 LangGraph 的智能对话入口，可在项目上下文中直接生成、执行用例

前端通过 REST API 与 Django 后端通信，所有 AI 操作（生成、执行、分析）都以"对话 + 工具调用"的形式呈现，大幅降低了使用门槛。

四、Actuator 执行器：驱动浏览器的"双手"

UI 自动化用例最终要有人在真实浏览器里跑，这就是 WHartTest_Actuator/ 的职责。它是一个独立的执行器服务，架构设计见 WHartTest_Actuator/README.md：

Django Backend（Consumer 分发任务） ←WebSocket→ Actuator（WebSocketClient + Executor） → Playwright（浏览器自动化）

关键机制：

• WebSocket 长连接：执行器主动连上后端，后端随时下发任务（u_test_case、u_test_case_batch、u_stop_execution等）
• 执行结果回传：步骤结果、用例结果、截图与 Trace 实时上报，失败可回放定位
• 多机扩展：执行器可独立部署在多台机器上，天然支持分布式执行

任务执行完成后，执行记录中可以看到每一步的耗时与结果：

五、MCP 工具服务：让 AI 安全地"操作平台"

WHartTest_MCP/ 提供两个 MCP（Model Context Protocol）工具服务，部署说明见 WHartTest_MCP/README.md：

价值在于：AI Agent 不需要自己"猜"怎么调接口，而是通过标准 MCP 协议调用这些工具，由后端统一鉴权（API Key）与审计。同时 docker-compose.yml 中还内置了官方playwright-mcp服务，供 Agent 直接操控浏览器。

在"系统管理"中可集中管理远程 MCP 配置，包括地址、传输方式与 HITL（人工审批）策略：

六、Skills 技能库：给 Agent 装上"专项技能"

WHartTest_Skills/ 是一组可安装、可管理的技能包，清单见 WHartTest_Skills/manifest.json，内置技能包括：

• browser-use / playwright-cli / playwright-skill：三种浏览器自动化方案，覆盖从 CDP 直控到官方 CLI 的稳定性需求
• ui-automation：UI 自动化管理工具，创建页面、元素、步骤与用例，并分析执行错误
• api-automation：接口自动化管理工具，覆盖接口模块、环境、调试与执行
• url-reader / drawio / weknora-kb / whart-test：网页解析、图表生成、知识库检索、平台资产管理

MCP 与 Skills 的分工可以这样理解：MCP 是"协议层"，解决 AI 如何安全地调用工具；Skills 是"知识层"，教 AI 在具体场景下该怎么做。两者叠加，让 Agent 具备贴近真实测试场景的执行能力。

七、五大组件如何协同：一条用例的完整旅程

把上面的组件串起来，一条测试用例从"想法"到"执行结果"的路径如下：

1. 需求输入：用户在 Vue 前端上传需求文档，Django 后端解析并联动知识库（Qdrant 向量检索）
2. AI 生成：LangGraph 编排大模型推理，结合 Prompt 模板生成结构化用例，写入 testcases
3. 对话驱动：Agent 通过 MCP 工具（WHartTest_tools）读写平台数据，加载 Skills 掌握操作规范
4. 任务下发：用户点击"运行"，后端经 WebSocket 将任务分发给 Actuator
5. 浏览器执行：Actuator 调用 Playwright 打开页面、填入数据、断言校验，回传截图与 Trace
6. 结果沉淀：执行记录、Token 消耗、失败分析统一进入任务中心与仪表盘，形成闭环

部署层面，docker-compose.yml 将 8 个服务编排到同一 Docker 网络：postgres、redis、backend（含 Celery Worker/Beat）、frontend、mcp、playwright-mcp、qdrant、weixin-plugin-host，执行一条docker compose up -d即可获得完整平台。

八、写在最后

WHartTest 的架构设计思路非常清晰：

• 后端厚重：Django 把需求、用例、接口、知识库、LLM 配置全部资产化，AI 生成的每一个用例都可追溯、可审核
• AI 能力解耦：MCP + Skills 让"会操作"与"知道怎么操作"分离，新增能力不需要改后端
• 执行弹性：Actuator 独立部署 + WebSocket 长连接，执行能力可以按需横向扩展

对于测试团队来说，这意味着一条完整的路径：需求文档 → AI 评审 → 自动生成用例 → 一键执行 → 失败自动分析，人只需要在"审核"和"确认"两个关键节点介入。

⚠️ 安全提示：Skills 模块具备较高系统执行权限，官方建议仅在内网或可信环境中部署，切勿直接暴露于公网（详见 README.md 中的安全声明）。

• 人工智能
• AI 应用
• 测试
• 质量保障
• 后端
• 前端
• RAG
• AI Agent