Angular Academy · Leçon

Intégration continue

Exécutez les tests de bout en bout dans l’intégration continue

Intégration continue est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Pourquoi exécuter les tests E2E dans l’intégration continue

Les tests E2E sont particulièrement utiles lorsqu’ils s’exécutent automatiquement à chaque envoi ou demande d’intégration. L’intégration continue (CI) détecte les régressions avant leur fusion, afin qu’un parcours de connexion défaillant n’atteigne jamais la production sans être remarqué.

Ce dont la CI a besoin pour exécuter les tests E2E

La tâche de la CI doit installer les dépendances, installer les navigateurs Playwright, compiler ou servir l’application Angular, puis exécuter les tests en mode sans interface graphique. Les machines de CI n’ont pas d’écran, les tests s’exécutent donc par défaut en mode sans interface graphique.

Installer les navigateurs dans la CI

Les navigateurs ne sont pas validés dans votre dépôt. Installez-les dans le pipeline avec le programme d’installation de Playwright, y compris les dépendances du système d’exploitation.

npm ci
npx playwright install --with-deps

Laisser Playwright démarrer l’application

La configuration webServer indique à Playwright de lancer votre application avant les tests et de l’arrêter ensuite. Dans la CI, définissez reuseExistingServer: false afin de toujours démarrer un serveur vierge.

// playwright.config.ts
export default {
  webServer: {
    command: 'ng serve --configuration production',
    url: 'http://localhost:4200',
    reuseExistingServer: !process.env.CI,
  },
};

Un flux de travail GitHub Actions

Un flux de travail classique récupère le code, configure Node, installe les dépendances et les navigateurs, puis exécute la suite de tests.

# .github/workflows/e2e.yml
name: e2e
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test

Options du mode sans interface graphique et de la CI

Playwright détecte automatiquement la CI grâce à la variable d’environnement CI et s’adapte : il réessaie les tests échoués, interdit test.only et utilise les processus de travail supplémentaires avec prudence. Vous pouvez également définir explicitement le nombre de tentatives.

export default {
  retries: process.env.CI ? 2 : 0,
  forbidOnly: !!process.env.CI,
};

Publier le rapport HTML

Playwright produit un rapport HTML. Téléversez-le en tant qu’artefact de CI afin de pouvoir examiner les échecs après l’exécution, notamment les traces et les captures d’écran.

      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/

Capturer les traces en cas d’échec

Configurez les traces pour qu’elles soient enregistrées uniquement lors de la première nouvelle tentative. Les exécutions restent ainsi rapides tout en vous fournissant une relecture complète de chaque échec pour le débogage.

export default {
  use: { trace: 'on-first-retry', screenshot: 'only-on-failure' },
};

Répartir les tests pour accélérer l’exécution

Les suites volumineuses peuvent être réparties entre plusieurs machines exécutées en parallèle avec --shard. Chaque tâche de CI exécute une partie de la suite, ce qui réduit la durée totale d’exécution.

npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3

Utiliser la mise en cache pour accélérer la CI

Mettez en cache node_modules et les fichiers binaires des navigateurs Playwright entre les exécutions afin que les installations ne dominent pas la durée de compilation. La plupart des fournisseurs de CI proposent une action de mise en cache indexée sur votre fichier de verrouillage.

Faire échouer correctement la compilation

Playwright se termine avec un code différent de zéro lorsqu’un test échoue, ce qui permet à la CI de signaler la tâche en rouge et de bloquer la fusion. N’ignorez pas ce code de sortie avec || true, sinon les tests défaillants réussiront silencieusement.

Vérification rapide

Qu’est-ce qui installe les navigateurs dans la CI ?

Récapitulatif

Exécutez les tests E2E à chaque envoi en installant les dépendances et les navigateurs (playwright install --with-deps), en laissant webServer démarrer l’application et en exécutant les tests sans interface graphique avec des nouvelles tentatives adaptées à la CI. Téléversez le rapport HTML et les traces comme artefacts, répartissez les tests pour accélérer l’exécution et laissez le code de sortie différent de zéro bloquer les fusions problématiques.

Questions Fréquemment Posées

La leçon « Intégration continue » est-elle gratuite ?

Oui — le texte complet de « Intégration continue » 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 « Intégration continue » ?

Exécutez les tests de bout en bout dans l’intégration continue 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 4 sur 4.

Combien de temps prend la leçon « Intégration continue » ?

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