基于 FastAPI + Vue 3 深度定制的全栈自动化执行引擎设计全解

一、引言

　　在经历过无数个加班维护自动化脚本的夜晚后，我意识到现有的测试工具大都存在“厚重且割裂”的问题。于是，我尝试用 Python 的灵活性与 Vue 3 的高效响应能力打造了全栈自动化平台。

本文将摒弃虚头巴脑的功能堆砌，带大家从底层架构、动态类生成、异步任务调度三个维度深度解析平台的实现原理。

二、底层架构（解耦轮训-Decoupled Polling）

传统的测试平台常把“执行”逻辑写在 API 路由里，这会导致执行长任务时导致 Web 服务卡死。采用了完全解耦的架构设计：

架构图示

graph LR
    User[Frontend UI] -- API --> Server[FastAPI Server]
    Server -- Save Task --> DB[(SQLite/MySQL)]
    Worker[Async Worker] -- Poll Task --> DB
    Worker -- Driver --> Engine[API/UI/Perf Engines]
    Engine -- Write Report --> DB
    Engine -- Save Static --> FS[Static File System]

FastAPI：作为 API 网关，利用其原生支持 async/await 的特性，确保即使在任务高并发提交时也能保持极低的相应时延。
Async Worker：一个独立的 Python 进程，每秒轮询一次数据库任务表。它根据不同的任务类型（api, perf, ui, mobile）动态加载对应的 DynamicRunner。

三、核心黑科技（动态 TestCase类生成）

如何实现“零代码”接口回归？内部使用了 Python 的 元编程 (Metaprogramming) 技术。

当我们从数据库拉取到一条接口配置时，系统并不会去执行简单的 requests.get()，而是动态构建了一个标准的 unittest.TestCase 类：

# 核心逻辑示意 (simplified)
def create_case_class(case_data):
    def test_method(self):
        # 内部集成 session, 变量提取, 深度断言逻辑
        response = self.http_client.request(case_data.method, case_data.url, ...)
        self.assertEqual(response.status_code, case_data.expected_status)
        self.assert_json_path(response.json(), case_data.assert_expr)

    # 动态创建类
    cls_name = f"Test_{case_data.id}"
    return type(cls_name, (DynamicTestCase,), {"runTest": test_method})

这种做法的优势在于：完美兼容所有 Python 单元测试生态的插件（如 HTMLTestRunner），让报告生成变得异常简单。

四、前端工程化（Tailwind 4 + 玻璃拟态-Glassmorphism）

前端不仅仅是“Element Plus 堆砌”，我们对视觉体验有着近乎偏执的追求：

核心设计语言：采用了暗黑系玻璃拟态。背景使用 backdrop-blur-2xl，配合 mask-image 实现细腻的边缘过渡。
炫彩 Logo 环绕：通过 CSS 的 conic-gradient 与 blur 滤镜，为圆形 Logo 增加了具有呼吸感的彩色光圈，极具视觉冲击力。
性能黑盒优化：使用 Vite 的懒加载与热模块替换，确保在大数据量显示（如 1000+ 用例列表）时依然保持 60FPS 的滚动帧数。