Angular Academy · Lektion

Überblick über E2E-Tests

Die Rolle von End-to-End-Tests verstehen

Überblick über E2E-Tests ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was End-to-End-Tests bedeuten

End-to-End-Tests (E2E) führen Ihre Anwendung so aus, wie es ein echter Benutzer tut: Sie starten die App in einem echten Browser, navigieren zu Seiten, klicken auf Schaltflächen, geben Text in Formulare ein und überprüfen, was sichtbar ist. Sie verifizieren, dass der gesamte Stack zusammenspielt, nicht nur eine einzelne Unit.

Die Testpyramide

Eine gesunde Testsuite enthält viele schnelle Unit-Tests, weniger Integrationstests und eine kleine Anzahl langsamer, aber besonders wertvoller E2E-Tests. E2E-Tests stehen an der Spitze: Sie bieten die meiste Abdeckung pro Test, sind aber auch am aufwendigsten auszuführen und zu warten.

Unit: eine Funktion oder Komponente isoliert
Integration: mehrere Units zusammen
E2E: die laufende Anwendung von Anfang bis Ende

Was E2E-Tests aufdecken, das Unit-Tests übersehen

E2E-Tests finden Probleme, die erst sichtbar werden, wenn echte Teile zusammenspielen: Fehler beim Routing, eine fehlerhafte API-Integration, ein fehlendes DOM nach einem Deployment, CSS, das eine Schaltfläche verbirgt, oder eine Schleife bei der Authentifizierungsweiterleitung. Unit-Tests mit simulierten Abhängigkeiten können erfolgreich sein, obwohl die echte Anwendung fehlerhaft ist.

Die E2E-Geschichte von Angular

Ältere Angular-Versionen lieferten Protractor für E2E-Tests mit. Protractor wurde als veraltet markiert und aus neuen Projekten entfernt. Heute können Sie mit der Angular CLI einen E2E-Runner eines Drittanbieters auswählen; Playwright und Cypress sind die beliebtesten Optionen.

Warum Playwright

Playwright ist ein modernes, schnelles E2E-Framework von Microsoft. Es steuert Chromium, Firefox und WebKit, wartet automatisch auf Elemente, isoliert Tests mit neuen Browserkontexten und bietet hervorragende Debugging-Werkzeuge. Dieser Kurs verwendet Playwright.

Playwright zu Angular hinzufügen

Sie können Playwright mit dem zugehörigen Installer einrichten. Dieser erstellt eine playwright.config.ts und einen Ordner mit Beispieltests.

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

Aufbau eines E2E-Tests

Ein E2E-Test startet die Anwendung, führt Benutzeraktionen aus und überprüft die Seite. Der Ablauf ist: Arrange (navigieren), Act (interagieren), Assert (sichtbares Ergebnis überprüfen).

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

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

E2E läuft gegen einen echten Server

E2E-Tests benötigen eine tatsächlich laufende Angular-Anwendung. Typischerweise startet die Konfiguration ng serve (oder stellt einen Production-Build bereit) und verweist die Tests über baseURL und einen webServer-Eintrag auf diese URL.

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

E2E-Suites klein und kritisch halten

Da E2E-Tests langsam und fehleranfällig sein können, sollten Sie nur kritische Benutzerabläufe abdecken: Anmeldung, Checkout und den wichtigsten Erfolgsfall. Verlagern Sie detaillierte Randfälle in Unit- und Integrationstests, wo sie schneller und zuverlässiger ausgeführt werden.

Fehleranfälligkeit und Determinismus

Die größte Herausforderung bei E2E-Tests ist die Fehleranfälligkeit – Tests schlagen nur gelegentlich fehl. Vermeiden Sie feste sleep-Verzögerungen und verlassen Sie sich auf die automatische Wartefunktion von Playwrights Assertions. Kontrollieren Sie die Testdaten, damit jeder Durchlauf mit einem bekannten Zustand beginnt.

E2E- und Komponententests

Angular-Komponententests (TestBed) überprüfen eine Komponente in einer simulierten Umgebung. E2E-Tests prüfen die bereitgestellte Anwendung in einem echten Browser. Sie ergänzen sich: Verwenden Sie TestBed für schnelle Logik- und DOM-Prüfungen und E2E-Tests, um sicherzustellen, dass das gesamte Produkt funktioniert.

Kurze Überprüfung

Wodurch unterscheiden sich E2E-Tests von Unit-Tests?

Zusammenfassung

E2E-Tests führen die gesamte Anwendung in einem echten Browser aus und finden Integrations- und Routingfehler, die Unit-Tests übersehen. Sie stehen an der Spitze der Testpyramide: wenige, langsame, aber besonders wertvolle Tests. Angular-Projekte verwenden heute Runner wie Playwright, die Ihren Server starten und kritische Benutzerabläufe ausführen.

Häufig gestellte Fragen

Ist die Lektion „Überblick über E2E-Tests“ kostenlos?

Ja — der vollständige Text von „Überblick über E2E-Tests“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Überblick über E2E-Tests“?

Die Rolle von End-to-End-Tests verstehen Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Überblick über E2E-Tests“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy