Automatisiertes CSS-Regression-Testen

BackstopJS
Kommentare

Testen ist zwar nicht gerade jeden Entwicklers liebste Aufgabe, aber ein unbestreitbar wichtiger Bestandteil eines jeden Web-Designs. CSS-Testing ist oft eine besonders undankbare Aufgabe, denn während sich schnell Problemstellen in den CSS-Code einschleichen, ist das Testen, gerade was Regression-Testing angeht, schwierig.

Gepaart mit der zunehmenden Verbreitung von Responsive Designs wird dies umso anspruchsvoller. Dazu kommt, dass es bisher kein Tool gab, das sowohl bei Tests für Desktop-optimiertes CSS und Responsive Designs gleichermaßen gute Dienste leistet. BackstopJS soll das nun ändern. Garris Shipon stellt das Tool vor.

Installation und Nutzung von BackstopJS

Es gibt zwar verschiedene CSS-Regression-Test-Tools auf dem Markt, allerdings sind sie für UI-Entwickler meist zu komplex und umfangreich, um sie leicht in den Entwicklungsprozess einzubinden. Ideal wäre daher ein Tool, das sich lokal installieren lässt, eine bekannte Syntax nutzt und zudem nicht durch Änderungen in einem Layout für Bugs in einem anderen Layout sorgt.

Das von Garris Shipon entwickelte BackstopJS erstellt eine leicht zu konfigurierende visuelle Regression-Test-Matrix für verschiedene URLs, Seitenelemente und Displaygrößen. Installiert wird es über Bower; alternativ steht das Framework auch auf GitHub zum Download zur Verfügung. Nötig ist zudem die Installation verschiedener Dependencies wie Gulp, PhantomJS und CasperJS mit NPM.

Anschließend wird zunächst eine JSON-Konfigurations-Datei generiert, in der die URLs, Selektoren und Breakpoints an denen getestet werden soll, ausgewählt werden können. Dabei können so viele viewport– und grabConfigs-Objekte wie nötig hinzugefügt werden, mindestens aber jeweils ein Objekt. Zudem wird ein bitmaps_reference-Directory erstellt, bevor der erste Test durchgeführt wird. Dabei werden die Test-Bitmaps mit den aktuellen Referenz-Bildern verglichen und etwaige Abweichungen visuell in einem Browser-Fenster angezeigt.

Gerade bei komplexen Responsive Designs kann diese Automatisierung von Regression-Tests die Arbeit für Web-Entwickler und -Designer enorm vereinfachen. Allerdings ist dies nur ein kurzer Einblick in die Nutzung von BackstopJS; Garris Shipon erklärt sowohl den Installationsprozess, als auch den Einsatz des Frameworks ausführlich mit Code-Beispielen in seinem Tutorial.

Aufmacherbild: Answer sheet with pencil and alarm clock von Shutterstock / Urheberrecht: Casper1774 Studio

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -