Visuelle Regressionstests
Was Visual Regression Testing ist
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „Die richtige Schwelle wählen“Die Schwelle ist eine feste Auswahl und kein frei eingegebener Wert:
| Schwelle | Verwenden, wenn |
|---|---|
| 0,5 % | Die Seite soll nahezu 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
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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:
- Seitengeschwindigkeits-Überwachung 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.
Bereit, zwei Seiten zu vergleichen? Öffnen Sie das Visual-Regression-Testing-Tool.
Was ist Visual Regression Testing?
Abschnitt betitelt „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?
Abschnitt betitelt „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?
Abschnitt betitelt „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?
Abschnitt betitelt „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?
Abschnitt betitelt „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?
Abschnitt betitelt „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.