Кросс-браузерное тестирование с Playwright: Chrome, Firefox, Safari

Запускать все тесты против Chromium, Firefox и WebKit на каждый PR утраивает время CI без пропорционального прироста покрытия: большинство падений не специфичны для браузера. Различия которые реально важны между движками конкретны: рендеринг инпута даты, граничные случаи CSS flexbox, разрешения Clipboard API, поведение загрузки файлов. Здесь разобрано когда Chromium достаточно, как настроить многоуровневые браузерные проекты в playwright.config.ts, и как обрабатывать браузер-специфичную логику когда она нужна.

Три браузерных проекта

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

Запуск всех браузеров:

npx playwright test

Запуск одного браузера:

npx playwright test --project=webkit

Chromium, Firefox и WebKit: в чём разница

Что реально ломается при кросс-браузерном тестировании

Большинство веб-приложений работают одинаково во всех трёх движках. Важные различия:

Стратегия кросс-браузерного тестирования: многоуровневый подход

Запуск всех тестов на всех браузерах утраивает время CI. Практичный подход: многоуровневый.

Уровень 1: каждый PR (только Chromium)

Полный регрессионный сьют, тесты фич и API-тесты.

Уровень 2: мерж в main (Chromium + Firefox + WebKit)

Smoke-тесты во всех браузерах и тесты в областях с известным кросс-браузерным риском: инпуты даты, загрузка файлов, CSS-зависимые взаимодействия.

Уровень 3: ночной запуск (все браузеры, полный сьют)

Полная кросс-браузерная регрессия.

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

const isCIFullRun = process.env.CROSS_BROWSER === 'true';

export default defineConfig({
  projects: [
    // Chromium запускается всегда
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    // Firefox и WebKit только в кросс-браузерном режиме
    ...(isCIFullRun ? [
      {
        name: 'firefox',
        use: { ...devices['Desktop Firefox'] },
      },
      {
        name: 'webkit',
        use: { ...devices['Desktop Safari'] },
      },
    ] : []),
  ],
});

# .github/workflows/tests.yml
- name: Run cross-browser tests
  if: github.event_name == 'schedule'  # Только по ночному расписанию
  run: CROSS_BROWSER=true npx playwright test

Установка браузеров

Playwright скачивает браузерные бинарники отдельно. Установка всех трёх:

npx playwright install

Установка конкретных браузеров:

npx playwright install chromium firefox webkit

В CI используй Docker-образ который включает все браузеры:

- run: npx playwright install --with-deps

Обработка браузер-специфичного поведения в тестах

Когда тест должен вести себя по-разному в зависимости от браузера:

import { test, expect } from '@playwright/test';

test('date input behavior', async ({ page, browserName }) => {
  await page.goto('/book-appointment');

  if (browserName === 'webkit') {
    // Нативный выбор даты в WebKit требует другого взаимодействия
    await page.getByLabel('Date').fill('2026-06-15');
  } else {
    await page.getByLabel('Date').type('06/15/2026');
  }

  await expect(page.getByLabel('Date')).toHaveValue('2026-06-15');
});

Пропуск теста в конкретном браузере:

test('uses clipboard API', async ({ page, browserName }) => {
  test.skip(browserName === 'firefox', 'Clipboard API requires permissions in Firefox');
  // ...
});

Реальный браузер против эмуляции

Playwright запускается против реальных браузерных движков, не против симулированных окружений. WebKit-тесты работают против настоящего движка WebKit (того же который управляет Safari), а не против Chrome-имитирующего симулятора Safari.

Это важно: кросс-браузерные баги найденные в WebKit-проекте Playwright воспроизведутся в реальном Safari. Полной идентичности нет (Playwright использует слегка более новую сборку WebKit чем текущий Safari), но совпадения достаточно чтобы ловить реальные проблемы.