Nevermind

下一代端對端測試工具：Playwright 上手指南

5 分鐘

1. 端對端測試的挑戰

端對端（End-to-End，E2E）測試是保障應用程式品質的最後一道防線。它透過模擬真實使用者操作（點擊、輸入、導覽），驗證整個應用程式流程是否順暢。然而，E2E 測試也以「脆弱」和「不穩定」聞名：

  • 非同步問題：指令碼執行時，DOM 元素可能尚未載入完成，導致測試失敗。開發者需要手動加入大量 wait 或 sleep，讓測試變得不可靠。
  • 跨瀏覽器相容性：確保測試能在所有主流瀏覽器（Chrome、Firefox、Safari）上穩定執行，是一項巨大挑戰。
  • 偵錯困難：當測試在 CI/CD 環境中失敗時，重現和定位問題非常困難，也缺少現場快照與網路日誌。

為了解決這些問題，新一代測試工具應運而生，而 Playwright 正是其中的佼佼者。

2. Playwright 是什麼？

Playwright 是由微軟開發的 Node.js 函式庫，用於自動化 Chromium（Chrome、Edge）、Firefox 和 WebKit（Safari）瀏覽器。它由最初開發 Google Puppeteer 的團隊核心成員建立，可視為 Puppeteer 的精神繼承者，但設計更加現代且強大。

3. Playwright 的核心優勢

a. 真正的跨瀏覽器測試

這是 Playwright 最顯著的優勢。使用一套統一的 API，就能撰寫可在三個主流瀏覽器引擎上執行的測試。這代表你能輕鬆發現並修正只在特定瀏覽器（例如 Safari）出現的 Bug。

b. 自動等待（Auto-Waits）

Playwright 從根本上解決了非同步問題。在執行一項操作（例如 page.click()）之前，Playwright 會自動進行一系列可操作性檢查，例如：

  • 等待元素出現在 DOM 中。
  • 等待元素變得可見。
  • 等待元素不再被動畫遮擋。
  • 等待元素接收事件。

這代表你幾乎不再需要撰寫任何手動等待程式碼，測試穩定性也獲得大幅提升。

c. 強大的配套工具

  • Codegen（程式碼產生器）：這是一項革命性的功能。你可以執行 pnpm exec playwright codegen example.com，Playwright 會開啟瀏覽器視窗。你在瀏覽器中的所有操作都會被自動錄製並轉換成測試程式碼，大幅降低撰寫 E2E 測試的門檻。

  • Trace Viewer（軌跡檢視器）：這是 Playwright 的「時光機」。測試失敗時，你可以產生完整的測試軌跡檔案。用 Trace Viewer 開啟後，可以：

    • 檢視測試每一步的 DOM 快照。
    • 檢視完整的網路請求日誌。
    • 檢視 console 日誌和錯誤資訊。
    • 在時間軸上來回移動，直觀地看到頁面在每項操作前後的變化。

這使得偵錯 CI 中的失敗案例變得前所未有地簡單。

4. 一個簡單的測試範例

Playwright 的 API 設計非常直觀。

import { test, expect } from '@playwright/test';

test('页面应有正确的标题', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // 断言页面的 title 包含 "Playwright"
  await expect(page).toHaveTitle(/Playwright/);
});

test('点击 "Get started" 链接应跳转到介绍页', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // 通过角色和名称定位并点击链接
  await page.getByRole('link', { name: 'Get started' }).click();

  // 断言 URL 包含 "intro"
  await expect(page).toHaveURL(/.*intro/);
});

結論

Playwright 憑藉出色的跨瀏覽器支援、可靠的自動等待機制和無與倫比的偵錯工具（尤其是 Trace Viewer），為現代 Web 應用程式的 E2E 測試建立了新標準。它不僅提升了測試的穩定性與可靠性，也透過 Codegen 等工具大幅改善開發者撰寫測試的體驗。如果你正在為專案尋找現代且強大的自動化測試方案，Playwright 絕對是首選之一。

Testing Playwright E2E Automation