Die Tests aus 0401 laufen in jsdom. Ob die Seite im Browser zusammenspielt, zeigt erst ein Ende-zu-Ende-Test: Er startet die laufende Anwendung, bedient sie wie eine Person und prüft, was zu sehen ist. Diese Lektion schreibt den Test „Termin buchen“ und prüft die Seiten automatisch auf Barrierefreiheit. Playwright für .NET kennen Sie aus K2 2.7.7; hier ist es Playwright für TypeScript.

Stand der Prüfung. Gelaufen ist alles bis auf die Anmeldung: In einer Kopie des Projekts aus 0401 (Angular 22.2, Node 24.22.3) liefen ng add playwright-ng-schematics (22.1.4), npx playwright install chromium, ng e2e und npx playwright test gegen ng serve (@playwright/test 1.65.0, @axe-core/playwright 4.14.0), nur mit Chromium. Ergebnis der Lösung: ng e2e Exit-Code 0, 3 Tests; ng test --no-watch danach Exit-Code 0, 8 Tests. Die Fehlerbilder (Zeitüberschreitung bei getByLabel, die drei Funde von axe) sind Ausgaben dieser Läufe. Die Seite Buchung ist eine Minimalfassung; Ihre aus 0204 weicht ab. Die Antwort von GET /api/booking/slots?day= ist hier als Liste von Zeiten (ISO 8601 mit Versatz) angenommen: Stand K2 prüfen. Nicht ausgeführt: Firefox, WebKit, die echte API, jede Anmeldung mit Entra ID, ein Screenreader, die Handprobe. Aussagen über Playwright stammen von playwright.dev („Authentication“, „Accessibility testing“), über ng e2e von angular.dev (am Schreibtag gelesen).

Playwright einbauen

ng e2e hat nach angular.dev keinen eigenen Läufer: Gibt es kein Ziel e2e, fragt die CLI, welches Paket Sie wollen (Playwright, Cypress, Nightwatch, WebdriverIO, Puppeteer); der Cursor steht auf „No“, es gibt keine Vorgabe. Für Playwright nennt die Seite ng add playwright-ng-schematics. Das Paket (Apache-2.0 laut Registry, verlangt Angular 22) pflegt ein Dritter. Der Lauf in der Kopie schrieb unter anderem:

CREATE playwright.config.ts (1933 bytes)
CREATE e2e/example.spec.ts (208 bytes)
UPDATE angular.json (2484 bytes)
UPDATE package.json (927 bytes)

In angular.json steht danach ein Ziel e2e mit dem Builder playwright-ng-schematics:playwright und devServerTarget: "kladde-angular:serve": ng e2e startet also selbst den Dev-Server und führt dann die Tests aus. Die erzeugte Konfiguration kennt drei Browser; in der Kladde bleibt zunächst einer (projects kürzen), geladen mit npx playwright install chromium. Ist CI gesetzt, wiederholt die Vorlage fehlgeschlagene Tests zweimal und nutzt einen Prozess: in der Pipeline gewollt, lokal störend. e2e/example.spec.ts wartet auf den Titel „MyApp“: Löschen Sie ihn. ng test greift die Dateien in e2e/ nicht auf.