Konzepte des Visual-Regression-Tests

Visuelles Regressionstesten (VRT) erkennt automatisch unbeabsichtigte visuelle Änderungen zwischen Codeversionen, indem gerenderte Screenshots Pixel für Pixel verglichen werden. Es findet CSS-Regressionen wie Verschiebungen im Layout, Farbänderungen und fehlerhafte Abstände, die Unit-Tests vollständig übersehen.

VRT erstellt zunächst Referenz-Screenshots von Komponenten oder Seiten. Nach Codeänderungen werden neue Screenshots erstellt und verglichen. Unterschiede werden in einem Differenzbild hervorgehoben. Entwickler prüfen diese Unterschiede und bestätigen entweder beabsichtigte Änderungen oder beheben unbeabsichtigte Regressionen.

Beim Pixelvergleich werden Bilder Pixel für Pixel verglichen. Er reagiert empfindlich auf Unterschiede, erzeugt aber durch Antialiasing und Subpixel-Rendering leicht Fehlalarme. Tools für strukturelle Vergleiche (Applitools AI) vergleichen die visuelle Absicht statt exakter Pixel und reduzieren so Fehlalarme durch unterschiedliche Schriftwiedergabe.

Bestätigte Screenshots werden zur neuen Referenz. Speichern Sie Referenzen in der Versionsverwaltung (bei großen Bildern mit Git LFS) oder in einem dedizierten Cloud-Dienst. Jeder Pull Request zeigt die Unterschiede zur Referenz, und Maintainer bestätigen oder verwerfen visuelle Änderungen als Teil des Reviews.

VRT-Tests auf Komponentenebene testen einzelne UI-Komponenten isoliert, beispielsweise mit Storybook. VRT-Tests auf Seitenebene testen vollständige Seiten in einem echten Browser. Komponententests sind schneller und gezielter; Seitentests erkennen Layoutprobleme auf Integrationsebene zwischen Komponenten.

Testen Sie alle visuellen Zustände: Standard, Hover, Fokus, aktiv, deaktiviert, Laden, Fehler, leer und vollständig. Für Hover-Zustände ist eine Simulation mit JavaScript erforderlich (page.hover() in Playwright). Eine unvollständige Zustandsabdeckung erzeugt blinde Flecken bei Regressionen in interaktiven Zuständen.

Erstellen Sie Screenshots in mehreren Browsern (Chrome, Firefox, Safari) und Viewports (Mobilgerät, Tablet, Desktop). Unterschiede bei der Browserdarstellung können Fehlalarme verursachen. Verwenden Sie browserbezogene Referenzen und konfigurieren Sie Differenzschwellen, um bekannte Darstellungsabweichungen zu tolerieren.

Die Schriftwiedergabe unterscheidet sich je nach Kombination aus Betriebssystem, Browser und GPU geringfügig. Verwenden Sie konsistente CI-Umgebungen (Docker und eine bestimmte Chrome-Version), um umgebungsbedingte Fehlalarme zu vermeiden. Cloud-VRT-Dienste stellen die Konsistenz der Umgebung automatisch sicher.

Dynamische Inhalte wie Zeitstempel, Benutzeravatare, Anzeigen und Zufallsdaten verursachen Fehlalarme. Maskieren Sie dynamische Bereiche vor der Screenshot-Aufnahme mit einer einfarbigen Überlagerung. Die meisten VRT-Tools unterstützen Elementselektoren zum Maskieren.

Führen Sie VRT bei jedem Pull Request in CI aus. Lassen Sie den Build fehlschlagen, wenn nicht bestätigte visuelle Unterschiede erkannt werden. Leiten Sie die visuellen Unterschiede auch an Design-Reviewer weiter und nicht nur an das Entwicklungsteam – visuelle Änderungen sind ebenso eine Design- wie eine Entwicklungsfrage.

VRT bietet den höchsten Return on Investment in Komponentenbibliotheken und Designsystemen, in denen visuelle Konsistenz ein Produktmerkmal ist. Bei häufig geänderten Marketingseiten können die Kosten für die Pflege der Referenzen den Nutzen der Regressionserkennung übersteigen.

Warum erzeugen visuelle Regressionstests durch Unterschiede bei der Schriftwiedergabe Fehlalarme?

Visuelle Regressionstests erkennen Regressionen bei CSS und Layout, indem sie Screenshots über verschiedene Codeversionen hinweg vergleichen. Effektive VRT erfordert konsistente Umgebungen, eine umfassende Zustandsabdeckung, die Maskierung dynamischer Inhalte und einen Review-Workflow, der Diffs an Design-Reviewer weiterleitet – dadurch wird VRT zu einem kollaborativen Qualitätssicherungswerkzeug und nicht nur zu einer automatisierten Prüfschranke.