Introduction

Playwright est un framework open-source de Microsoft pour l'automatisation de navigateurs, surpassant Selenium par sa vitesse et sa fiabilité. En 2026, il supporte Chromium, Firefox et WebKit nativement, avec une API intuitive pour des tests end-to-end (E2E) robustes. Pourquoi l'utiliser ? Il gère les contextes isolés, les émulations mobiles et les tests parallèles sans flakiness excessive, réduisant les faux positifs de 80 % par rapport aux outils legacy.

Ce tutoriel beginner vous emmène des bases à des tests actionnables : installation, configuration, interactions page et assertions. À la fin, vous aurez un projet testable sur une page HTML simple, prêt à scaler. Imaginez tester un formulaire de login en 10 lignes de code au lieu de configurations complexes – c'est la puissance de Playwright. (132 mots)

Prérequis

Node.js 20+ installé
Connaissances basiques en JavaScript/TypeScript
Un éditeur comme VS Code
Git pour versionner (optionnel)

Initialiser le projet et installer Playwright

terminal

mkdir playwright-demo
cd playwright-demo
npm init -y
npm install -D @playwright/test
type "npx playwright install" && npx playwright install

Cette commande crée un dossier projet, initialise npm et installe Playwright comme dépendance de dev. npx playwright install télécharge les binaires des navigateurs (Chromium par défaut). Évitez d'oublier cette étape : sans elle, les tests échouent avec 'browser not found'.

Comprendre la structure du projet

Après installation, Playwright génère un dossier tests/ avec example.spec.ts. Créez aussi tests/demo.html pour nos exemples :

``html Demo

`Playwright Demo`


  
  
  Résultat ici

Servez-le localement avec npx serve .` sur http://localhost:3000.

Configurer Playwright

playwright.config.ts

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
});

Ce fichier centralise la config : dossier tests, reporters HTML pour rapports visuels, baseURL pour URLs relatives, et un projet Chromium. trace: 'on-first-retry' capture vidéos/screenshots sur échecs. Piège : sans baseURL, chaque page.goto() doit être absolu, alourdissant le code.

Premier test : navigation basique

tests/first.spec.ts

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

test('navigation basique', async ({ page }) => {
  await page.goto('/demo.html');
  await expect(page).toHaveTitle(/Demo/);
  await expect(page.locator('h1')).toHaveText('Playwright Demo');
});

Ce test navigue vers la page, vérifie le titre et le h1 avec des assertions. expect(page) teste le document entier ; locator cible précisément. Fonctionnel seul : copiez-collez et lancez. Évitez page.waitForLoadState() ici, car expect attend implicitement.

Exécuter les premiers tests

Astuce : Lancez npx playwright test pour tous les tests, ou npx playwright test first.spec.ts pour un seul. Ouvrez playwright-report/index.html pour un dashboard interactif avec vidéos et traces.

Test d'interactions : click et input

tests/interactions.spec.ts

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

test('interactions utilisateur', async ({ page }) => {
  await page.goto('/demo.html');

  const button = page.locator('#btn');
  const input = page.locator('#input');
  const result = page.locator('#result');

  await button.click();
  await input.fill('Test Playwright');
  await input.press('Enter');

  await expect(result).toHaveText('Test Playwright cliqué!');
});

Simule un clic, saisie et Enter sur des éléments. locator('#id') est robuste aux changements DOM. Ajoutez await result.toContainText('...') pour flexibilité. Piège : sans press('Enter'), les événements key ne se déclenchent pas, cassant les validations JS.

Test avec assertions avancées

tests/assertions.spec.ts

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

test('assertions avancées', async ({ page }) => {
  await page.goto('/demo.html');

  await expect(page.locator('#btn')).toBeVisible();
  await expect(page.locator('#input')).toBeEnabled();

  await page.locator('#input').fill('Hello');
  await expect(page.locator('#input')).toHaveValue('Hello');

  await expect(page).toHaveScreenshot('demo-page.png');
});

Vérifie visibilité, état et valeur input, plus un screenshot pixel-perfect. toHaveScreenshot capture et compare images. Générez baselines avec test --update-snapshots. Attention : écrans haute DPI cassent les snapshots ; forcez viewport dans config.

Test multi-navigateurs

playwright.config.ts

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

Ajoute Firefox et WebKit aux projets pour tests cross-browser parallèles. Lancez npx playwright test --project=chromium pour cibler. Piège : comportements JS varient (ex: Safari sans userAgent), testez devices['iPhone 12'] pour mobile.

Lancer les tests en mode UI

terminal

npx playwright test --ui
npx playwright test --headed --slow-mo=500
npx playwright show-trace tests/interactions.spec.ts/1/trace.zip

--ui ouvre un dashboard interactif pour debug. --headed montre le navigateur, --slow-mo ralentit pour observer. show-trace rejoue les échecs. Parfait pour débutants : visualisez step-by-step sans logs obscurs.

Bonnes pratiques

Utilisez des locators textuels : page.getByText('Cliquez-moi') au lieu de CSS fragiles.
Fixtures personnalisées : Créez test.extend({ user: async ({}, use) => { ... } }) pour setups réutilisables.
Tests isolés : Un test = une feature ; utilisez test.describe pour suites logiques.
Gestion d'erreurs : Ajoutez test.skip(condition) et test.fail() conditionnels.
CI/CD : Intégrez avec GitHub Actions via playwright-github-action.

Erreurs courantes à éviter

Serveur non lancé : Toujours démarrer npx serve avant tests ; sinon timeout sur goto.
Selectors instables : Évitez page.click('button:nth-child(2)') ; préférez getByRole('button', { name: /text/ }).
Timeouts par défaut : Augmentez expect({ timeout: 10000 }) pour pages lentes, mais analysez les causes.
Oubli des browsers : npx playwright install --with-deps sur Linux pour libs système.

Pour aller plus loin

Docs officielles : playwright.dev
Avancé : Tests API avec request fixture, composant testing avec @playwright/experimental-ct-react.
Formations : Découvrez nos formations QA automation chez Learni pour masteriser Playwright en prod.
Repo exemple : Clonez ce tuto sur GitHub pour expérimenter.

Comment démarrer avec Playwright en 2026