Cross-browser Testing 策略 — 哪些瀏覽器要測 / 雲端 device farm / CI 整合

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

2026 推薦 Matrix（多數 SaaS）

多數團隊測 P0 + P1 就夠。

// 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

# .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 }}

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))}`,
});

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 比對忽略跨瀏覽器小差異。

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 入門