Visual Regression Testing
Was Visual Regression Testing ist
Visual Regression Testing erstellt einen Screenshot von zwei URLs und vergleicht sie Pixel für Pixel. So sehen Sie, ob ein Deploy die Seite auf eine Weise verändert hat, die niemand beabsichtigt hat. Es findet genau die Fehlerklasse, die kein HTTP-Check und keine Performance-Metrik je melden wird: Die Seite liefert weiterhin 200, lädt weiterhin schnell und sieht falsch aus.
In LoadFocus findet der Vergleich zwischen zwei URLs statt, nicht gegen eine gespeicherte Historie. Üblich ist die Paarung einer Staging-Domain gegen die Produktion. Sie fragen also "sieht mein nächstes Release aus wie das aktuelle" und nicht "hat sich diese Seite seit letztem Monat verändert".
Wie der Vergleich funktioniert
Jeder Test erstellt Screenshots beider URLs und erzeugt ein Vergleichsbild, das die Unterschiede rot hervorhebt. Es wird neben dem Screenshot des Ergebnisses angezeigt, sodass Sie beide nebeneinander sehen.
Ob der Test besteht, hängt von der Vergleichsschwelle ab, die Sie wählen. Die Schwelle ist der Anteil an Unterschied, unterhalb dessen Änderungen ignoriert werden: Wählen Sie 10 %, besteht der Test, solange sich die beiden Seiten um weniger als 10 % unterscheiden.
Die richtige Schwelle wählen
Die Schwelle ist eine feste Auswahl und kein frei eingegebener Wert:
| Schwelle | Verwenden, wenn |
|---|---|
| 0,5 % | Die Seite soll pixelgleich sein; jede Änderung soll gemeldet werden |
| 1 % | Nahezu identisch, toleriert Antialiasing und Schriftrendering-Rauschen |
| 5 % | Kleine dynamische Bereiche, etwa ein Zeitstempel oder ein wechselndes Badge |
| 10 % (Standard) | Allgemeiner Einsatz, bei dem Inhalte zwischen Umgebungen leicht variieren |
| 20 % | Seiten mit einem größeren dynamischen Block, etwa einem Feed oder Karussell |
| 50 % | Nur das grobe Layout zählt |
Beginnen Sie beim Standard und ziehen Sie ihn enger. Eine zu lockere Schwelle lässt echte Regressionen durch; eine zu enge lässt jeden Lauf an Rendering-Rauschen scheitern und wird dann ignoriert, was schlimmer ist.
Wann Sie es einsetzen
- Vor einem Release: Richten Sie eine Staging-URL gegen die passende Produktions-URL und bestätigen Sie, dass die einzigen Unterschiede die sind, die Sie bewusst ausgeliefert haben.
- Nach einem CSS- oder Dependency-Upgrade: Das Change-Set nennt eine Zeile, die gerenderte Seite sieht das womöglich anders.
- Bei Template-Seiten: wenn eine Template-Änderung viele URLs auf einmal betrifft.
Tests aus Chrome ausführen
Es gibt eine Visual Regression Chrome-Erweiterung, die die bereits von Ihnen definierten Tests ausführt. Öffnen Sie die Erweiterung, starten Sie den Test, und derselbe Pixel-für-Pixel-Vergleich läuft gegen die Seiten in diesem Test.
Was Visual Regression Ihnen nicht sagt
Es meldet, dass etwas anders aussieht, nicht dass etwas kaputt ist, und auch nicht warum. Kombinieren Sie es mit dem Rest der Monitoring-Suite:
- Website-Performance-Monitoring dafür, ob die Seite schnell ist.
- Browser Checks dafür, ob die Journey noch durchläuft.
- Lighthouse-Optimierungspotenziale dafür, was zu beheben ist, wenn sie langsam ist.
FAQ
Was ist Visual Regression Testing?
Es ist die Praxis, eine Seite zu screenshotten und sie Pixel für Pixel mit einer anderen Version derselben Seite zu vergleichen, damit ungewollte visuelle Änderungen auffallen, bevor Nutzer sie sehen.
Womit vergleicht LoadFocus?
Mit zwei von Ihnen gewählten URLs, typischerweise einer Staging-Domain gegen die passende Produktionsseite, und nicht gegen eine gespeicherte Baseline-Historie.
Wie verhindere ich, dass kleine Rendering-Unterschiede jeden Lauf scheitern lassen?
Erhöhen Sie die Vergleichsschwelle. Sie ist der Anteil an Unterschied, unterhalb dessen Änderungen ignoriert werden; der Standard liegt bei 10 %.
Welche Schwellen kann ich wählen?
Sechs voreingestellte Werte: 0,5 %, 1 %, 5 %, 10 %, 20 % und 50 %. Der Standard ist 10 %.
Wie werden Unterschiede dargestellt?
Ein Vergleichsbild wird neben dem Screenshot des Ergebnisses angezeigt, mit den abweichenden Bereichen rot hervorgehoben, sodass Sie beide Versionen nebeneinander sehen.
Kann ich Visual-Regression-Tests aus dem Browser ausführen?
Ja. Die Visual Regression Chrome-Erweiterung führt die bereits definierten Tests aus und liefert denselben Pixel-für-Pixel-Vergleich.