Das Regionale Rechenzentrum der Universität zu Köln beschreibt in einem Tutorial zu Puppeteer und Resemble.js einen automatisierten Ablauf für visuelle Regressionstests. Der Ansatz hält den Zustand von Websites vor einem Upgrade in Screenshots fest und vergleicht ihn danach mit einer neuen Aufnahme.
Puppeteer steuert dafür einen Chrome-Browser und erzeugt die Vorher- und Nachher-Bilder. Resemble.js berechnet anschließend die Abweichungen. Sobald Unterschiede auftreten, legt das Skript eine Differenzgrafik im Unterverzeichnis screenshots/diff ab. Das Verfahren entstand aus dem Bedarf, zahlreiche CMS-Unterseiten nach einem Upgrade auf Frontend-Fehler zu prüfen.
Testläufe per Kommandozeile und Docker
Die Beispielimplementierung speichert die Screenshots in einer festen Verzeichnisstruktur und kann einzelne URLs per Kommandozeilenargument übernehmen. Für reproduzierbare Umgebungen beschreibt das Tutorial außerdem ein Docker-Image mit Puppeteer, Node.js und dem Testskript. Dadurch lässt sich der Ablauf in automatisierten QA-Prozessen wiederholen.
Visuelle Regressionstests ergänzen klassische Funktionstests, weil sie auch unbeabsichtigte Änderungen an Layouts und gerenderten Oberflächen sichtbar machen. Einen ähnlichen Ansatz mit einem anderen Werkzeug stellte ein älterer Beitrag zu BackstopJS und visuellen CSS-Regressionstests vor.