6 min de lecture - Playwright : une automatisation des tests QA enfin fiable

Les tests manuels ne peuvent plus suivre le rythme des cycles de mise en production modernes. Les tests automatisés existent depuis des années, mais des outils historiques comme Selenium restent fragiles, lents et coûteux à maintenir. Playwright, développé par Microsoft, résout les problèmes qui ont fini par miner la confiance des équipes envers leurs suites de tests — et il le fait avec une expérience développeur qui donne vraiment envie d'écrire des tests.

Ce que vous allez apprendre

• Ce qui distingue Playwright de Selenium et Cypress
• Comment les auto-waits et les contextes de navigateur éliminent l'instabilité des tests
• Configurer Playwright avec le CI/CD (GitHub Actions, GitLab CI)
• Les techniques d'interception réseau pour simuler des API et des erreurs
• Les stratégies d'exécution parallèle pour les suites de tests volumineuses
• Quand utiliser Playwright plutôt que Cypress ou Selenium

L'essentiel

Playwright pilote Chromium, Firefox et WebKit avec une seule et même API. Son mécanisme d'auto-wait élimine les tests instables en attendant intelligemment que les éléments soient prêts avant toute interaction. Parmi ses fonctionnalités intégrées : le codegen pour enregistrer des tests, le trace viewer pour déboguer, l'interception réseau pour simuler des API, et l'exécution parallèle pour des retours rapides. Il s'exécute en CI sans les casse-têtes habituels d'installation de navigateurs.

Ce qui distingue Playwright

Playwright est une bibliothèque open source d'automatisation de navigateur qui pilote tous les moteurs de navigateur majeurs — Chromium (Chrome, Edge), Firefox et WebKit (Safari) — avec une seule API. C'est un avantage concret : vous écrivez un seul test et l'exécutez sur tous les navigateurs réellement utilisés par vos utilisateurs.

Contrairement à Selenium, Playwright a été conçu pour les applications web modernes. Contrairement à Cypress, il n'est pas limité à Chromium. Et contrairement aux deux, il embarque un outillage qui rend le workflow de test réellement productif.

Auto-waits : la fin des tests instables

La plus grande amélioration apportée par Playwright est son mécanisme d'auto-wait. Avant chaque action (clic, remplissage, assertion), Playwright attend automatiquement que l'élément soit :

• Attaché au DOM
• Visible
• Stable (sans animation en cours)
• Activé
• Prêt à recevoir des événements

Fini les appels sleep(2000) ou waitForSelector disséminés dans le code de test. Cela suffit à éliminer la majorité des tests instables qui empoisonnent Selenium et les frameworks plus anciens.

// Playwright auto-waits for the button to be clickable
await page.getByRole('button', { name: 'Submit' }).click()

// No need for explicit waits — Playwright handles it
await expect(page.getByText('Order confirmed')).toBeVisible()

Contextes de navigateur : l'isolation sans surcoût

Playwright introduit les contextes de navigateur — des sessions de navigateur légères et isolées qui partagent un seul processus de navigateur. Chaque contexte dispose de ses propres cookies, de son propre stockage et de son propre cache :

// Create isolated contexts for parallel testing
const context1 = await browser.newContext()
const context2 = await browser.newContext()

// Each context is completely isolated
const adminPage = await context1.newPage()
const userPage = await context2.newPage()

Cela permet de tester des scénarios multi-utilisateurs (administrateur vs utilisateur standard) et d'exécuter des tests en parallèle sans le surcoût de lancer des instances de navigateur distinctes.

Prise en main

Installation et premier test

npm init playwright@latest

Cette commande génère un projet avec la configuration, des exemples de tests et des fichiers de workflow CI. Voici un test minimal :

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

test('user can log in', async ({ page }) => {
  await page.goto('/login')
  await page.getByLabel('Email').fill('[email protected]')
  await page.getByLabel('Password').fill('password123')
  await page.getByRole('button', { name: 'Sign in' }).click()

  await expect(page.getByText('Welcome back')).toBeVisible()
})

Codegen : enregistrer des tests visuellement

L'outil codegen de Playwright enregistre les interactions dans le navigateur et génère le code de test correspondant :

npx playwright codegen https://your-app.com

Cela ouvre un navigateur avec une barre d'outils d'enregistrement. Naviguez dans votre application, et Playwright génère le code de test correspondant, avec les bons locators et les bonnes assertions.

Trace viewer : déboguer visuellement les échecs

Lorsqu'un test échoue, le trace viewer propose une relecture étape par étape avec captures d'écran, snapshots du DOM, journaux réseau et sorties console :

npx playwright show-trace trace.zip

Chaque action est enregistrée avec des captures d'écran avant/après, ce qui rend triviale l'identification du moment où un test s'écarte du comportement attendu.

Interception réseau

Playwright peut intercepter et modifier les requêtes HTTP, ce qui ouvre la voie à des scénarios de test puissants :

// Mock an API response
await page.route('**/api/users', async (route) => {
  await route.fulfill({
    status: 200,
    body: JSON.stringify([{ id: 1, name: 'Test User' }]),
  })
})

// Simulate an error
await page.route('**/api/orders', async (route) => {
  await route.fulfill({ status: 500, body: 'Internal Server Error' })
})

// Simulate slow network
await page.route('**/*', async (route) => {
  await new Promise((resolve) => setTimeout(resolve, 3000))
  await route.continue()
})

Cela élimine le besoin d'un backend actif pendant les tests frontend et permet de tester de manière déterministe les états d'erreur, les états de chargement et les cas limites.

Intégration CI/CD

GitHub Actions

name: E2E Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/

Exécution parallèle

Playwright exécute les tests en parallèle par défaut, à l'aide de processus worker. Ajustez le niveau de parallélisme en fonction des ressources de votre CI :

// playwright.config.ts
export default defineConfig({
  workers: process.env.CI ? 4 : undefined,
  retries: process.env.CI ? 2 : 0,
  reporter: process.env.CI ? 'html' : 'list',
})

Sur un runner CI standard (4 CPU), une suite de 200 tests s'exécute en 2-3 minutes au lieu de 20 minutes et plus en exécution séquentielle.

Playwright vs Cypress vs Selenium

Choisissez Playwright si vous avez besoin de tests multi-navigateurs réels, de scénarios multi-onglets ou d'un support pour des langages autres que JavaScript.

Choisissez Cypress si votre équipe travaille exclusivement en JavaScript, que vos utilisateurs sont majoritairement sur Chromium, et que le tableau de bord Cypress Cloud vous intéresse.

Choisissez Selenium uniquement si vous disposez déjà d'une infrastructure Selenium ou si vous devez prendre en charge des configurations de navigateurs obsolètes.

Des tests end-to-end fiables et maintenables

Playwright supprime les frictions qui ont longtemps poussé les équipes à sous-investir dans les tests automatisés. Les auto-waits éliminent l'instabilité, le codegen abaisse la barrière à l'écriture de tests, et l'exécution parallèle garantit des retours rapides. Pour les équipes qui livrent des applications web modernes, Playwright est le framework de test qui tient enfin la promesse de tests end-to-end fiables et maintenables. Besoin d'aide pour structurer votre stratégie d'automatisation QA ? Discutons-en.