Anzeige
Anzeige
Ratgeber

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

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.

Von Jessy Kösterke
2 Min.
Artikel merken
Anzeige
Anzeige

(Grafik: Shutterstock)

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?

Anzeige
Anzeige

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.

Anzeige
Anzeige

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:

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare

Community-Richtlinien

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

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

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

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

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

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige