4.1 Debug 三大利器：UI Mode、Inspector、Trace Viewer#

第一招：UI Mode（開發時首選）#

npx playwright test --ui

打開互動介面，可以：

• 單獨執行任何一個測試
• 時間旅行：一步步回看每個操作後的畫面快照
• 直接檢視每步的 DOM、network、console log

開發與除錯測試時幾乎都待在 UI Mode。

第二招：Playwright Inspector（逐步執行）#

npx playwright test --debug

會打開 Inspector 視窗：

• 單步執行：一步一步按，看每個操作
• Pick locator：點頁面上的元素，直接告訴你最好的定位器寫法
• 即時修改並重跑

Pick locator 是寫定位器的神器：不知道怎麼定位元素，用它點一下就有答案。

第三招：Trace Viewer（失敗後的事後檢視）#

測試失敗後，用 trace 重現整個過程：

第一步：設定檔開啟 trace

// playwright.config.ts
use: {
  trace: "retain-on-failure",   // 失敗時自動留下 trace
},

第二步：跑測試後檢視

npx playwright show-trace test-results/.../trace.zip

Trace Viewer 會顯示：

• 每個操作前後的畫面快照
• DOM 快照（可點選檢查元素）
• 完整的 network 請求
• console 錯誤

三招分工：

快速除錯的小技巧#

// 測試中暫停，手動操作瀏覽器觀察
await page.pause();

// 開著瀏覽器視窗慢慢看
npx playwright test --headed --timeout=60000

心法：先看證據再改測試。失敗時不要憑感覺亂改，用 UI Mode / Trace Viewer 看清楚「當時頁面長什麼樣、哪個操作失敗」再動手。