Angular Academy · Leçon

Présentation des tests de bout en bout

Comprenez le rôle des tests de bout en bout

Présentation des tests de bout en bout est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Ce que signifie le test de bout en bout

Les tests de bout en bout (E2E) exécutent votre application comme le ferait un véritable utilisateur : ils lancent l’application dans un vrai navigateur, parcourent les pages, cliquent sur des boutons, saisissent du texte dans des formulaires et vérifient ce qui est visible. Ils vérifient que toute la pile fonctionne ensemble, et pas seulement une unité.

La pyramide des tests

Une suite saine comporte de nombreux tests unitaires rapides, moins de tests d’intégration et un petit ensemble de tests E2E lents, mais à forte valeur. Les tests E2E se trouvent au sommet : ils offrent la couverture la plus importante par test, mais sont aussi les plus coûteux à exécuter et à maintenir.

Unitaire : une fonction ou un composant isolé
Intégration : plusieurs unités ensemble
E2E : l’application en fonctionnement, de bout en bout

Ce que les tests E2E détectent contrairement aux tests unitaires

Les tests E2E détectent les problèmes visibles uniquement lorsque de vrais éléments sont connectés : erreurs de routage, intégration d’API défaillante, DOM manquant après un déploiement, CSS qui masque un bouton ou boucle de redirection d’authentification. Les tests unitaires dont les dépendances sont simulées peuvent réussir alors que l’application réelle est défaillante.

Historique d’Angular et des tests E2E

Les anciennes versions d’Angular fournissaient Protractor pour les tests E2E. Protractor a été déprécié, puis supprimé des nouveaux projets. Aujourd’hui, le CLI Angular vous permet de choisir un exécuteur E2E tiers ; Playwright et Cypress sont les choix les plus populaires.

Pourquoi choisir Playwright

Playwright est un framework E2E moderne et rapide, créé par Microsoft. Il pilote Chromium, Firefox et WebKit, attend automatiquement les éléments, isole les tests dans de nouveaux contextes de navigateur et fournit d’excellents outils de débogage. Ce cours utilise Playwright.

Ajouter Playwright à Angular

Vous pouvez initialiser Playwright avec son propre programme d’installation. Celui-ci crée un fichier playwright.config.ts et un dossier contenant des tests d’exemple.

npm init playwright@latest
# creates playwright.config.ts and tests/ with example specs

Anatomie d’un test E2E

Un test E2E démarre l’application, effectue des actions utilisateur et vérifie la page. Le déroulement est le suivant : préparer (naviguer), agir (interagir), vérifier (contrôler le résultat visible).

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

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

Les tests E2E s’exécutent sur un serveur réel

Les tests E2E nécessitent que votre application Angular soit réellement en fonctionnement. Généralement, la configuration démarre ng serve (ou sert une version de production) et indique aux tests cette URL via baseURL et une entrée webServer.

// playwright.config.ts
export default {
  use: { baseURL: 'http://localhost:4200' },
  webServer: { command: 'ng serve', url: 'http://localhost:4200', reuseExistingServer: true },
};

Gardez les suites E2E réduites et essentielles

Comme les tests de bout en bout sont lents et peuvent être instables, limitez-les aux parcours utilisateur critiques : connexion, paiement et parcours nominal principal. Reportez les cas limites détaillés aux tests unitaires et d’intégration, où ils s’exécutent plus rapidement et de manière plus fiable.

Instabilité et déterminisme

Le principal défi des tests E2E est l’instabilité : des tests qui échouent de manière intermittente. Évitez les délais fixes avec sleep ; fiez-vous aux assertions à attente automatique de Playwright. Contrôlez les données de test afin que chaque exécution commence dans un état connu.

Tests E2E et tests de composants

Les tests de composants Angular (TestBed) vérifient un composant dans un environnement synthétique. Les tests E2E vérifient l’application déployée dans un vrai navigateur. Ils sont complémentaires : utilisez TestBed pour les vérifications rapides de la logique et du DOM, et les tests E2E pour vous assurer que tout le produit fonctionne.

Vérification rapide

Qu’est-ce qui distingue les tests E2E des tests unitaires ?

Récapitulatif

Les tests E2E exécutent toute l’application dans un vrai navigateur afin de détecter les problèmes d’intégration et de routage que les tests unitaires ne voient pas. Ils se situent au sommet de la pyramide des tests : peu nombreux, lents et à forte valeur. Les projets Angular utilisent désormais des exécuteurs tels que Playwright, qui démarrent votre serveur et pilotent les parcours utilisateur essentiels.

Questions Fréquemment Posées

La leçon « Présentation des tests de bout en bout » est-elle gratuite ?

Oui — le texte complet de « Présentation des tests de bout en bout » 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 « Présentation des tests de bout en bout » ?

Comprenez le rôle des tests de bout en bout 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 1 sur 4.

Combien de temps prend la leçon « Présentation des tests de bout en bout » ?

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