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.

Zur Startseite
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung