二十七、【测试执行篇】测试计划：前端一键触发测试 & 实时状态追踪

前言

一个完整的自动化测试流程，从测试用例的创建到报告的生成，最终都需要一个用户友好的触发机制。在后端已经实现了测试执行器和异步任务队列（Celery）的基础上，前端的执行按钮及其后续的状态跟踪至关重要。

我们将主要在测试计划列表页面 (TestPlanListView.vue) 进行修改，让用户可以直接在这里触发测试计划的执行。

准备工作

1. 前端项目就绪： test-platform/frontend 项目可以正常运行 (npm run dev)。
2. 后端 API 运行中： Django 后端服务运行，特别是以下 API 端点：
   • POST /api/testplans/{pk}/run/：触发测试计划执行（返回 test_run_id 和 celery_task_id）。
   • GET /api/testruns/{test_run_id}/：获取指定 TestRun 的状态和详情。
3. 测试计划数据： 确保你已经创建了一些测试计划和关联的测试用例，以便进行测试。
4. Axios 和 API 服务已封装。
5. Element Plus 集成完毕。

第一部分：后端 API 确认

我们需要确保后端提供足够的 API 来支持前端的轮询和状态显示。

1. 确认 TestPlanViewSet 中的 run action 返回 test_run_id：
   在《【测试执行】异步与并发》中，我们已经将 run_test_plan action 修改为返回 test_run_id 和 celery_task_id，这是前端进行轮询的关键信息。请再次确认 api/views.py 中该方法的返回结构。

   # api/views.py - TestPlanViewSet 中的 run_test_plan 方法
   # ...
           return Response({
        
               "message": "测试计划执行任务已成功提交到后台处理。",
               "test_run_id": str(test_run.id), # UUID 字符串
               "celery_task_id": task_result.id # Celery 任务自身的 ID
           }, status=http_status.HTTP_202_ACCEPTED)
   

2. 确认 TestRunViewSet 支持按 ID 获取详情：
   在《【测试报告】结果可视化》中，我们已经创建了 TestRunViewSet 和 TestRunSerializer，用于获取测试报告列表和详情。确认 /api/testruns/{id}/ 端点可以返回单个 TestRun 的完整信息，特别是其 status 字段。

   # api/views.py - TestRunViewSet
   class TestRunViewSet(viewsets.ReadOnlyModelViewSet):
       queryset = TestRun.objects.all().order_by('-create_time')
       serializer_class = TestRunSerializer # 包含 status 字段
   # ...
   

第二部分：前端实现 - 触发执行与状态轮询

我们将主要修改 TestPlanListView.vue。

1. 更新 api/testplan.ts，添加触发执行的 API 调用：
   

   // test-platform/frontend/src/api/testplan.ts
   // ... (其他导入和类型定义) ...
   import type {
         AxiosResponse } from 'axios'; // 导入 AxiosResponse
   
   // 定义触发执行 API 的响应类型
   export interface RunTestPlanResponse {
        
       message: string;
       test_run_id: string; // 后端返回的 TestRun ID
       celery_task_id: string; // 后端返回的 Celery 任务 ID
   }
   
   // 触发执行测试计划的 API
   export function runTestPlan(testPlanId