Codegen 與 UI Mode
不確定該怎麼寫 Locator、或想更直覺地觀察測試執行過程時，Playwright 提供兩個互動式工具：Codegen（測試產生器）與 UI Mode（互動除錯介面）。
Codegen：錄製操作產生測試
執行後會開啟兩個視窗：一個是實際的瀏覽器，另一個是「Playwright Inspector」。在瀏覽器裡點擊、輸入文字、勾選選項時，Inspector 會即時把這些操作轉換成對應的程式碼，並自動挑選建議的 Locator（優先使用 getByRole、getByText 等語意化寫法）。
實務上，Codegen 產生的程式碼很適合當作起點：先錄製出操作流程的雛形，再手動整理成搭配 Fixtures 或 Page Object Model 的正式測試，而不是直接把錄製結果原封不動當成最終測試。
常用參數：
npx playwright codegen --target=typescript https://example.com # 指定輸出語言
npx playwright codegen --device="iPhone 13" https://example.com # 模擬行動裝置
npx playwright codegen --save-storage=auth.json https://example.com # 錄製並儲存登入狀態
--save-storage 特別實用：錄製一次登入流程後，把 Cookies／LocalStorage 存成檔案，之後測試可以直接載入這個狀態略過登入步驟，詳見 身份驗證狀態與視覺比對。
UI Mode：互動式測試執行介面
UI Mode 是官方近年主推的除錯體驗，會開啟一個獨立的介面，同時呈現：
- 左側：所有測試案例的清單，可以單獨執行、重跑某一支測試。
- 中央：時間軸（Timeline），逐步顯示每個操作對應的畫面截圖，可以像拉進度條一樣前後移動觀察畫面變化。
- 右側：對應的原始碼、網路請求（Network）、主控台輸出（Console）。
比起單純看終端機的文字結果，UI Mode 能讓你直接看到「測試在第幾步、畫面長什麼樣子」，特別適合開發新測試、或排查偶發失敗（flaky）的案例時使用。UI Mode 也支援「監看模式」，儲存程式碼後自動重跑受影響的測試，開發體驗類似前端框架的熱重載。
該用哪一個？
| 情境 | 建議工具 |
|---|---|
| 剛開始寫一支新測試，不確定 Locator 怎麼寫 | Codegen |
| 想快速取得已登入狀態的 storage state | Codegen（搭配 --save-storage） |
| 開發階段想即時看到測試每一步的畫面 | UI Mode |
| 測試已經失敗過，想回放當時發生了什麼 | Trace Viewer（適合分析已發生的失敗，尤其是 CI 上的失敗） |
下一步
Codegen 與 UI Mode 適合開發階段即時除錯；當測試在 CI 環境失敗、無法即時重現時，就需要 Trace Viewer 追蹤除錯 回放完整的執行紀錄。