跳轉到

1.1 為什麼需要 Playwright？#

從一個問題開始#

單元測試驗證了每個函式的邏輯，但功能組起來能不能用？按鈕點下去表單會不會送出？登入流程跑得完嗎？這些問題只有「真的打開瀏覽器操作一遍」才能回答。

手動測試的問題：

  1. 慢：每次改版都人工點一遍所有流程
  2. 容易漏：人會疲勞，漏測一個邊界就出事
  3. 無法進 CI：不能在 Pull Request 上自動驗證

E2E（End-to-End）測試就是用程式碼模擬真實使用者的操作流程，自動驗證整個系統。

Playwright 是什麼？#

Playwright 是微軟開發的 E2E 測試框架，一行指令安裝 Chrome、Firefox、Safari 三大瀏覽器並自動化操作。

特色 說明
跨瀏覽器 Chromium、Firefox、WebKit 一次搞定
自動等待 等元素出現、可點擊才操作，不用手寫 sleep
快與穩定 現代架構，不容易 flaky（時好時壞）
多裝置 模擬手機、平板的視窗與觸控
工具齊全 內建 Trace Viewer、UI Mode、截圖錄影

Playwright vs 其他工具#

Playwright Selenium Cypress
跨瀏覽器 ✅ 三大瀏覽器 ✅ 但設定繁瑣 ❌ 主要 Chromium
自動等待 ✅ 內建 ❌ 要手寫 wait ✅ 部分
多分頁 / 多站點 ✅ ✅ ⚠️ 受限
速度 快 慢 中
新專案建議 ✅ 維護舊系統 已有 Cypress 的專案

E2E 測試在測試金字塔中的位置#

        /  E2E  \        Playwright 的位置：少量、只測關鍵路徑
       / 整合測試 \
      /  單元測試  \      大量、快速（node:test / Jest）

心法：E2E 測試慢且貴，只測關鍵路徑（登入、購物車結帳、註冊流程），不要企圖用 E2E 覆蓋所有邏輯——那是單元測試的工作。