---
title: Cross-browser Testing 策略 — 哪些瀏覽器要測 / 雲端 device farm / CI 整合
description: Cross-browser 測試完整策略。Browser matrix 怎麼決定、Playwright 跨瀏覽器、BrowserStack / Sauce Labs 比較、何時用真機、何時用 emulator、CI 整合。
category: automation
tags: [cross-browser, browserstack, playwright, device-matrix]
date: 2026-06-17
faq:
  - q: 該測哪些瀏覽器？
    a: 看 GA / Mixpanel 數據。覆蓋 90% user 通常 = Chrome + Safari + Edge + iOS Safari + Android Chrome 5 個。Firefox 一般 < 5%、低優先。IE11 已死、不測。
  - q: 雲端 device farm 該選哪個？
    a: BrowserStack 起步首選（UI 好、設備多）。Sauce Labs 企業向、大規模便宜。Firebase Test Lab 是 Android 神器但 iOS 少。LambdaTest 便宜替代。
  - q: 每個 PR 都跑全瀏覽器嗎？
    a: 別。PR 跑 Chrome 即可（10 分鐘內）、Nightly 跑全 matrix（30 分鐘+）。Release 前跑真機 + 多 OS。
  - q: 視覺差異跨瀏覽器怎處理？
    a: Playwright snapshot 各瀏覽器存獨立 baseline（`homepage-chromium.png` / `homepage-webkit.png`）。或用 Percy / Applitools 自動處理跨瀏覽器一致性。
---

# Cross-browser Testing 策略

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

## Browser Matrix — 別瞎測

```mermaid
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）

| 平台 | 瀏覽器 | 優先 |
|------|--------|------|
| Desktop | Chrome latest | P0 |
| Desktop | Safari latest | P0 |
| Desktop | Edge latest | P1 |
| Desktop | Firefox latest | P2 |
| Mobile | iOS Safari 17 | P0 |
| Mobile | iOS Safari 16 | P1 |
| Mobile | Android Chrome | P0 |

**多數團隊測 P0 + P1 就夠**。

## 跨瀏覽器哪些東西常爆

```mermaid
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 跨瀏覽器設定

```typescript
// 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'] } },
  ],
});
```

跑：

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

# 全部
npx playwright test

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

## CI 整合 — 分層策略

```mermaid
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
```

```yaml
# .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** | $39/月 | UI 好、設備多、響應快 | 貴 |
| **Sauce Labs** | 企業 | 大規模便宜 | UI 老派 |
| **LambdaTest** | $19/月 | 便宜替代 | 較不穩 |
| **AWS Device Farm** | 按需 | AWS 整合 | UX 差 |
| **Firebase Test Lab** | 免費起跳 | Android 神器 | iOS 少 |
| **TestingBot** | $39/月 | 歐洲 GDPR 友善 | 設備少 |

### BrowserStack 設置範例

```typescript
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

```mermaid
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。

## 跨平台視覺差異處理

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

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

## 反模式

```mermaid
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 入門](/automation/playwright-starter.html)
- [Visual Regression Testing](/automation/visual-regression-testing.html)
- [Mobile App Testing 入門](/automation/mobile-testing-appium-detox.html)