Warum ist Layout-Testing so wichtig geworden? Die Antwort ist ganz einfach: Um Zeit und Geld zu sparen. Und noch viel mehr: Layout-Testing trägt zur besseren Usability bei. Der Geschwindigkeitsvorteil ist erheblich, wer will sich schon in einen fremden Code oder nach langer Zeit in einen alten Code reinfuchsen? Manuelles Arbeiten nimmt viel Zeit in Anspruch und auch Menschen können Fehler mal übersehen.

Oft ist das Endprodukt abweichend vom eigentlichen Design. Bei kleineren Fehlern, die gar nicht ersichtlich sind oder erst auf dem zweiten Blick zum Vorschein kommen, ist das vielleicht nicht so schlimm, aber hat ein Kunde ein strenges Corporate Design, kann nur der kleinste Fehler am Ende viel Aufwand werden. Vor allem aber wenn es um responsive Webdesign geht – bei so vielen verschiedenen Dimensionen kann schnell der Überblick verloren gehen. Und nicht nur das, es geht auch eine Menge an Zeit für das Testen auf verschiedenen Geräten und Dimensionen drauf.

Bevor man tiefer in die Materie geht, sollte erstmal geklärt werden, welches Framework am besten zu eurem Fall passt. Hier können viele Faktoren eine Rolle spielen, aber am Ende hängt es von eurem persönlichen Empfinden ab. Welche Programmiersprache? Wird eine CI-Integration benötigt? Wie ausgereift soll die Dokumentation sein? Bianca meint, bei einem Punkt sind wir uns alle einig: „Es sollte wenigstens für die Testphase kostenlos sein.“ Für Biancas Fall kamen nicht viele in die engere Auswahl, sie hat sich für WebdriverCSS entschieden – empfiehlt aber auch Galen.

„Galen sei vom Interface und der Bedienung wesentlich einfacher“, sagte Christiane. Galen einrichten ist einfach und schnell gemacht. Mit folgendem Befehl wird das Framework über npm installiert:

npm install -g galenframework-cli.

Wer npm nicht nutzt, kann einfach die Galen Framework Datei downloaden, extrahieren und den Anweisungen folgen. Nach dem Setup wird die Seite im Browser geöffnet, auf das gewünschte Maß gesetzt und anschließend kann das Testen schon beginnen. Für die Interaktionen nutzt Galen Selenium. Fehler werden durch Screenshots und Markierungen automatisch ausgegeben.

Mit WebdriverCSS werden immer gleich aussehende Bereiche selbst festgelegt. Anschließend werden mit WebdriverIO und WebdriverCSS End-to-End Tests geschrieben und Screenshots gemacht. Sobald etwas angepasst wurde und der Test wiederholt wurde, vergleicht WebdriverCSS die gescreenshoteten Bereiche und gibt bei Fehlern Benachrichtigungen aus. Achtung: Bei verschiedenen Betriebssystemen weichen die Screenshots ab.