0Pricing
React Academy · Leçon

Premiers pas avec Playwright pour React

Écrivez des tests Playwright qui ouvrent un navigateur, interagissent avec l’application React et vérifient les résultats.

Premiers pas avec Playwright pour React est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Qu’est-ce que Playwright ?

Playwright est un framework de tests E2E pour Node.js qui pilote les navigateurs Chromium, Firefox et WebKit réels. Il est idéal pour tester les parcours complets d’une application React, notamment le routage, l’authentification et les interactions avec l’API.

Installation

Installez Playwright et les binaires de ses navigateurs à l’aide d’une seule commande.

# npm init playwright@latest
# or
# npx playwright install

# playwright.config.ts is created automatically

Configuration de Playwright pour React

Configurez Playwright pour démarrer votre serveur de développement avant d’exécuter les tests.

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

export default defineConfig({
  testDir: './e2e',
  use: { baseURL: 'http://localhost:5173' },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

Écrire votre premier test

Les tests utilisent page, un objet représentant une page du navigateur. Accédez à une URL, interagissez avec les éléments et vérifiez le résultat.

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

test('home page shows heading', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});

Localisateurs

Les localisateurs de Playwright sont similaires aux requêtes RTL. Privilégiez les localisateurs fondés sur les rôles pour une meilleure robustesse.

// By role
const button = page.getByRole('button', { name: 'Submit' });
// By label
const input = page.getByLabel('Email address');
// By text
const link = page.getByText('Sign in');
// By placeholder
const search = page.getByPlaceholder('Search products');

Cliquer et saisir du texte

Interagissez avec les éléments en utilisant click(), fill(), press() et selectOption().

await page.getByLabel('Email').fill('user@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Log in' }).click();

Attendre une navigation

Playwright attend automatiquement que les éléments soient prêts, mais vous pouvez attendre explicitement la fin d’une navigation ou de requêtes réseau.

// Wait for URL to change after form submit
await page.waitForURL('/dashboard');

// Wait for a specific request
const [response] = await Promise.all([
  page.waitForResponse('/api/users'),
  page.click('button[type="submit"]'),
]);

Vérifications

Utilisez expect(locator) avec les comparateurs intégrés de Playwright. Ils attendent automatiquement que la condition soit vraie.

await expect(page.getByRole('heading')).toHaveText('Dashboard');
await expect(page.getByTestId('user-count')).toContainText('5 users');
await expect(page.getByRole('button', { name: 'Delete' })).toBeDisabled();
await expect(page).toHaveURL('/success');

Capturer des captures d’écran en cas d’échec

Playwright capture automatiquement des captures d’écran et des traces en cas d’échec d’un test lorsque cette option est configurée. Activez-la dans la configuration.

use: {
  screenshot: 'only-on-failure',
  trace: 'retain-on-failure',
  video: 'retain-on-failure',
}

Exécuter les tests

Exécutez tous les tests en mode sans interface graphique, ou utilisez --ui pour ouvrir l’explorateur de tests interactif, qui vous permet de parcourir visuellement les tests étape par étape.

# Run all tests
npx playwright test

# Run with UI mode
npx playwright test --ui

# Run a specific file
npx playwright test e2e/login.spec.ts

# Debug mode
npx playwright test --debug

Visionneuse de traces Playwright

Lorsqu’un test échoue, ouvrez le fichier de trace avec npx playwright show-trace pour rejouer le test étape par étape avec des captures d’écran, des requêtes réseau et les journaux de la console.

Intégration CI

Par défaut, Playwright s’exécute en mode sans interface graphique dans la CI. Installez les navigateurs avec npx playwright install --with-deps, puis exécutez les tests comme un script npm normal.

# .github/workflows/e2e.yml
- name: Install Playwright Browsers
  run: npx playwright install --with-deps
- name: Run Playwright tests
  run: npx playwright test

Vérification rapide

Quelle méthode Playwright devez-vous utiliser pour remplir un champ de saisie de texte ?

Récapitulatif

Les tests Playwright utilisent de vrais navigateurs et attendent automatiquement que les éléments soient prêts. Utilisez des localisateurs fondés sur les rôles, fill() et click() pour les interactions, expect(locator) pour les vérifications, et le mode --ui pour le débogage visuel pendant le développement.

Questions Fréquemment Posées

La leçon « Premiers pas avec Playwright pour React » est-elle gratuite ?

Oui — le texte complet de « Premiers pas avec Playwright pour React » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Premiers pas avec Playwright pour React » ?

Écrivez des tests Playwright qui ouvrent un navigateur, interagissent avec l’application React et vérifient les résultats. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Premiers pas avec Playwright pour React » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Tests d’intégration avec React Testing Library
  2. Tester l’interface asynchrone et les appels d’API avec MSW
  3. Premiers pas avec Playwright pour React
  4. Tester les formulaires et les parcours utilisateur de bout en bout
← Retour à React Academy