CSS-Tricks hat am 1. April 2016 eine überarbeitete Anleitung für automatisierte CSS-Regressionstests veröffentlicht. Der Originalbeitrag von Garris Shipon beschreibt BackstopJS als Testwerkzeug für visuelle Vergleiche über mehrere Bildschirmgrößen und Seitenzustände hinweg.
BackstopJS erzeugt Referenzbilder und vergleicht spätere Testläufe mit diesen Aufnahmen. In der Konfiguration werden Viewports, URLs und CSS-Selektoren festgelegt. So kann ein Test gezielt einzelne Bereiche wie Navigation, Inhaltsblöcke oder Fußzeilen prüfen, statt nur einen Gesamtscreenshot der Seite auszuwerten.
Referenzbilder für verschiedene Viewports
Der vorgestellte Ablauf beginnt mit einer Installation über npm. Danach legt BackstopJS Referenzbilder für Smartphone-, Tablet- und Desktop-Auflösungen an. Ein weiterer Lauf erstellt neue Aufnahmen und meldet sichtbare Abweichungen. Das Verfahren ergänzt funktionale Tests, weil auch unerwartete Änderungen am Layout erfasst werden. Vergleichbare Entwicklerwerkzeuge für Editor und Teamarbeit bilden den organisatorischen Rahmen für solche Prüfungen.
Der Beitrag entstand aus einem responsiven Webprojekt, lässt sich aber auch auf andere interaktive Oberflächen übertragen. Für die Qualitätssicherung zählt dabei eine gepflegte Referenzbasis. Änderungen an den Screenshots müssen nachvollziehbar bleiben, damit ein absichtlich geändertes Layout nicht fälschlich als Fehler zurückgewiesen wird.