Markus Harr: Testing responsive Websites

Im Zeitalter von Smartphone, Tablet und Co werden viele Websites responsiv gestaltet, damit diese sich automatisch auf die unterschiedlichen Bildschirmgrößen einstellen und so eine optimale Userexperience bieten. Nebenbei schenkt man sich damit die Entwicklung einer zusätzlichen App. Die unterschiedlichen Darstellungen einer Website und die vielen verschiedenen Browser stellen allerdings eine enorme Herausforderung an das Testen dar. Eine Hilfe zur Entlastung der Tester ist da Testautomatisierung. Markus Harr berichtete zum 24. Agile Breakfast in Konstanz über die Ergebnisse seiner Bachelor-Arbeit bei der Sybit GmbH, in der er sich mit diesem Thema beschäftigt und diverse Open Source Testing-Frameworks untersucht hatte. Abgerundet wurde sein Vortrag durch eine Live-Demo. Nun zu seinem Vortrag:

Nach einer Einführung in die Problematik des automatisierten Layout-Testens zeigte er uns zwei wesentliche Testarten, die er uns an drei seiner Meinung nach sehr empfehlenswerten Tools vorstellte:

  1. Computed Style (Galen – http://galenframework.com/)
  2. Bildvergleich (Galen, BackstopJS – https://garris.github.io/BackstopJS/ und PhantomFlow – https://github.com/Huddle/PhantomFlow)

Computed Style ist eine eher analytische Methode zum Testen von Websites. Es läuft so ab, dass man in einer Spezifikationsdatei Webelemente als Objekte definiert und dann für verschiedene Viewports alle möglichen Eigenschaften dieser Objekte festlegt, wie zum Beispiel Größen, Positionen, etc. Dabei können die Größen und Positionen auch relativ angegeben werden. Bei dem von Markus favorisierten Tool Galen kann man auch Fehlertoleranzen definieren, um leicht unterschiedliche Darstellungen bei verschiedenen Browsern auszugleichen. Galen, das Selenium nutzt, liest dann bei einem Test die Spezifikationsdatei ein und prüft anhand dieser das DOM-Dokument, das Selenium von der zu testenden Website aufgebaut hat. Nach dem Test wird ein HTML-Report generiert, in dem die Testergebnisse dargestellt werden. Da Galen mit Selenium arbeitet, können viele verschiedene Browser-Treiber genutzt werden, unter anderem auch PhantomJS, ein headless Browser.

Beispielhafte Spezifikations-Datei von Galen

Beispielhafte Spezifikations-Datei von Galen

Der Bildvergleich ist schneller konfiguriert und lässt sich leichter pflegen als Computed Style. Es wird mit einem Browser ein Screenshot automatisiert erstellt. Dieser Screenshot dient als Referenzfile für die zukünftigen Tests. Ein Screenshot enthält in der Regel nicht die gesamte Seite sondern nur einen Teil, z.B. die Menu-Leiste. Ändert sich die zu testende Seite, kann man im Handumdrehen ein neues Referenzbild, das den neuen Stand der Seite widerspiegelt, erstellen. Mit den drei vorgestellten Tools kann man sehr schnell Screenshots von beliebigen Seitenteilen machen, die Webelementen entsprechen. Der automatisierte Test läuft so ab, dass ein aktueller Screenshot mit dem Referenzbild verglichen wird. Die Genauigkeit, also wieviel Abweichung bei dem Vergleich toleriert wird, ist einstellbar. Dabei liefern die Tools Reports, auf denen der aktuelle Screenshot, das Referenzbild und die Differenz von beiden gezeigt werden. Markus zeigte uns dann noch einige Tricks, wie man das DOM der zu testenden Seite vor dem Test manipulieren muss, um Tests auch an Seiten mit sich verändernden Inhalten machen zu können. Möglich ist beispielsweise das automatische Ersetzen von Text oder sogar von Bildern auf der Webseite oder das Ausblenden beliebiger Elemente.

Nach dem Vortrag und der Live-Demo gab es eine anregende Diskussion über das Für und Wider von automatisierten Layout-Tests. Der allgemeine Konsens war, dass es ohne manuelles Testen nicht geht und dass automatisierte Layout-Tests in Maßen eingesetzt hilfreich sein können. Es hängt wie immer von der Situation ab. Ein Dank an Markus für seinen tollen Vortrag.