Стратегия кроссбраузерного тестирования

Updated Jul 2026

Трёхуровневый подход

Тестирование каждой функции в каждом браузере не является ни практичным, ни необходимым. Ключ — знать, что тестировать везде, что проверять выборочно и что пропускать. Трёхуровневая стратегия обеспечивает максимальное покрытие при минимальных усилиях.

Статистика использования браузеров (справочная)

Ключевой вывод: движок важнее браузера

Chrome, Edge, Opera, Samsung Internet и Brave используют движок Blink. Если ваше приложение работает в Chrome, оно будет работать в Edge за редкими исключениями. Это означает, что у вас три реальных движка рендеринга для тестирования:

• Blink (Chrome и производные) -- ~75% всех пользователей
• WebKit (Safari) -- ~20% всех пользователей
• Gecko (Firefox) -- ~3% всех пользователей

Трёхуровневая стратегия

+------------------------------------------------------+
|  Tier 1: Full Regression (every PR)                  |
|  Chrome (latest) + Firefox (latest) + Safari (latest)|
|  These 3 cover ~92% of desktop users                 |
+------------------------------------------------------+
|  Tier 2: Critical Path (weekly / release)            |
|  Chrome Android + Safari iOS + Edge                  |
|  Samsung Internet + Firefox Android                  |
+------------------------------------------------------+
|  Tier 3: Spot Check (monthly / quarterly)            |
|  Older Safari (2 versions back)                      |
|  Chrome on low-end Android                           |
|  UCBrowser / Opera Mini (if emerging market users)   |
+------------------------------------------------------+

Уровень 1: полная регрессия при каждом PR

Запускайте весь набор тестов на последних версиях Chrome, Firefox и Safari. Эти три браузера представляют три движка рендеринга и покрывают подавляющее большинство пользователей.

// playwright.config.ts -- Tier 1 configuration
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
    projects: [
        {
            name: 'chrome',
            use: { ...devices['Desktop Chrome'] },
        },
        {
            name: 'firefox',
            use: { ...devices['Desktop Firefox'] },
        },
        {
            name: 'safari',
            use: { ...devices['Desktop Safari'] },
        },
    ],
});

Уровень 2: критические пути при релизе

Тестируйте наиболее важные пользовательские сценарии (вход, поиск, корзина, оплата) в мобильных браузерах и менее распространённых десктопных браузерах:

// playwright.config.tier2.ts
export default defineConfig({
    projects: [
        {
            name: 'chrome-android',
            use: { ...devices['Pixel 7'] },
        },
        {
            name: 'safari-ios',
            use: { ...devices['iPhone 15'] },
        },
        {
            name: 'edge',
            use: { channel: 'msedge' },
        },
    ],
    // Only run critical path tests
    testMatch: '**/critical-path/**',
});

Уровень 3: выборочные проверки

Ручные или полуавтоматизированные проверки на старых браузерах и нишевых платформах. Их не нужно запускать в CI:

# Quarterly checklist for Tier 3 browsers
# Run manually on BrowserStack/Sauce Labs:
# - Safari 2 versions back: login + main page + checkout
# - Chrome on Android 12 (low-end): page load under 5s
# - Samsung Internet: form submission + file upload
# - Opera Mini: basic content rendering (no JS-heavy features)

Настройка кроссбраузерного CI

# .github/workflows/cross-browser.yml
name: Cross-Browser Tests
on:
  pull_request:
    # Tier 1: every PR
  schedule:
    - cron: '0 6 * * 1'  # Tier 2: weekly on Monday
    - cron: '0 6 1 * *'  # Tier 3: monthly on 1st

jobs:
  tier-1:
    if: github.event_name == 'pull_request'
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npx playwright install --with-deps ${{ matrix.browser }}
      - run: npx playwright test --project=${{ matrix.browser }}

  tier-2:
    if: github.event_name == 'schedule' || github.event_name == 'pull_request'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test --config=playwright.config.tier2.ts

  tier-3:
    if: github.event.schedule == '0 6 1 * *'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - name: Run on BrowserStack
        env:
          BROWSERSTACK_USER: ${{ secrets.BS_USER }}
          BROWSERSTACK_KEY: ${{ secrets.BS_KEY }}
        run: npx playwright test --config=playwright.config.tier3.ts

Особенности браузеров в CI

Когда тестировать на реальных браузерах vs эквивалентах движков

Движок WebKit от Playwright — близкое, но не идентичное приближение к Safari. Для большинства веб-тестирования его достаточно. Для Safari-специфичных функций (воспроизведение медиа, CSS только для WebKit, Share Sheet) тестируйте на реальном Safari через BrowserStack.

Трёхуровневая стратегия балансирует тщательность с практичностью. Уровень 1 ловит 95% кроссбраузерных багов. Уровень 2 ловит мобильно-специфичные проблемы. Уровень 3 — страховка от крайних случаев длинного хвоста.