Angular Playwright Test-Coverage

Intro

Das ist eine Step-by-Step-Beschreibung, wie ich aktuell (2025-09-18) Playwright-Test-Coverage in Angular-Projekten erzeuge, ohne Webpack-Instrumentation.

In der Vergangenheit habe ich für UI-E2E-Tests die coverage-istanbul-loader-Instrumentation mit Webpack implementiert. Am Ende merge ich die Coverage der Karma-Tests mit der Coverage der Playwright-Tests (daran ändert sich nichts).

Mein Demo-Projekt liegt auf GitHub: https://github.com/brabenetz/angular-playwright-coverage Für die Git-History habe ich versucht, meine Schritte möglichst deutlich darzustellen:

Das Projekt startet mit “ng-new” und endet mit einem gemergten Test-Coverage-Report (Karma & Playwright), welcher über GitHub Actions gepublished wird.

Für weitere Details kann man die Quellen durchlesen:

Quellen

Instrument Angular App

Nichts zu tun hier! Solange die App eine Source-Map liefert (z. B. mit ng serve), kann der Chrome-Browser die Coverage erzeugen.

Optional: test-utils.ts

In meinen Projekten verwende ich eine kleine test-utils.ts-Implementierung:

https://github.com/brabenetz/angular-playwright-coverage/commit/d797c1f8b12b1171076ab118c624619ca0b9f12a#diff-5492cfef1eea58c4dfdff5ef63d244e5321d94baeb49ec03b7b2e6093121985b

  1. Erstellen eines Screenshots und Anhängen an den Test-Report
  2. Vergleich des aktuellen Screenshots mit einem Referenz-Screenshot

(i) Der Vergleich mit einem Referenz-Screenshot funktioniert nur lokal (hauptsächlich wegen unterschiedlicher OS-Schriftarten), deshalb ist es gut, den Vergleich nur auszuführen, wenn man den ENV-Flag ‘SCREENSHOT_VALIDATION=true’ gesetzt hat.
Trotzdem ist der Screenshot-Vergleich nützlich bei jeder größeren Änderung oder einfach nur bei Library-Updates: Vor dem Update Referenzergebnisse generieren und nach dem Update den aktuellen Stand mit den alten Screenshots vergleichen.

Dependencies und Package-Scripts

https://github.com/brabenetz/angular-playwright-coverage/commit/d797c1f8b12b1171076ab118c624619ca0b9f12a#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519

Ich füge im package.json immer vier Scripts hinzu, die ich öfter benutze:

  • playwright:test-ui: Startet die Playwright UI.
  • playwright:test-ui-with-screenshots: Startet die Playwright UI mit Screenshot-Vergleich. In der Playwright UI werden Screenshot-Unterschiede besonders deutlich dargestellt.
  • playwright:test-all: Führt die Playwright-Tests auf der Console aus => Das wird auch von der CI verwendet.
  • playwright:test-update: Zum Update der Referenz-Screenshots => Sollte vor jeder größeren Änderung ausgeführt werden.

Dann brauche ich noch zwei Libraries:

  • monocart-reporter Das Wichtigste, um die Coverage generieren zu können
  • cross-env: Optional, um die Environment-Variable zu setzen, die in test-utils.ts verwendet wird.

Anpassung der Karma für Coverage

Karma unterstützt bereits einfache Konfigurationen für Coverage:

https://github.com/brabenetz/angular-playwright-coverage/commit/d00bdfb318d402903014e83957084e7478f36954#diff-25bdb46a5428d318648ec9eb46a99c0268d8c96b672c46e2247a685bc3e384fb

  • Im karma.conf.js:
    • Die Coverage sollte im Verzeichnis coverage/karma landen.
    • In den Reporters muss man ‘json’ hinzufügen. (‘lcovonly’ ist nur als Beispiel dabei).
  • Im package.json: Beim Ausführen der Tests muss man --code-coverage=true hinzufügen.

Anpassung der playwright.config.ts

https://github.com/brabenetz/angular-playwright-coverage/commit/d797c1f8b12b1171076ab118c624619ca0b9f12a#diff-f679bf1e58e8dddfc6cff0fa37c8e755c8d2cfc9e6b5dc5520a5800beba59a92

In der Playwright-Config ist das Wichtigste, dass man den monocart-reporter hinzufügt. Für das Mergen der Coverage-Daten mit Karma-Coverage braucht man den ‘json’-Reporter.

Die Coverage sollte im Verzeichnis coverage/playwright landen.

Anpassung der Tests

https://github.com/brabenetz/angular-playwright-coverage/commit/d797c1f8b12b1171076ab118c624619ca0b9f12a#diff-693fac4ef68a358712eaea54434547b7cdd2eca27ce87c64f7943352f4571f74

In den Tests muss nur der Import ausgetauscht werden. Interessant sind die Files tests/_shared/app-fixtures.ts und tests/_shared/fixtures/v8-code-coverage.ts, die stattdessen verwendet werden.

Diese zwei Files stammen vom Monocart-Reporter-Beispiel-Projekt: https://github.com/edumserrano/playwright-adventures/blob/main/demos/code-coverage-with-monocart-reporter/tests/_shared/app-fixtures.ts

Zwischenergebnis Testen

Nachdem Karma-Coverage (mit npm run test) und Playwright-Coverage (mit npm run playwright:test-all) generiert wurden, sollte man die Reports im Coverage-Ordner sehen:

Wichtig sind die JSON-Files ‘coverage-karma.json’ & ‘coverage-playwright.json’: Diese müssen im nächsten Schritt zusammen gemergt werden.

Merge Coverage Reports

https://github.com/brabenetz/angular-playwright-coverage/commit/c83d5bb615b985994f0725a86eba5d87425ca4d0#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519

Den Merge teile ich auf drei Scripts auf:

  • coverage-collect: Kopiert die zwei JSON-Files in das Verzeichnis ‘coverage/tmp’
  • coverage-merge: Generiert Reports aus dem ‘coverage/tmp’-Verzeichnis
  • coverage-all: Ruft coverage-collect && coverage-merge auf.

Dann brauche ich noch zwei Libraries:

  • cpr: Plattformunabhängiger Copy-Befehl. Unterstützt rekursives Erstellen der Verzeichnisse.
  • nyc: Standard-Tool zum Erstellen von Coverage-Reports.

GitHub-Actions

Am Ende möchte man die Playwright-Reports auch in der CI nach jedem Build sehen. Am Beispiel von GitHub Actions würde das so aussehen: