Visuelle Regressionstests mit BackstopJS zur pixelgenauen Prüfung von Webseiten

BackstopJS testet automatisiert, ob sich das Aussehen einer Webseite verändert hat. Webentwickler können so unbeabsichtigte Auswirkungen ihrer Arbeit prüfen.

Artikel verschenken
In Pocket speichern vorlesen Druckansicht
Visuelle Regressionstests mit BackstopJS
Lesezeit: 15 Min.
Von
  • Benjamin Deutsch
Inhaltsverzeichnis

Automatisierte Tests sind ein zentraler Bestandteil moderner Softwareentwicklung, auch für das Web: Sie stellen HTTP-Anfragen, parsen HTML und simulieren Klickpfade. Dank Headless-Browser mit JavaScript-Engine sind sogar Single-Page-Applikationen auf diese Art testbar.

Allerdings wird ein wesentlicher Bestandteil einer Webseite in der Regel immer noch von Menschen erstellt und geprüft: das Aussehen. Stylesheets, Fonts und Bilder spielen zusammen und ergeben einen visuellen Gesamteindruck. Jedes dieser Elemente wird aber nicht nur auf einer Seite eingesetzt, sondern üblicherweise an vielen Stellen im Projekt wiederverwendet. Das ist praktisch und gewollt, da es gerade in großen Projekten eine Menge Arbeit ersparen kann. Allerdings birgt dann jede Änderung an einem solchen Element die Gefahr von Nebenwirkungen, die sich nur mit großem Aufwand in den Griff kriegen lassen: Entwickler müssen nicht nur die Seite ansehen, an der sie gerade arbeiten, sondern auch an sämtlichen anderen Seiten des Projektes prüfen, ob sich dort nicht Änderungen eingeschlichen haben, die gar nicht beabsichtigt waren.

Dabei kann Kollege Computer helfen. Es reicht freilich nicht, den an den Browser ausgespielten HTML-, CSS- und JavaScript-Code vor und nach einer Änderung zu vergleichen: Viele Arbeiten an einer Webseite gehen mit verändertem, zum Beispiel besser strukturiertem Code einher, sollen aber das visuell gleiche Ergebnis erzielen. Möchte man wissen, ob die Seite nach einer Codeänderung noch gleich aussieht, muss der Computer einen Screenshot der aktuellen Seite mit einem "bekannt guten" Stand vergleichen.