Tests Multi-Navigateurs avec Playwright: Chrome, Firefox, Safari

Playwright exécute le même code de test sur Chromium, Firefox et WebKit en définissant plusieurs projets dans playwright.config.ts, chacun ciblant un navigateur ou une configuration d'appareil différent.

Les trois projets de navigateurs

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

Lancer tous les navigateurs :

npx playwright test

Lancer un seul navigateur :

npx playwright test --project=webkit

Chromium, Firefox et WebKit : ce qui diffère

Chromium : le moteur JavaScript V8, rendu Blink. Chrome et Edge utilisent Chromium. Environ 65% du trafic web desktop en 2026. C'est votre cible principale. Firefox : moteur JavaScript SpiderMonkey, rendu Gecko. Environ 5% du trafic desktop. Comportement CSS différent dans les cas limites, rendu différent des éléments de formulaire, gestion différente de certaines API web. WebKit : JavaScriptCore, rendu WebKit. Safari sur Mac et iOS. Sur iOS, tous les navigateurs utilisent WebKit sous le capot. Si vos utilisateurs incluent des utilisateurs iPhone (c'est le cas), les tests WebKit ne sont pas optionnels.

Ce qui casse vraiment en test cross-browser

La plupart des applications web fonctionnent de la même façon dans les trois moteurs. Les différences qui comptent :

CSS : gap en flexbox, subgrid, les nouvelles requêtes @container et backdrop-filter se comportent légèrement différemment selon les moteurs. Certaines fonctions de couleur ne sont pas supportées dans les versions plus anciennes. Saisie de date et heure : s'affiche très différemment selon les navigateurs. WebKit et Firefox ont leurs propres interfaces de sélection de date natives. Upload de fichier : la boîte de dialogue de sélection de fichier varie. setInputFiles() de Playwright contourne ça, mais la gestion de l'événement filechooser diffère. Comportement des barres de défilement : WebKit (sur Mac) masque les barres de défilement par défaut. Les tests qui cliquent sur des coordonnées proches des barres de défilement peuvent se comporter différemment. API Clipboard : navigator.clipboard nécessite une permission utilisateur. Fonctionne différemment dans chaque navigateur sous automatisation de test. Élément : support complet dans tous les navigateurs modernes, mais des différences de comportement existent dans les versions plus anciennes des moteurs. WebRTC, WebSockets, Service Workers : généralement cohérents maintenant, mais ont historiquement présenté des différences cross-browser.

Stratégie cross-browser : tests par niveaux

Exécuter tous les tests sur tous les navigateurs triple le temps de CI. L'approche pratique est d'organiser par niveaux.

Niveau 1 : chaque PR (Chromium uniquement). Suite de régression complète, tests de fonctionnalités et tests API. Niveau 2 : merge vers main (Chromium + Firefox + WebKit). Smoke tests sur tous les navigateurs, plus les zones à risque cross-browser connu : saisies de date, upload de fichier, interactions dépendant du CSS. Niveau 3 : nightly (tous les navigateurs, suite complète). Régression cross-browser complète.

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

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

export default defineConfig({
  projects: [
    // Toujours exécuter Chromium
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    // Exécuter Firefox et WebKit uniquement en mode cross-browser
    ...(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'  # Uniquement en planification nightly
  run: CROSS_BROWSER=true npx playwright test

Installer les navigateurs

Playwright télécharge les binaires des navigateurs séparément. Pour installer les trois :

npx playwright install

Pour installer des navigateurs spécifiques :

npx playwright install chromium firefox webkit

En CI, utilisez l'image Docker qui inclut tous les navigateurs :

- run: npx playwright install --with-deps

--with-deps installe également les dépendances système (polices, codecs) dont les navigateurs Playwright ont besoin.

Gérer le comportement spécifique à un navigateur dans les tests

Quand un test doit se comporter différemment selon le navigateur :

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

test('comportement de la saisie de date', async ({ page, browserName }) => {
  await page.goto('/book-appointment');

  if (browserName === 'webkit') {
    // Le sélecteur de date natif de WebKit nécessite une interaction différente
    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');
});

browserName vaut 'chromium', 'firefox' ou 'webkit'.

Ignorer un test sur un navigateur spécifique :

test('utilise l\'API clipboard', async ({ page, browserName }) => {
  test.skip(browserName === 'firefox', 'L\'API clipboard nécessite des permissions dans Firefox');
  // ...
});

Vrai navigateur vs émulation

Playwright s'exécute contre de vrais moteurs de navigateur, pas des environnements simulés. Les tests WebKit s'exécutent contre le vrai moteur WebKit (le même qui propulse Safari), pas un simulateur Safari imitant Chrome.

Ça compte : les bugs cross-browser que vous trouvez dans le projet WebKit de Playwright se reproduiront dans le vrai Safari. Ce n'est pas identique à 100% (Playwright utilise une version WebKit légèrement plus récente que Safari en production), mais c'est suffisamment proche pour détecter de vrais problèmes.