Angular Academy · Leçon

Écrire des tests Playwright

Automatisez les parcours du navigateur avec Playwright

Écrire des tests Playwright est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Votre premier test Playwright

Un test Playwright est une fonction asynchrone qui reçoit des éléments de test tels que page. Vous importez test et expect depuis @playwright/test et décrivez un scénario utilisateur.

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

test('opens the home page', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveURL(/.*localhost/);
});

L’élément de test page

L’objet page représente un seul onglet du navigateur. Chaque test reçoit un page nouveau et isolé dans un contexte vierge, de sorte que les tests ne partagent jamais accidentellement leurs cookies ou leur stockage.

Naviguer avec goto

page.goto(url) charge une URL et attend que la page soit prête. Avec baseURL dans la configuration, vous pouvez utiliser des chemins relatifs.

await page.goto('/login');      // resolves against baseURL
await page.goto('https://example.com'); // absolute also works

Trouver des éléments avec des locateurs

Un locateur est une référence différée à un élément, avec attente automatique. Préférez les locateurs sémantiques comme getByRole, getByLabel et getByText aux sélecteurs CSS fragiles.

const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');

Saisir du texte et cliquer

Utilisez fill pour définir les valeurs des champs de saisie et click pour appuyer sur les boutons. Playwright attend automatiquement que les éléments soient visibles et activés avant d’agir.

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

L’attente automatique élimine les pauses instables

Contrairement aux anciens outils, Playwright attend automatiquement que les éléments soient disponibles et que les assertions deviennent vraies. Vous n’avez presque jamais besoin de délais d’attente manuels, ce qui stabilise les tests.

// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();

Regrouper les tests avec describe

Utilisez test.describe pour regrouper les scénarios associés et partager la préparation avec beforeEach.

test.describe('Login flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('shows the form', async ({ page }) => {
    await expect(page.getByLabel('Email')).toBeVisible();
  });
});

Tester un parcours utilisateur complet

Enchaînez les actions pour modéliser un parcours complet. Chaque étape se lit comme un script décrivant le comportement de l’utilisateur.

test('user can log in and see dashboard', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('ada@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page).toHaveURL(/.*dashboard/);
});

Exécuter les tests

Exécutez toutes les spécifications depuis le CLI. Ajoutez --headed pour regarder le navigateur, ou --ui pour ouvrir l’exécuteur de tests interactif de Playwright.

npx playwright test
npx playwright test --headed
npx playwright test --ui

Déboguer les échecs

En cas d’échec, Playwright peut capturer des captures d’écran, des vidéos et une trace que vous pouvez rejouer étape par étape. Le visualiseur de traces affiche le DOM après chaque action, ce qui facilite le diagnostic des échecs instables.

npx playwright test --trace on
npx playwright show-trace trace.zip

L’isolation des tests est essentielle

Comme chaque test dispose de son propre contexte de navigateur, ne dépendez ni de l’ordre ni de l’état partagé entre les tests. Configurez les données nécessaires à chaque test dans son propre beforeEach ou directement dans le test.

Vérification rapide

Pourquoi éviter waitForTimeout ?

Récapitulatif

Un test Playwright utilise l’élément de test page : goto pour naviguer, des locateurs sémantiques (getByRole, getByLabel) pour trouver les éléments, et fill/click pour interagir. L’attente automatique élimine les pauses instables. Regroupez les tests avec describe, exécutez-les avec npx playwright test et déboguez-les avec les traces.

Questions Fréquemment Posées

La leçon « Écrire des tests Playwright » est-elle gratuite ?

Oui — le texte complet de « Écrire des tests Playwright » 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 Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Écrire des tests Playwright » ?

Automatisez les parcours du navigateur avec Playwright Tu pratiques Angular 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 Angular Academy ?

Aucune expérience préalable n'est requise. Angular 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 2 sur 4.

Combien de temps prend la leçon « Écrire des tests Playwright » ?

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 Angular Academy ?

Oui. Chaque leçon Angular 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

← Retour à Angular Academy