browser-smokelisted

# Browser Smoke Verification 此 Skill 用於完成前端或 Web UI 變更後的低成本瀏覽器驗證。它不是完整 E2E 測試框架，不負責新增可重跑的測試案例；若使用者要求建立正式測試，改依專案既有 Playwright、Cypress、Vitest 或其他測試架構處理。 ## 啟動條件 符合任一條件時套用： - 使用者明確要求「用瀏覽器驗證」、「打開頁面檢查」、「看 console error」、「確認畫面是否正常」。 - 本次修改影響 Web UI、路由、表單、互動、樣式、響應式版面或前端狀態管理。 - SDD、一般直接修改或 Debug 完成前端變更後，需要快速確認主要畫面可用。 以下情境不強制套用： - 只修改後端純邏輯、文件、CLI、資料庫 migration 或非 UI 設定。 - 專案已有明確的 CI E2E 測試，且本輪只需執行該測試。 ## 驗證流程 1. **確認驗證目標**： - 若使用者提供 URL 或頁面路徑，直接使用該目標。 - 若未提供，從本次 diff、路由設定或 README 找出受影響頁面。 - 若無法判斷入口頁，回報需要使用者提供 URL 或啟動方式。 2. **啟動或沿用本機服務**： - 優先沿用已執行的 dev server。 - 若需啟動服務，使用專案既有 script，例如 `npm run dev`、`pnpm dev`、`yarn dev`、`dotnet run`。 - 不新增套件、不改 `.env`，也不讀取 `.env` 內容。若缺少帳號、測試資料或外部服務，明確回報阻塞條件。 3. **使用瀏覽器檢查頁面**： - 優先使用當前環境提供的 Browser / browser-use / in-app browser 工具。 - 若無 Browser 工具，但專案已有 Playwright 或 Cypress 指令，可執行既有 smoke / e2e 測試。 - 若兩者皆不可用，回報無法完成瀏覽器驗證，改提供可手動確認的步驟。 4. **檢查基礎健康狀態**： - 頁面可載入，沒有空白畫面、錯誤頁或無限 loading。 - Console 沒有與本次變更直接相關的 error。 - Network 沒有與主要功能相關的 4xx / 5xx 或資源載入失敗。 - 路由切換不會導向錯誤頁或卡住。 5. **操作主要流程**： - 走完本次修改相關的完整使用者流程，例如填寫表單 → 送出 → 確認結果畫面顯示正確的資料，而非只點一下按鈕就結束。 - 涵蓋正常、邊界與錯誤情境：合法輸入預期成功；必填漏填或格式錯誤預期顯示驗證訊息；邊界值能正常處理。 - 狀態變更後畫面有合理回饋（loading、成功、失敗、停用），且回饋內容與實際結果一致。 6. **驗證寫入與持久化**（操作會寫入資料時）： - 操作後查詢資料來源，確認資料確實寫入且關鍵欄位值正確。 - 重新整理頁面或重新進入該頁，確認寫入的資料正確載回，篩選、分頁等前端狀態行為正常。 7. **檢查版面與響應式**： - 文字不重疊、不被截斷，按鈕與卡片內容不溢出。 - 本次修改影響響應式版面時，至少檢查一個桌面 viewport 與一個手機 viewport。 - 若畫面問題難以文字描述，截圖並用具體位置說明。 ## 登入與測試帳號 需要登入才能進入受影響頁面時：