Mit Playwright Visual Comparisons effizienter eine sicherere Entwicklungsumgebung schaffen

Hintergrund und Problembewusstsein

• Frontend-Tests sind aufgrund von UI-Änderungen und unvorhersehbaren Benutzereingaben mit vielen Schwierigkeiten verbunden.
• Tests, die manuell von Menschen verifiziert werden, haben Grenzen, daher wurde die Einführung automatisierter Tests in Betracht gezogen.
• Bestehende auf Aufzeichnung basierende E2E-Tests (TestProject, Playwright) verursachen hohe Wartungskosten und sind anfällig für UI-Änderungen.

Einführung von Playwright Visual Comparisons

• Es wurde ein Verfahren für visuelle Regressionstests eingesetzt, das Veränderungen in der UI erkennt.
• Referenz-Screenshots werden gespeichert und nach Code-Änderungen verglichen, um Änderungen zu erkennen.
• Bildvergleiche sind in den Modi 2-up, Swipe, Highlight und Onion Skin möglich.

Wichtige Probleme während der Einführung und ihre Lösungen

1. Falsche Fehlschläge durch minimale Unterschiede (0,01 %)
   Problem: Je nach Testausführungsumgebung (OS, Browser, Display-Einstellungen usw.) treten Unterschiede beim Font-Rendering auf.
   Lösung: Mithilfe von Docker-Containern werden alle Tests in derselben Umgebung ausgeführt.

2. Screenshots müssen erst nach Abschluss des Datenladens aufgenommen werden
   Problem: Wenn ein Screenshot aufgenommen wird, bevor die Seite vollständig geladen ist, kann die Lade-UI mit erfasst werden.
   Lösung: Mit einer Utility-Funktion auf Basis von getByText + toBeVisible wird gewartet, bis ein bestimmter String erscheint.

3. Screenshot-Unterschiede durch animierte Elemente
   Problem: CSS-Animationen, Canvas-, SVG- und WebGL-Elemente werden jedes Mal zu unterschiedlichen Zeitpunkten erfasst, wodurch flaky tests entstehen.
   Lösung: Verschiedene Maßnahmen zur Deaktivierung von Animationen sowie zusätzliche Optimierungen für eine effizientere Testausführung

4. Unnötige Änderungserkennung durch Third-Party-Plugins (iframe usw.)
   Problem: Third-Party-Plugins wie Kundenfeedback, Umfragen oder Chatbots werden über iframe geladen und erzeugen visuelle Veränderungen.
   Lösung: Beim Erstellen von Screenshots werden iframe- und bestimmte Plugin-Elemente über gemeinsame CSS-Regeln ausgeblendet.

5. Fehlgeschlagene Prüfung unterer Elemente auf Seiten mit Scrollbereich
   Problem: toHaveScreenshot erfasst standardmäßig nur den aktuell sichtbaren Bereich, daher ist eine Behandlung von Scroll-Szenarien nötig.
   Lösung: Mit der Option fullPage: true wird die Aufnahme eines Screenshots der gesamten Seite konfiguriert.

Fazit

• Mit visuellen Regressionstests lässt sich die Erkennung von UI-Änderungen effektiv automatisieren.
• Es ist keine perfekte Lösung, verbessert aber sowohl die Entwicklungsproduktivität als auch die Stabilität der Tests.
• Kontinuierliche Verbesserungen und die Optimierung der Testumgebung bleiben erforderlich.