前言

一個完整的自動化測試流程，從測試用例的創建到報告的生成，最終都需要一個用戶友好的觸發機制。在后端已經實現了測試執行器和異步任務隊列（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 IDcelery_task_id: string; // 后端返回的 Celery 任務 ID
   }// 觸發執行測試計劃的 API
   export function runTestPlan(testPlanId