QA
建立視覺迴歸測試
針對關鍵介面狀態的穩定截圖檢查，能抓到有意義的視覺變化，又不過度吵雜。
流程
照這個順序做。
- 選擇關鍵頁面與元件狀態，含回應式中斷點、錯誤、空白狀態與互動狀態。
- 固定瀏覽器、視窗、字型、地區、時間、動畫行為、資料與網路依賴，讓渲染環境可判定。
- 用穩定定位器實作截圖斷言，並遮罩或替換真正動態區域。
- 在與後續比對相同的環境產生基準，並人工審查每張基準圖。
- 反覆比對以找出不穩定像素；調整就緒等待或狹窄且有理由的容差，而不是隱藏大片區域。
- 把套件與圖像成品加入 CI，定義明確的基準更新審查流程，並測試刻意視覺變更會被抓到。
先準備
貓會向你要的輸入。
- 可執行介面與關鍵狀態
- 支援的瀏覽器與視窗矩陣
- CI 環境
- 基準儲存政策
路由器 + 一份 playbook
先路由。只選一份。
Cat Paw 每次任務只載入一份 playbook，不合併多份。先走這個路由器；其餘路徑是此 workflow 可檢查的候選。
- 路由器：
engineering-pack skills/engineering/alirezarezvani/senior-qa/SKILL.mdskills/product/pm-execution/test-scenarios/SKILL.md
界線
界線跟著提示一起走。
- 未經人工審查，絕不自動核准變更後的基準。
- 讓閾值與遮罩保持狹窄且已記錄。
- 截圖排除密鑰與個人資料。
完成代表
一個可核對的終點。
關鍵狀態有已審查基準，重複執行在 CI 穩定，受控視覺突變會造成預期測試失敗與差異成品。
來源
這個流程從哪來。
- playwright.dev/docs/test-snapshots
- learn.microsoft.com/en-us/azure/app-testing/playwright-workspaces/how-to-configure-visual-comparisons
來源確立 workflow 的模式。若有 Reddit 或社群貼文，視為實務軼事，不是普遍事實。
