Automatisierte Tests für responsive Interfaces

#design #responsive #technik #testing

Responsive Interface Testing

Responsive Interface Testing

Responsive Websites zu testen kann sehr schnell sehr viel Zeit in Anspruch nehmen. Zusätzlich zu den üblichen Cross Browser Tests kommen die verschiedenen Bildschirmgrößen & Auflösungen; dazu etliche weitere Geräte, die dann zu allem Überfluss auch noch ihre eigenen Browser mitbringen. Seiten wie ›Can I Use‹ zeigen zwar, welcher Browser welche Features unterstützt, echte Gewissheit verschafft dann aber doch nur der eigentliche Test.

 

Open Device Lab: Testing auf echten Geräten

Wir haben in diesem Kontext schon das Open Device Lab vorgestellt, welches immerhin eine Vielzahl von Testgeräten bereitstellt; das eigentliche Testing ist aber auch trotz diverser Responsive Testing Tools immer noch sehr zeitraubend. Je häufiger Änderungen & Updates stattfinden, desto dankbarer ist man, wenn das Testing weitgehend automatisiert abläuft.

In diesem Beitrag stellen wir das kostenlose Framework Galen kurz vor und erläutern, wie das Testing damit automatisiert werden kann.

Inhaltsverzeichnis für diesen Beitrag:

 

Galen Framework für automatisierte Tests

Abhilfe soll also nun das Testing Framework Galen schaffen. Genau wie beim Testen von Modulen (Unit Testing) muss dafür eine eigene Testsuite angelegt werden, in der die unterschiedlichen zu testenden (Grenz-)Fälle behandelt werden. Anschließend können die Tests beliebig oft ausgeführt und analysiert werden.

Galen ist ein Open Source Framework, basierend auf Selenium Grid, das man bereits von Sauce Labs oder BrowserStack kennt. Die eigentlichen Tests müssen zwar in einer eigenen Syntax geschrieben werden, die jedoch bereits auf den ersten Blick sehr vertraut wirkt und an die eigenen Bedürfnisse angepasst werden kann.

 

Setup von Framework & Test Suite

Nach der einmaligen Installation kann das Framework schnell und einfach für jedes Projekt initiiert werden. Dafür legt man am besten einen eigenen Ordner an, in welchem dann Konfigurationsdatei, Testsuite sowie die weiteren Tests Platzfinden. Die Basis-Konfigurationsdatei wird über das Terminal mit folgendem Befehl automatisch erstellt:

galen config

Für die Testsuite legen wir eine Datei mit dem Namen testsuite.test an, die alle von uns gewünschte Fälle abdeckt. Eine einfache Suite könnte beispielsweise so aussehen:

Startseite auf 320x600
    http://website.dev 320x600
        check frontpage.spec --include "mobile"

Startseite auf 1024x768
    http://website.dev 1024x768
        check frontpage.spec --include "desktop"        

Der eigentliche Test befindet sich in der separaten Datei frontpage.spec, welche wir im nächsten Schritt anlegen.

 

Tests für das Galen Framework

Doch wie testet man das visuelle Interface, quasi den ›Look & Feel‹, einer Website eigentlich?
Zuerst einmal gilt es, die optischen Unterschiede zu bestimmen. Dies können z.B. unterschiedliche Spaltenbreiten oder Schriftgrößen sein, aber auch Abstände oder Beziehungen von verschachtelten Elementen. Die Vielzahl der Möglichkeiten liest man dabei am besten in der Dokumentation nach.

Visualisierung der Idee des visuellen Testings (© Galen Framework)

Visualisierung der Idee des visuellen Testings (© Galen Framework)

Ein einfacher Fall für einen Button, der auf kleinen Displays größer dargestellt wird, um auf Touch-Devices eine gute Usability zu gewährleisten, könnte dann ungefähr so aussehen:

==================================================
btn              .btn
==================================================

@ desktop
-------------------

btn
    height: 30px


@ mobile
-------------------

btn
    height: 40px

Rufen wir nun unsere Testsuite auf, wird die Seite automatisch für die beiden eben definierten Fälle (d.h. desktop & mobile) getestet. Der Aufruf der Testsuite erfolgt wieder über das Terminal:

galen test testsuite.test 

…und gibt direkt eine kurze Statusmeldung zurück:

========================================
Test: Startseite auf 320x600
========================================
        check frontpage.spec --include "mobile"
@ mobile
-------------------------
    btn
        height: 40px

========================================
Test: Startseite auf 1024x768
========================================
        check frontpage.spec --include "desktop"        
@ desktop
-------------------------
    btn
        height: 30px


========================================
----------------------------------------
========================================
Status: PASS

Zur Info: Der Standard-Browser für die Tests ist Firefox; dies kann in der config angepasst werden.

 

Reports & Analysen der Testergebnisse

Im Terminal sieht man bereits unmittelbar nach dem Ausführen der Testsuite das Ergebnis als kurze Statusinfo. Über den Zusatz --htmlreport reports hat man zudem die Möglichkeit richtige Reportings als HTML-Seiten generieren zu lassen:

galen test testsuite.test --htmlreport reports
HTML-Report aus dem Galen Framework

HTML-Report des Galen Frameworks

Schlägt ein Test fehlt, sieht man im Report neben den tatsächlichen auch die erwarteten Werte:

"btn" height is 39px instead of 40px
Fehlermeldung mit Statusinfo aus dem HTML-Report

Fehlermeldung mit Statusinfo aus dem HTML-Report

Wem das noch nicht reicht, der hat neben etlichen weiteren Parametern beispielsweise die Möglichkeit Screenshots von der Website inklusive der getesteten Elemente erstellen zu lassen:

galen dump frontpage.spec 
  --url http://website.dev 
  --size 1024x768 
  --export dumps

 

Testgetriebene Entwicklung für Backend & Frontend

Die Idee der testgetriebenen Entwicklung (Test-Driven Development oder auch TDD) kann damit nun nicht nur auf rein funktionale, sondern auch auf visuelle Komponenten ausgeweitet werden.

Natürlich können die Tests auch einfach nachträglich für einzelne Elemente oder Bereiche ergänzt werden, um erst einmal nur einzelne Bereiche zu testen. Dies bietet Neueinsteigern die Möglichkeit Erfahrungen zu sammeln oder bestehende Projekte Stück für Stück zu erweitern, ohne das ganze Projekt umstrukturieren zu müssen.

 

Exkurs: Interface Tests für responsive WordPress Themes & Plugins

Im Kontext von WordPress bieten sich die Tests auch an, wenn Plugins sehr stark an das visuelle Interface des Themes gekoppelt sind. Dies gilt z.B. für Plugins wie das bekannte Contact Form 7 WordPress Plugin, welches den HTML-Code für Formulare generiert. Da die Formulare über den Shortcode eingebunden werden, wäre es jederzeit möglich, dass sich bei einem Plugin-Update auch der vom Plugin generierte HTML-Code ändert.
Mit einem entsprechenden Test könnten Veränderungen in der Optik vor, bzw. nach dem Update automatisch überwacht werden, ohne das jede Seite und jedes Formular manuell getestet werden muss.

 

Fazit von responsive Interface Tests

Das automatisierte Testen von visuellen Aspekten der Website ist insbesondere bei großen Projekten eine enorme Hilfe. Die eigene Sprache des Frameworks ist dabei sehr intuitiv und Dank der umfangreichen Dokumentation einfach zu lernen und anzuwenden.

Genau wie beim Unit Testing müssen die Tests natürlich erst geschrieben werden; doch je größer und längerfristig das Projekt angelegt ist, desto mehr zahlen sich diese automatisieren Tests aus.

Die einfache Art der Tests (siehe Isolierung von Testobjekten) ermöglicht zudem eine gute Wiederverwendbarkeit für andere Projekte.

Selbstverständlich handelt es sich bei den Tests um keinen Ersatz für Integrations- oder Usability-Tests, sondern vielmehr um rein technische Analysen, die dabei helfen, technische Probleme frühzeitig zu erkennen.

Aus unserer Erfahrung hat sich zudem gezeigt, dass sich die Vorteile insbesondere bei Änderungen oder Updates bemerkbar machen, da die Kompatibilität von neuem und altem Code schnell geprüft und gewährleistet werden kann.

 

Eure Erfahrungen

Habt ihr schon Erfahrungen mit TDD im Frontend oder Frameworks wie Galen gemacht? Welche Anforderungen habt ihr an ein Testing Framework ganz allgemein? Wie immer könnt ihr eure Meinung dazu einfach in den Kommentaren kundtun!

 

Ihr Kommentar