Installer Playwright: Guide d'Installation Étape par Étape (2026)

Installer Playwright prend environ cinq minutes. Ce qui prend plus de temps, c'est comprendre ce que vous venez d'installer et pourquoi le projet ressemble à ça.

Ce qu'il vous faut avant de commencer

Une seule chose : Node.js. Vérifiez si vous l'avez déjà installé.

node --version
npm --version

Si vous obtenez des numéros de version (Node 18 ou plus, npm 9 ou plus), vous êtes prêt. Sinon, allez sur nodejs.org et téléchargez la version LTS. Installez-la, puis revenez ici.

Pas besoin d'installer un navigateur séparément. Playwright télécharge ses propres binaires de navigateur pendant la configuration : Chromium, Firefox et WebKit. Ceux-ci sont isolés des navigateurs installés sur votre système.

Créer votre projet

Choisissez un emplacement de dossier et lancez :

mkdir playwright-tests
cd playwright-tests
npm init playwright@latest

L'installateur pose cinq questions :

Do you want to use TypeScript or JavaScript? › TypeScript
Where to put your end-to-end tests? › tests
Add a GitHub Actions workflow? › false
Install Playwright browsers? › true

Choisissez TypeScript. C'est le standard professionnel et le support TypeScript de Playwright est excellent. Laissez le dossier de tests sur tests. Passez GitHub Actions pour l'instant (vous pouvez l'ajouter plus tard). Oui pour l'installation des navigateurs.

Le téléchargement des navigateurs prend 1 à 3 minutes selon votre connexion. Playwright télécharge Chromium, Firefox et WebKit, soit environ 300 Mo au total.

Ce qui a été installé

Après la configuration, votre projet ressemble à ça :

playwright-tests/
  tests/
    example.spec.ts        ← test d'exemple
  playwright.config.ts     ← configuration
  package.json             ← dépendances
  package-lock.json
  node_modules/            ← packages installés
  .gitignore               ← pré-configuré pour Playwright

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: {
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
  ],
});

Paramètres clés à comprendre :

node_modules/
playwright-report/
test-results/

Ne commitez pas ces dossiers. Ils sont volumineux et régénérés à chaque run.

Lancer le test d'exemple

Avant d'écrire quoi que ce soit, lancez ce qui vient avec l'installateur :

npx playwright test

Résultat :

Running 6 tests using 6 workers

  6 passed (8s)

Six tests parce que l'exemple s'exécute sur trois navigateurs × deux cas de test. Ouvrez le rapport :

npx playwright show-report

Un navigateur s'ouvre avec une répartition détaillée : quels tests ont tourné, combien de temps chacun a pris, quel navigateur, et des captures d'écran. Cliquez sur n'importe quel test pour le développer.

Configurer pour votre projet

Les valeurs par défaut sont correctes, mais deux changements améliorent le développement au quotidien. Ouvrez playwright.config.ts et ajoutez un baseURL :

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: 'https://lab.becomeqa.com',
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
  ],
});

Avec baseURL défini, les tests peuvent utiliser page.goto('/') au lieu de l'URL complète. Quand vous changez d'environnement (dev → staging → production), vous modifiez une seule ligne dans la config plutôt que chaque test.

Écrire votre premier vrai test

Supprimez le test d'exemple et créez tests/login.spec.ts :

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

test('user can log in', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('button', { name: 'Login' }).click();
  await page.getByLabel('Username').fill('admin@becomeqa.com');
  await page.getByLabel('Password').fill('testpass123');
  await page.getByRole('button', { name: 'Submit' }).click();

  await expect(page.getByText('My Travel Items')).toBeVisible();
});

Lancez uniquement ce fichier sur Chromium pour rester rapide :

npx playwright test tests/login.spec.ts --project=chromium

Résultat :

Running 1 test using 1 worker

  1 passed (3s)

Commandes CLI utiles

# Lancer tous les tests
npx playwright test

# Lancer un fichier spécifique
npx playwright test tests/login.spec.ts

# Lancer uniquement sur Chromium
npx playwright test --project=chromium

# Lancer en mode headed (le navigateur s'ouvre de façon visible)
npx playwright test --headed

# Lancer en mode debug (pause à chaque étape)
npx playwright test --debug

# Lancer les tests correspondant à un pattern de nom
npx playwright test --grep "login"

# Afficher le dernier rapport HTML
npx playwright show-report

# Ouvrir le mode UI interactif
npx playwright test --ui

Utiliser le générateur de code

Si vous n'êtes pas sûr du locator à utiliser pour un élément, laissez Playwright le générer pour vous :

npx playwright codegen https://lab.becomeqa.com

Un navigateur s'ouvre. Cliquez sur la page et Playwright enregistre vos actions et génère le code de test correspondant dans un panneau à droite. Ce n'est pas toujours parfait, mais c'est le moyen le plus rapide de trouver les locators sur lesquels vous n'êtes pas sûr.

Comprendre la structure du test

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

test('description de ce que ce test vérifie', async ({ page }) => {
  // votre code de test ici
});

Structure du projet en grandissant

La structure par défaut fonctionne pour quelques tests. Quand votre suite grandit :

playwright-tests/
  tests/
    auth/
      login.spec.ts
      logout.spec.ts
    items/
      items-list.spec.ts
  pages/              ← les classes Page Object vont ici
    LoginPage.ts
    DashboardPage.ts
  fixtures/           ← les fixtures custom vont ici
    auth.fixture.ts
  playwright.config.ts
  package.json

Commencez avec tests/ à plat. Ajoutez des sous-dossiers quand vous avez plus de 5 à 6 fichiers de test. Ajoutez pages/ quand vous commencez à répéter les mêmes locators dans plusieurs tests.

FAQ

Toujours la dernière. npm init playwright@latest s'en occupe. Playwright publie fréquemment et les changements incompatibles sont rares. Rester à jour est plus facile que de rattraper du retard.

Les deux fonctionnent. npm convient parfaitement pour l'apprentissage. Certaines équipes préfèrent pnpm pour l'efficacité d'espace disque en CI. Ne compliquez pas ça.

Lancez npx playwright install pour réessayer. Si un navigateur spécifique échoue, installez-le individuellement : npx playwright install chromium.

Non. Playwright est une bibliothèque Node.js. Des bindings Python, Java et .NET existent, mais ils nécessitent tous que le runtime correspondant soit installé.

Généralement une mauvaise configuration de baseURL ou un problème réseau. Ajoutez --timeout=10000 pour échouer plus vite pendant le débogage : npx playwright test --timeout=10000.