FrontMaster - Apprendre le Front-end Avance

Tests End-to-End

Scenarios realistes avec Cypress ou Playwright.

Les tests E2E (End-to-End) simulent le comportement reel d'un utilisateur dans le navigateur. Ils valident des parcours complets.

Cypress : Outil populaire, interface visuelle, temps reel. Execution dans un navigateur Chromium.

Playwright : Supporte Chrome, Firefox, Safari. Plus rapide, meilleur support multi-navigateurs. Recommande par Microsoft.

Bonnes pratiques : - Tester les parcours critiques (inscription, achat, navigation) - Utiliser des selecteurs stables (data-testid) - Eviter les tests fragiles (dependent du timing)

Exemple de code

e2e-test.spec.ts

typescript

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

// Test de parcours d'inscription
test("un utilisateur peut s'inscrire", async ({ page }) => {
  await page.goto("/register");

  // Remplir le formulaire
  await page.fill('[data-testid="email"]', "test@example.com");
  await page.fill('[data-testid="password"]', "SecureP@ss123");
  await page.fill('[data-testid="confirm"]', "SecureP@ss123");

  // Soumettre
  await page.click('[data-testid="submit-btn"]');

  // Verifier la redirection
  await expect(page).toHaveURL("/dashboard");
  await expect(
    page.locator('[data-testid="welcome-msg"]')
  ).toContainText("Bienvenue");
});

// Test de gestion d'erreur
test("affiche une erreur si le mot de passe est invalide", async ({ page }) => {
  await page.goto("/register");
  await page.fill('[data-testid="email"]', "test@example.com");
  await page.fill('[data-testid="password"]', "123");
  await page.click('[data-testid="submit-btn"]');

  await expect(
    page.locator('[data-testid="error-msg"]')
  ).toBeVisible();
});

A retenir

1Tests E2E simulent le comportement utilisateur reel
2Playwright supporte multi-navigateurs
3Utiliser data-testid pour des selecteurs stables
4Tester les parcours critiques et les cas d'erreur

Exercice pratique

Ecrire un test E2E Playwright

Ecrivez un test E2E avec Playwright qui teste le parcours de connexion d'un utilisateur :

1Aller sur la page /login

2Remplir le champ email (data-testid="email") avec "user@test.com"

3Remplir le champ mot de passe (data-testid="password") avec "Test1234!"

4Cliquer sur le bouton de soumission (data-testid="submit")

5Verifier que l'URL est devenue /dashboard