Hier soll der Titel reinNon-Functional Testing

www.qs-tag.de

Veranstalter: imbus AG www.qs-tag.de

Web-Layout - eine wichtige nicht-funktionale Eigenschaft und wie man sie testet Michael MiroldTestfabrik AG

testfabrik.com

Layout-Testen von Webanwendungen

Software-QS-Tag 2015Michael Mirold (mmirold@testfabrik.com)

Layout betrachtet nicht Inhalte

Layout betrachtetnicht Funktion

3 / 28

Web-Layout als Nicht-Funktionale Eigenschaft

• Layout beeinflusst Usability• Layout teilweise sogar funktionale Qualität (“Seite

unbenutzbar”)• Layout-Probleme bestimmen gefühlte Qualität (“die

scheinen nicht zu testen”)

Dennoch: Layout meist nicht explizit getestet

4 / 28

5 / 28

6 / 28

7 / 28

Status Quo: Layout-Testen in der Webentwicklung• meist im Rahmen manueller Tests (ad-hoc / explorativ /

scripted) • basiert oft auf Mock-Ups und Prototypen, z.B. Photoshop-

Vorlagen• abhängig von Intuition / Erfahrung des Testers• keine Layout-Testcases Fehler werden häufig übersehen manuelle Layout-Tests schlecht reproduzierbar kleine Abweichungen oft nicht erkennbar

8 / 28

Spezifikationsbasiertes automatisiertes Testen• Große semantische Lücke zwischen Spezifikation und

Implementierung im Web-Layout• Keine klassische “Design-Phase” im (Software-

Enginnering-)SinneLow-Fi Mockups

(Papier, Balsamiq, etc.)

Hi-Fi Mockups(Photoshop, Axure,

etc.)HTML + CSS

• viel Raum für Interpretation• viel Raum für Fehler• wenig Substanz für automatisiertes Testen• CSS immer noch sehr “low-level”

9 / 28

Schmerzlinderung durch semantisches CSS• Idealerweise: konsistente Verwendung von Konzepten /

Begriffen in • Fachkonzept• visuellem Konzept• Mock-Ups und Prototypen

• Dann: Aufgreifen fachlicher Konzepte / Namen in HTML und CSS

konsistente Verwendung von CSS-Klassennamen und IDsFachkonzept

Beschreibung der “Newsletter-Box”

Visuelles Konzept

Definition des Seiten-elements “Newsletter-Box”

Mock-Up

Beschriftung “Newsletter-Box” in Mock-Up

CSS

Benennung CSS-Klasse “m-newsletterbox”

10 / 28

Bessere Testbarkeit durch semantisches CSS • Test-Designer kennt nun relative Positionen der Web-Elemente• Test-Designer kann Tests formulieren:

• “m-newsletterbox liegt genau unter l-navbar-main”• “m-newsletterbox liegt auf gleicher Höhe wie m-loginbox”• “m-loginbox ist immer sichtbar”

• Liegt ein visuelles Feinkonzept (mit Pixelangaben) vor, sind weitergehende Tests möglich

• “m-newsletterbox ist 200px breit in der Desktopvariante”• “m-loginbox ist immer 50px vom rechten Rand des Viewports entfernt”

Wie können diese Tests realisiert werden?

11 / 28

Spezifikationsbasiertes automatisiertes Layout Testen

• Open Source Layout-Test-Framework

• “Galen Specs”: Sprache zur Beschreibung von Webseiten-Layouts

• Galen testet Gültigkeit der Beschreibung für Webseite• Verwendet Selenium zur Browser-Fernsteuerung

Galen Framework

http://galenframework.com

12 / 28

Beispiel: Layout-Test der webmate Landing Page

Wichtig: Call-to-Action sollte immer sichtbar sein!

Schritt 1: User schreibt “Galen Spec”Wie funktioniert Galen?

@objects body css body top-navbar css #top.wmlp-l-navbar masthead xpath //div[@class='wmlp-l-masthead'] masthead-actionbtn css .wmlp-l-masthead .wmlp-m-action

= Main section =

top-navbar: inside body 0px top width 100% of screen/width

masthead:

below top-navbar 0px top width 100% of screen/width

@on desktop height 400px

@on mobile height 250px

masthead-actionbtn: visible

Objekt-Definitionen: Zuordnung von Name (z.B.“top-navbar”) zu DOM-Objekt via CSS-Selektor, Id oder XPath

Specs: Layout-Regeln für DOM-Elemente

Der obere Rand des “masthead” (DIV-Element mitCSS-Klasse “wmlp-l-masthead”) soll sich genau (“0px”) unter der “top-navbar” (DOM-Element mit der Id “top” und der CSS-Klasse “wmlp-l-navbar”) befinden.

Wenn bei Testausführung das Tag “mobile” gesetzt ist,soll die Höhe des “masthead”-Elements exakt 250px betragen.

Der “Call-to-Action-Button” (Element mit CSS-Klasse “wmlp-m-action” unterhalb eines Elements mit CSS-Klasse “wmlp-l-masthead”) sollstets sichtbar sein.

webmate.gspec

Galen Spec Sprach-Features• Vielzahl möglicher Tests bzw. “specs”, z.B.

• near: ist Element in der Nähe eines anderen Elements?

• on: befindet sich ein Element “auf” einem anderen?

• text: ist der Text eines Elements korrekt?

Beispiele: http://galenframework.com

15 / 28

Galen Spec Sprach-Features (2)• centered: ist Element zentriert in anderem Element?

• color-scheme: Ist Hintergrund-Farbe des Elements in richtigem Bereich?

• image: sieht ein Element ähnlich aus wie ein Bild?

Beispiele: http://galenframework.com

16 / 28

Schritt 1,5: Ausführung der “Galen Spec”

Wie funktioniert Galen?

~/D/t/galen ❯❯❯ ./galen check webmate.gspec --include="desktop" --url=https://webmate.io

--size 1600x800--htmlreport=webmatereport

========================================Test: webmate.gspec========================================check webmate.gspec --include=desktop --url=https://webmate.io --size 1600x800= Main section = top-navbar: inside body 0px top width 100% of screen/width

masthead: below top-navbar 0px top width 100% of screen/width height 400px

masthead-actionbtn: visible

• Spec kann mit “./galen check” getestet werden• mit “--include” können Tags festgelegt werden • mit “--htmlreport” Erstellung eines HTML-Reports

Konsoleoutput während der Testausführung

Hier: Keine Fehler

Konsole

Schritt 1,5: Galen HTML ReportWie funktioniert Galen?

Alles OK

Schritt 2: User schreibt “Galen Test”Wie funktioniert Galen?

@@ parameterized | deviceName | tags | size | | Mobile | mobile | 320x600 | | Tablet | tablet | 640x480 | | Desktop | desktop | 1600x800 |

@@ parameterized | browser | | firefox | | chrome | | safari |

webmate Landing Page on a ${deviceName} device ${browser} https://webmate.io ${size} check webmate.gspec --include "${tags}”

webmate Pricing Page on a ${deviceName} device ${browser} https://webmate.io/pricing ${size} check webmate_pricing.gspec --include "${tags}"

Tests können parametrisiert werden, z.B. mitBrowser, Browsergröße und so genannten “Tags”

Test-Spezifikation besteht aus “Tests” definiert durch:• Test-Name (wird später in Reports verwendet)• Test-Ziel (legt URLs, Browser und Größen fest)• “Page-Action” (Aufruf der Galen-Spec)

webmate.test

Schritt 3: User startet Galen TestWie funktioniert Galen?

~/D/t/galen ❯❯❯ ./galen test webmate.test --

htmlreport=webmatereport

[...]========================================Test: webmate Landing Page on chrome with Tablet size (640x480)========================================Starting ChromeDriver 2.19.346063 (38b35413bd4a486d436a9749e090454bc9ff6708) on port 11187Only local connections are allowed.check webmate.gspec --include "tablet”= Main section = top-navbar: inside body 0px top width 100% of screen/width

masthead: below top-navbar 0px top width 100% of screen/width

masthead-actionbtn:-> visible-> : "masthead-actionbtn" is not visible on page[...]

Fehlgeschlagene Spec: Action-Button in Tablet-Größe nicht sichtbar

Konsole• Test kann mit “./galen test” getestet werden• mit “--htmlreport” Erstellung eines HTML-Reports

Galen Test HTML Report

Galen Test HTML Report (2)

Klick öffnet Screenshot

Galen Test HTML Report (3): Fehler Screenshot

Galen Framework: Weitere Features

• Anbindung an Selenium Grid• Ausführung von WebDriver-Skripten vor Test• Setzen von Cookies vor Test• Strukturierung von Tests in Test-Gruppen

24 / 28

Alternative: Prototypbasiertes automatisiertes Testen• Idee: Reduzierung des Testaufwands auf eine Instanz (z.B. einen

Browser)• Finde Layout-Unterschiede zwischen zwei Instanzen einer Webseite

automatisch:• gleiche Webseite in verschiedenen Browsern: Cross-Browser-Test• verschiedene Versionen (letzte Woche vs. aktuell): Regressions-Test

• verschiedene Online-Tools, z.B. • nur Cross-Browser:

• crossbrowsertesting.com• browsera.com

• Cross-Browser + Regressionstest• webmate.io

25 / 28

Vollautomatisches Layout-Testing mit

Cross-Browser-Testing

Regressions-Testing

User wählt Test-URLs

User wähltReferenzbrowser

+ Vergleichsbrowser

User wählt Referenz-URLs

User wähltVergleichs-URLs

webmateextrahiert Layout-

Information

webmatevergleicht Layout

webmatepräsentiert

Abweichungen

1 2

1 23

4

5

26 / 28

DEMO

27 / 28

28 / 28

Zusammenfassung

• Manuelles Layout-Testen fehleranfällig und mühsam• Semantisches CSS kann (automatisierte) Testbarkeit von

Webanwendungen stark verbessern• Mit Galen Framework können Layout-Tests automatisiert

werden• Mit webmate kann der Aufwand für Layout-Tests stark

reduziert werden

29 / 28

testfabrik.com

We Automate Web Testing.