Lead Me Home 寵物協尋平台 ｜ 2026-05-18
# 進入前端專案 cd lead-me-home-fe # 安裝測試套件 npm install --save-dev @playwright/test # 安裝瀏覽器 npx playwright install chromium
# 無頭模式（最快，CI 用） npm run test:e2e # 看得到瀏覽器操作（Debug 用） npm run test:e2e:headed # Playwright UI 模式（最強，可以一步一步看、時間回溯） npm run test:e2e:ui # 只跑特定分類 npx playwright test --grep "首頁" npx playwright test --grep "API" npx playwright test --grep "手機版"
# 測試跑完後，自動生成 HTML 報告 npx playwright show-report
會在瀏覽器打開一份互動式報告，包含每個測試的截圖、時間軸、錯誤訊息。
| # | 分類 | 測試名稱 | 驗證什麼 |
|---|---|---|---|
| 1 | 首頁 | CTA 按鈕可見且可點擊 | 兩個主要入口按鈕存在、enabled |
| 2 | 首頁 | 最新動態有載入 | 頁面不是空白，有走失/通報相關內容 |
| 3 | 首頁 | 「登記走失」未登入導向 LINE | 未登入按了會跳到 LINE OAuth 或被擋 |
| 4 | 首頁 | 「通報」免登入直接進表單 | URL 變成 /lost-pet-report |
| 5 | 通報 | 物種選擇出現 | 表單有貓/狗/物種相關內容 |
| 6 | 通報 | 必填未填被擋 | 空表單送出不會離開頁面 |
| 7 | 訊息列表 | 地圖元件出現 | Leaflet 地圖渲染成功 |
| 8 | 訊息列表 | 有卡片渲染 | 頁面有走失/通報時間的文字 |
| 9 | 訊息列表 | 篩選切換不 crash | 切「已關注」/「全部」後頁面正常 |
| 10 | 訊息列表 | 帶參數進入不 crash | ?cityInfo=台北市 頁面 + 地圖正常 |
| 11 | 登入保護 | /profile/pets 被擋 | 未登入不能進個人檔案 |
| 12 | 登入保護 | /add-lost-pet 被擋 | 未登入不能進登記走失 |
| 13 | 登入保護 | /profile/notifications 被擋 | 未登入不能進通知頁 |
| 14 | API | health check | 回 200 + { ok: true } |
| 15 | API | GET /posts | 回 200 |
| 16 | API | GET /pet-trait-options | 回 200 + 有資料 |
| 17 | API | GET /county-counts | 回 200 |
| 18 | API | Scramble 文件可存取 | 回 200 + 含 HTML |
| 19 | API | OpenAPI JSON | 回 200 + 有 openapi/paths 欄位 |
| 20 | API | 未認證打 /profile | 回 401 或 302（不回 200） |
| 21 | API | 未認證打 /poster-status | 不回 200 |
| 22 | 推播 | 不存在的 post 不 500 | 打不存在 ID → 不 crash |
| 23 | 推播 | 空陣列不 500 | 傳 [] → 不 crash |
| 24 | 推播 | 非法輸入不 500 | 傳字串 → 不 crash |
| 25 | 海報 | 無 token 不白屏 | 頁面有內容（>10 字） |
| 26 | 海報 | template-data 無 token 被擋 | API 不回 200 |
| 27 | 海報 | R2 圖片可存取 | poster URL 回 200 + image content-type |
| 28 | 手機版 | 首頁 CTA 可見 | 375px 寬度下按鈕看得到 |
| 29 | 手機版 | 訊息列表無溢位 | scrollWidth ≤ clientWidth |
| 30 | 手機版 | 通報頁無溢位 | scrollWidth ≤ clientWidth |
| 31 | 導航 | 首頁→通報→返回 | 瀏覽器上下頁不 crash |
| 32 | 導航 | 訊息列表→點卡片 | 點卡片後頁面不白屏 |
| 33 | 導航 | 404 路由不白屏 | 不存在的網址有內容 |
| 34 | 效能 | 首頁 <5s 載入 | domcontentloaded < 5 秒 |
| 35 | 效能 | API <3s 回應 | /posts 回應 < 3 秒 |
| 36 | 效能 | cold start 正常 | 連打兩次 health → 第二次 200 |
需要：測試用 Sanctum token + 測試後自動清理資料
Playwright 支援：context.setGeolocation({ latitude, longitude })
需要：LINE Messaging API mock 或讀 Render log 驗證
需要：兩個測試帳號同時操作（Playwright 支援多 context）
需要：測試用 Sanctum token 注入 localStorage
Playwright 支援：expect(page).toHaveScreenshot()
| 優先級 | 要做的事 | 預估時間 | 需要什麼 |
|---|---|---|---|
| P0 | 寫入流程測試 — 通報送出 + 走失登記送出 | 2-3 小時 | 測試用 Sanctum token |
| P0 | GPS 定位模擬 — 地圖中心 + 表單地址 | 1 小時 | Playwright geolocation API |
| P1 | 聊天功能 — 雙帳號收發訊息 | 2 小時 | 兩組 Sanctum token |
| P1 | 登入後流程 — 個人檔案 + 標記找到 | 1-2 小時 | 一組 Sanctum token |
| P2 | 視覺回歸 — 關鍵頁面截圖基線 | 1 小時 | 無（Playwright 內建） |
| P2 | CI 整合 — 每次 push 自動跑測試 | 30 分鐘 | GitHub Actions workflow |
.env.e2e（從 .env.e2e.example 複製）# 前端網址 E2E_BASE_URL=https://lead-me-home.vercel.app # 後端 API 網址 E2E_API_BASE=https://lead-me-home-be.onrender.com # 測試用 Sanctum token（登入後流程需要） # 格式：{token_id}|{plaintext_token} E2E_OWNER_TOKEN= E2E_REPORTER_TOKEN=
跑 npx playwright show-report 打開 HTML 報告，失敗的測試會有截圖和錯誤訊息。也可以用 npm run test:e2e:ui 進入 UI 模式，一步一步回放。
有可能。測試裡已經把 API timeout 設為 30 秒。如果還是 timeout，先手動打一次 https://lead-me-home-be.onrender.com/api/health 喚醒，再跑測試。
在 e2e/ 資料夾裡新增 .spec.ts 檔案，Playwright 會自動偵測。也可以在現有的 full-journey.spec.ts 裡加 test()。
npx playwright test --project=mobile
// 在測試裡加這段 test.use({ geolocation: { latitude: 25.033, longitude: 121.565 }, permissions: ['geolocation'], });