Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Layout-Testing: Was bringt es und wie funktioniert es?

(Grafik: Shutterstock)

Layout-Testing ist in aller Munde – auch auf der DWX in Nürnberg. Christiane Helmchen und Bianca Niestroj von der Agentur Punkt.de erzählen in ihrem ersten Panel warum es so wichtig ist, was es uns bringt und wie es funktioniert.

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.

Layout-Testing: Warum?

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.

Wie funktioniert Layout-Testing

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

(Screenshot: galenframework.com)
(Screenshot: galenframework.com)

„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.

WebdriverCSS

(Screenshot: webdriver.io)
(Screenshot: webdriver.io)

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.

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.