Visuelles Regressionstesten nimmt einen Screenshot Ihrer Oberfläche auf, vergleicht ihn mit einem vorher freigegebenen und schlägt fehl, wenn sich Pixel geändert haben, deren Änderung niemand zugestimmt hat. Es ist die einzige Art von Test, die eine Stylesheet-Änderung fängt, die einen Button vier Pixel nach links schiebt, denn das ist kein Verhalten, das jemals eine Zusicherung beschrieben hätte.

Alles Weitere folgt aus einer unbequemen Tatsache: ein Screenshot ist nicht deterministisch, und ein Test, der nicht deterministisch ist, wird irgendwann ignoriert.

Was ein Durchlauf erzeugt

Drei Bilder pro Prüfung, und nur das dritte schaut sich überhaupt jemand an.

  • Die Baseline - der freigegebene Screenshot, zusammen mit dem Code eingecheckt.
  • Der Kandidat - das, was die Oberfläche jetzt rendert.
  • Das Diff - beide übereinandergelegt, mit markierten geänderten Pixeln.

Eine Prüfung besteht, wenn der Kandidat zur Baseline passt, und schlägt sonst fehl. Fehlschlagen ist nicht dasselbe wie falsch sein: ein absichtliches Redesign lässt jede Prüfung scheitern, die es berührt, und die Korrektur besteht darin, die neuen Screenshots als Baselines freizugeben. In diesem Freigabeschritt steckt die eigentliche Arbeit.

Die Fehlschläge, die keine sind

Fast alles, was daran schwierig ist, sind Fehlalarme, und sie kommen aus einer kurzen Liste immer derselben Ursachen.

  • Antialiasing und Schriftrendering. Derselbe Text auf zwei Maschinen oder mit zwei Grafiktreibern ergibt nicht dieselben Pixel.
  • Alles, was die aktuelle Zeit anzeigt. Ein Zeitstempel, ein “vor 3 Tagen”, eine Jahreszahl im Copyright.
  • Dynamische Daten. Eine nach Aktualität sortierte Liste, ein zufällig aus einer Fixture gezogener Name, eine Zahl, die wächst.
  • Animationen und Übergänge. Ein mitten im Übergang aufgenommener Screenshot ist ein Münzwurf.
  • Spät eintreffende Schriften. Der Screenshot entsteht, bevor die Webfont geladen ist, also hat die Baseline die eine Schrift und der Kandidat die andere.
  • Scrollbalken. Über Betriebssysteme hinweg verschieden und oft innerhalb des aufgenommenen Bereichs.

Jede davon hat eine langweilige Korrektur: die Uhr anhalten, die Daten stubben, Animationen abschalten, auf die Schriften warten und jede Aufnahme in einer kontrollierten Umgebung erzeugen statt auf der Maschine, die gerade frei ist. Docker ist die übliche Antwort auf den letzten Punkt, und wenn Sie ihn auslassen, ist er die mit Abstand größte Rauschquelle.

Anders gesagt ist eine visuelle Suite ein Problem mit Flaky Tests mit einem anderen Hut auf. Es gilt dieselbe Regel: eine Prüfung, die aus Gründen fehlschlägt, die nichts mit dem Code zu tun haben, wird nicht mehr gelesen, und eine Suite, die niemand liest, ist schlimmer als keine Suite, denn sie kostet trotzdem Zeit.

Schwellenwerte sind der falsche erste Reflex

Die naheliegende Antwort auf Rauschen ist, einen Prozentsatz abweichender Pixel zuzulassen. Das funktioniert, und genau so kommt auch ein echter Defekt durch.

Schwach
Fehlschlagen, wenn mehr als 0,5 % der Pixel abweichen - was auf einer großen Seite reichlich Platz lässt, damit ein Button sich verschiebt, ein Preis sich ändert oder eine Formularbeschriftung verschwindet
Besser
Null Toleranz, mit benannten ausgeschlossenen Bereichen: die Uhr im Header, der Avatar, das Diagramm, das sich neu zeichnet. Jeder Ausschluss ist eine Entscheidung, die jemand aufgeschrieben hat

Ein globaler Schwellenwert ist die Aussage, dass ein unbekannter Teil Ihrer Oberfläche sich ändern darf, ohne Ihnen Bescheid zu geben. Ein ignorierter Bereich ist eine Aussage über ein bestimmtes Element, im Pull Request überprüfbar, und er wächst nicht still mit, wenn die Seite größer wird.

Was er Ihnen nicht sagen kann

Er kann Ihnen nicht sagen, dass eine Änderung falsch ist. Er sagt Ihnen, dass eine Änderung stattgefunden hat, und ein Mensch entscheidet, welches von beidem es ist.

Das klingt nach einem kleinen Unterschied, bis Sie die Reviews zählen. Jede absichtliche visuelle Änderung erzeugt eine Schlange von Diffs, die jemand ansehen und freigeben muss, und wenn diese Person nicht namentlich benannt ist, wird die Schlange binnen eines Monats zum Abnicken. Ab da läuft die Suite, ist grün und wertlos.

Außerdem prüft er nur das, worauf Sie ihn gerichtet haben, in den Browsern und Ansichtsgrößen, die Sie ihm genannt haben. Das ist die Lücke, die es zu benennen lohnt, denn dort leben die interessanten Fehler. Ein Layout, das nur in Safari bricht, oder nur bei 320 Pixeln Breite, oder nur wenn der Browser das Video nicht dekodieren kann, das Sie ausliefern, ist für eine Suite unsichtbar, die Chrome in einer Größe aufnimmt.

Session Replay

Kostenlose Chrome-Erweiterung. Ein Klick auf der Seite, die sich falsch verhält, erfasst den Screenshot, die Konsole und das Netzwerkprotokoll und gibt Ihnen einen Link, den Sie ins Ticket einfügen können.

Erweiterung holen

Wann es sich lohnt

Das Muster ist Wiederholung. Visuelles Testen zahlt sich dort aus, wo dieselben Komponenten viele Male gerendert werden, auf eine Art, die ein Mensch praktisch nicht nachprüfen kann.

Ein Designsystem oder eine Komponentenbibliothek ist der stärkste Fall: eine Änderung am Padding berührt alles, und die Suite sagt Ihnen genau, was sie berührt hat. Marketingseiten sind der zweite, denn sie bestehen überwiegend aus Layout und eine kaputte kostet direkt Geld. Alles, was in mehreren Sprachen oder Themes gerendert wird, ist der dritte - dieselbe Seite in sieben Sprachen sind sieben Gelegenheiten für eine Übersetzung, länger zu sein als ihr Container, und niemand öffnet alle sieben zu jedem Release von Hand.

Viel weniger bringt es bei einer Oberfläche, die wöchentlich umgestaltet wird, wo jeder Durchlauf eine Wand aus Freigaben ist, und bei internen Bildschirmen, wo ein kosmetischer Defekt jemanden ein Schulterzucken kostet.

Wo es neben allem anderen steht

Visuelles Regressionstesten ist Regressionstesten mit einem Screenshot als Zusicherung, also entscheidet dieselbe Logik, was hineingehört: Dinge, die funktioniert haben und weiter funktionieren müssen. Ihr Testplan sollte sagen, welche Seiten abgedeckt sind und, nützlicher noch, welche nicht.

Es ist außerdem nicht dasselbe wie visuelles Fehlermelden, trotz des gemeinsamen Worts, und die beiden beantworten entgegengesetzte Fragen. Eine visuelle Suite findet unbeabsichtigte Änderungen, bevor sie jemand sieht, in den Umgebungen, die Sie gewählt haben. Ein Fehlerbericht sagt Ihnen, was bei einem echten Menschen schiefgegangen ist, in dem Browser, den er tatsächlich hat, auf der Seite, die er tatsächlich benutzt hat. Keines ersetzt das andere: das erste ist ein Netz, das zweite ist das, was Sie mit dem Fisch machen, der hindurchgekommen ist.

Wir verkaufen kein Werkzeug für visuelles Testen, und das ist die ehrliche Grenze dessen, was wir Ihnen über den Betrieb eines solchen sagen können. Was wir sehen, ist das andere Ende - der Bericht, der ankommt, weil bei jemandem etwas falsch gerendert wurde, in einem Browser oder auf einer Bildschirmgröße, die niemand aufgenommen hat.

Ein Anfang, der die Berührung mit der Wirklichkeit überlebt

Fünf Seiten, ein Browser, eine Ansichtsgröße, in CI bei jedem Pull Request, in einem Container, damit die Pixel stabil sind. Eine namentlich benannte Person gibt Diffs frei. Ausgeschlossene Bereiche statt eines Prozentsatzes.

Nehmen Sie Browser und Größen dazu, wenn die fünf Seiten einen Monat lang grün waren und man ihnen glaubt. Die meisten Suiten, die aufgegeben werden, waren am ersten Tag zu breit, und die, die überleben, haben kleiner angefangen, als es sich seriös anfühlte.