Cross-browser Testing 策略

「Chrome 沒事、Safari 爆炸」是 web QA 常態。但 全瀏覽器全測 = 永遠跑不完 + 預算爆。這篇給你務實的 cross-browser 策略。

Browser Matrix — 別瞎測

flowchart TD
    Start[決定 Matrix] --> Data{看 GA / Mixpanel}
    Data --> Top[Top 90% user 覆蓋]
    Top --> Decide[挑 5-7 個組合]

    Decide --> Web[Web]
    Web --> W1[Chrome latest + latest-1]
    Web --> W2[Safari latest]
    Web --> W3[Edge latest]
    Web --> W4[Firefox latest 可選]

    Decide --> Mob[Mobile]
    Mob --> M1[iOS Safari 17 + 16]
    Mob --> M2[Android Chrome latest]

    style Decide fill:#06b6d4,color:#fff

2026 推薦 Matrix（多數 SaaS）

多數團隊測 P0 + P1 就夠。

跨瀏覽器哪些東西常爆

mindmap
  root((常見<br>跨瀏覽器 bugs))
    CSS
      Flexbox / Grid 邊界
      backdrop-filter
      :has() selector
      容器查詢
    JS API
      Web Share API
      File System Access
      WebGPU
      Intersection Observer 細節
    Layout
      Safari 100vh 含工具列
      iOS 鍵盤推擠
      RWD breakpoints
    輸入
      日期選擇器
      Color picker
      File upload
    儲存
      localStorage 配額
      Cookie SameSite
      IndexedDB API
    安全
      CORS 差異
      Cookie 規則
      iframe 限制

Playwright 跨瀏覽器設定

// playwright.config.ts
export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'mobile-ios', use: { ...devices['iPhone 13'] } },
    { name: 'mobile-android', use: { ...devices['Pixel 7'] } },
  ],
});

跑：

# 單瀏覽器
npx playwright test --project=chromium

# 全部
npx playwright test

# matrix（GitHub Actions）
npx playwright test --project=$PROJECT_NAME

CI 整合 — 分層策略

flowchart TD
    Tier[分層策略] --> T1[PR Tier:<br>Chromium only<br>< 10 分鐘]
    Tier --> T2[Nightly Tier:<br>全瀏覽器 matrix<br>30 分鐘]
    Tier --> T3[Release Tier:<br>BrowserStack 真機<br>1-2 小時]

    style T1 fill:#10b981,color:#fff
    style T2 fill:#06b6d4,color:#fff
    style T3 fill:#a855f7,color:#fff

# .github/workflows/e2e.yml
name: E2E

on:
  pull_request:
  schedule:
    - cron: '0 2 * * *'  # nightly 2am

jobs:
  pr-chromium:
    if: github.event_name == 'pull_request'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npx playwright install chromium --with-deps
      - run: npx playwright test --project=chromium

  nightly-all:
    if: github.event_name == 'schedule'
    strategy:
      matrix:
        project: [chromium, webkit, firefox, mobile-ios, mobile-android]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npx playwright install --with-deps
      - run: npx playwright test --project=${{ matrix.project }}

雲端 Device Farm 比較

BrowserStack 設置範例

import { chromium } from 'playwright';

const capabilities = {
  browser: 'Safari',
  os: 'OS X',
  os_version: 'Sonoma',
  name: 'My Test',
  build: 'Playwright build',
  'browserstack.username': process.env.BS_USER,
  'browserstack.accessKey': process.env.BS_KEY,
};

const browser = await chromium.connect({
  wsEndpoint: `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify(capabilities))}`,
});

真機 vs Emulator/Simulator

flowchart LR
    Choose{選什麼?} --> E[Emulator / Simulator]
    Choose --> R[真機]

    E --> EA[免費 / 快]
    E --> EB[適合 dev / CI]
    E --> EC[抓不到硬體 bug]

    R --> RA[真實使用者體驗]
    R --> RB[抓硬體 / 網路 / 電量]
    R --> RC[貴 / 慢]

    style E fill:#06b6d4,color:#fff
    style R fill:#a855f7,color:#fff

80% E2E 跑 emulator 即可、release 前跑真機 device farm。

跨平台視覺差異處理

// 各瀏覽器獨立 baseline
test('homepage', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot();
  // Playwright 自動產 homepage-chromium.png / homepage-webkit.png / homepage-firefox.png
});

或用 Applitools AI 比對忽略跨瀏覽器小差異。

反模式

flowchart TD
    Anti[Cross-browser 反模式] --> A1["每 PR 跑全 matrix → 30 分鐘"]
    Anti --> A2["不看數據、全部測"]
    Anti --> A3["IE11 還在測"]
    Anti --> A4["不分 Tier"]
    Anti --> A5["只測 Chrome 上線後爆"]
    Anti --> A6["device farm 用 prod data"]

    style A1 fill:#ef4444,color:#fff
    style A2 fill:#ef4444,color:#fff
    style A3 fill:#ef4444,color:#fff
    style A4 fill:#ef4444,color:#fff
    style A5 fill:#ef4444,color:#fff
    style A6 fill:#ef4444,color:#fff

給 QA 的 5 句

1. 看 GA 決定 matrix、不要拍腦袋
2. 分 Tier 跑（PR / Nightly / Release）
3. Emulator 80% + 真機 20%
4. Safari 是踩雷率最高的、必測
5. 2026 後不該再測 IE11

最後

Cross-browser 不是「全部測」、是「對的時機測對的瀏覽器」。用數據驅動 matrix、分 Tier 控制 CI 時間、真機保留給 release — 每月省 5+ 小時 CI 時間、release 體驗反而更好。

延伸： - Playwright 入門 - Visual Regression Testing - Mobile App Testing 入門