Angular
Tests E2E • Module 5

Tests End-to-End (E2E) dans Angular

Tester le comportement réel de l'application depuis la perspective de l'utilisateur final avec Playwright et Cypress.

🎭
Playwright (Recommandé)

Créé par Microsoft, ultra-rapide, exécute les tests en parallèle sur Chromium, Firefox et WebKit. Supporte nativement les attentes automatiques (auto-waiting).

npx playwright test
🌲
Cypress

Interface visuelle interactive complète avec time-travel debugging. Idéal pour voir chaque étape du test s'exécuter pas-à-pas dans le navigateur.

npx cypress open
Scénario E2E Playwright pour une App Angular
import { test, expect } from '@playwright/test';

test.describe('Parcours d\'authentification', () => {
  test('un utilisateur peut se connecter et voir son dashboard', async ({ page }) => {
    // 1. Accès à la page d'accueil
    await page.goto('http://localhost:4200/');

    // 2. Navigation vers la connexion
    await page.click('text=Se connecter');
    await expect(page).toHaveURL(/.*exemple-de-protection/);

    // 3. Remplissage du formulaire
    await page.fill('input[type="email"]', 'etudiant@learnweb.fr');
    await page.fill('input[type="password"]', 'Secret123!');
    await page.click('button[type="submit"]');

    // 4. Assertion de succès
    await expect(page.locator('.welcome-banner')).toContainText('Bienvenue');
    await expect(page.locator('text=Dashboard')).toBeVisible();
  });
});
Règles d'or des tests E2E
Privilégiez les sélecteurs orientés utilisateur (getByRole, getByText) plutôt que les classes CSS mouvantes.
Réservez les tests E2E aux parcours critiques (parcours d'achat, login, inscription).