5.2 多瀏覽器與多裝置測試#

為什麼要跨瀏覽器測試？#

你的網站在 Chrome 上正常，Safari 上表單送不出、Firefox 上排版跑掉——使用者用的瀏覽器不是只有 Chrome。Playwright 一次設定就能在三大瀏覽器上跑同一套測試。

projects：定義測試矩陣#

// playwright.config.ts
import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  projects: [
    // 桌面版三大瀏覽器
    { name: "chromium",  use: { ...devices["Desktop Chrome"] } },
    { name: "firefox",   use: { ...devices["Desktop Firefox"] } },
    { name: "webkit",    use: { ...devices["Desktop Safari"] } },

    // 手機版（模擬視窗、觸控、UA）
    { name: "mobile-chrome",  use: { ...devices["Pixel 5"] } },
    { name: "mobile-safari",  use: { ...devices["iPhone 13"] } },
  ],
});

跑 npx playwright test 時，每個測試會在每個 project 各跑一次。

只跑特定瀏覽器#

npx playwright test --project=chromium        # 只跑 Chromium
npx playwright test --project=mobile-chrome   # 只跑手機版 Chrome

內建裝置清單#

Playwright 內建上百種裝置設定，直接用名稱取用：

devices["Desktop Chrome"]
devices["Desktop Safari"]
devices["iPhone 13"]
devices["Pixel 5"]
devices["iPad Pro"]

手動覆寫個別設定#

{
  name: "大視窗",
  use: {
    ...devices["Desktop Chrome"],
    viewport: { width: 1920, height: 1080 },
    locale: "zh-TW",
    timezoneId: "Asia/Taipei",
  },
},

怎麼選測試矩陣？#

產品情境	建議矩陣
一般 Web 應用	Chromium + WebKit（Safari 常出問題）
面向大眾的消費者網站	桌面三大瀏覽器 + 手機版兩種
內部工具（公司統一用 Chrome）	只跑 Chromium

心法：瀏覽器矩陣越大，跑得越久。只測「你的使用者真的在用的瀏覽器」，內部工具不必跑五大矩陣。手機版測試用裝置模擬，不必真的買手機。