9bff46a1b0
Sentry Integration (補強 SignOz): - Add @sentry/nextjs for frontend error tracking + session replay - Add sentry-sdk[fastapi] for backend error tracking - Create sentry.client/server/edge.config.ts - Integrate with next.config.js + instrumentation.ts - Add Sentry exception capture in FastAPI error handler - Create deployment scripts for Self-Hosted @ 192.168.0.110 CI/CD Fixes: - Fix F821 Undefined name 'Field' in incidents.py - Add NEXT_PUBLIC_API_URL env var to CI build step - Add build-arg to Docker build verification E2E Test Improvements: - Fix strict mode violations in dashboard-acceptance tests - Add timeout increase for Phase 4 demo tests - Make tests more resilient to UI variations Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
69 lines
4.7 KiB
Markdown
69 lines
4.7 KiB
Markdown
# AWOOOI 系統 QA 專業測試報告
|
||
|
||
## 1. 執行摘要 (Executive Summary)
|
||
本次 QA 測試涵蓋了 AWOOOI 專案的 `apps/web` 前端與 `apps/api` 後端之整合，重點測試頁面包含全局戰情室 (Dashboard)、Multi-Sig 授權卡片 (ApprovalCard)、以及行動日誌 (Action Log)。
|
||
我們利用 Playwright 進行了全面的自動化 E2E 測試，發現在 22 個測試案例中，有部分案例因為前端 hydration、中英文語系切換 (i18n) 以及按鈕防呆機制等問題導致失敗。
|
||
|
||
---
|
||
|
||
## 2. 測試結果總覽 (Test Results Overview)
|
||
執行 `pnpm exec playwright test` 共計 22 個測試案例。
|
||
- **通過 (Passed)**: 12
|
||
- **失敗 (Failed) / 不穩定 (Flaky)**: 10
|
||
|
||
### 2.1 主要失敗項目分析
|
||
1. **Action Log 頁面結構與導航 (action-log.spec.ts)**
|
||
- ✖️ `重新整理按鈕存在且可點擊` (Timeout 15.5s)
|
||
- ✖️ `行動日誌連結可點擊` (Timeout 15.0s)
|
||
- **問題描述**: 頁面在導航或等待 API 回應時，載入時間過長超過預設的 15 秒 timeout，或是對應元素的 locator (`button:has-text("重新整理")`) 在中文環境下找不到。
|
||
|
||
2. **Dashboard 語系切換與組件狀態 (dashboard-acceptance.spec.ts)**
|
||
- ✖️ `語系切換器功能 - 繁中轉英文` (Timeout 12.1s)
|
||
- ✖️ `主機卡片顯示真實狀態` (Timeout 11.2s)
|
||
- ✖️ `完整頁面截圖 - 雙語對照` (Timeout 15.0s)
|
||
- ✖️ `HITL 授權卡片功能驗證` (Timeout 9.8s)
|
||
- **問題描述**: 語系切換時，頁面依賴的 `next-intl` 可能沒有即時更新 DOM 或是 SSE 連線阻塞了 `domcontentloaded` 事件的觸發，導致 Playwright 等待超時。同時，某些真實的 IP `192.168.0.x` 或者長按鈕在畫面上未能及時算繪出來。
|
||
|
||
3. **RBAC 與 Timeline 展示 (rbac-screenshot.spec.ts / phase4-timeline.spec.ts)**
|
||
- ✖️ `Screenshot RBAC permission UI` (Timeout 3.6s)
|
||
- ✖️ `Phase 4: Full Action Timeline Demo Flow` (Timeout 2.2s)
|
||
- **問題描述**: 在模擬真實情境 (Demo Flow) 中，依賴於後端特定的 API 返回資料。如果後端沒有正確種子資料或是載入順序問題，將導致測試提早失敗。
|
||
|
||
---
|
||
|
||
## 3. 問題與優化建議 (Issues & Optimization Proposals)
|
||
|
||
### 3.1 前端效能與 Zustand/SSE 競爭 (Race Conditions)
|
||
- **問題**: E2E 測試中發現，多次因為載入超時導致測試失敗。日誌 (LOGBOOK) 也提到 Polling 與 SSE 在操作時會有競爭狀況，導致 UI 閃爍。
|
||
- **解決方案**:
|
||
1. 在 `approval.store.ts` 與 `agent.store.ts` 中，落實「樂觀更新 (Optimistic UI)」並在送出 Mutation 的這幾秒內「完全強制停止 polling」。
|
||
2. 加入 SSE 斷線重連的 Exponential Backoff（指數退避）機制，防止斷線瞬間大量的重連請求卡死瀏覽器線程。
|
||
|
||
### 3.2 i18n 語系切換與 Hydration 報錯
|
||
- **問題**: 繁中轉英文的測試失敗。可能是 Next.js App Router 配合 `next-intl` 在客戶端 Hydration 時，伺服器與客戶端渲染語言不一致，導致報錯或 UI 卡死。
|
||
- **解決方案**:
|
||
1. 確保 `html` 標籤的 `lang` 屬性在 Server Component 中正確取得請求的 locale。
|
||
2. 確保沒有依賴於 `window` 物件的資料在首次 render 中輸出，避免 Hydration Mismatch。
|
||
|
||
### 3.3 E2E 測試腳本穩定性 (Flakiness)
|
||
- **問題**: `action-log.spec.ts` 中過度依賴中文字串 (如 `hasText: '重新整理'`)，如果網頁預設載入英文，就會永遠找不到。且 Timeout 15s 對於包含完整依賴啟動的測試環境有點太短。
|
||
- **解決方案**:
|
||
1. 測試腳本中全面改用 `data-testid` 來定位元素（如 `[data-testid="refresh-btn"]`），而非依賴語言字串。
|
||
2. 在 `playwright.config.ts` 調高 `navigationTimeout` 為 45000ms，或者在重度依賴 API 的測試中使用 `.route` Mock 掉不穩定的網路請求（如果是純前端視覺測試的話；但依據鐵律，整合測試需真實環境，因此需確保留意本地 K3s/API 速度）。
|
||
|
||
### 3.4 錯誤處理與 Console 乾淨度
|
||
- **問題**: 仍有測試檢查 `console.error` 失敗。這通常來自於 React Key Props 未給予、或是未捕捉的 Promise Rejection。
|
||
- **解決方案**:
|
||
- 全面審查 `apps/web/src/components` 的清單渲染，補齊 `key={item.id}`。
|
||
- 在 `fetch` 呼叫外層實作全局的 Axios/Fetch Interceptor，標準化攔截 500/404，不讓錯誤直接漏出到前端 console。
|
||
|
||
---
|
||
|
||
## 4. 自動化 QA 腳本庫 (QA Scripts)
|
||
|
||
為了符合「禁止人工 QA」的鐵律，我已在此專案中補充了專業的自動化 QA 檢查腳本。詳見 `scripts/` 資料夾下的說明文件與執行檔。我們將確保每次部屬前執行這些腳本。
|
||
|
||
---
|
||
**QA 審查完成時間**: 2026-03-24
|
||
**審查人員**: AWOOOI SRE QA Expert (Agent)
|