1

Layout-TestingChristiane Helmchen & Bianca NiestrojNürnberg, den 20. Juni 2016

#dwx16#Layouttesting

2

Christiane HelmchenEntwicklerin mit Leidenschaft fürs Testen

@tiah15

3

Bianca NiestrojArbeitet im Marketing von punkt.de

@BiancaNiestroj

4

Developer Tester MarketeerDecision Maker

5

Layout-Testing

Visual Testing

RWD Testing

Automated Tests for Visual Responsive Layouts

Visual Test-Driven Development for responsive Interface Design

Pixel Tests

Screenshots Comparison

Visual Layout Testing

Was ist Layout-Testing

6

7

8

Was genau ist Layout-Testing?

Tool zur Steigerung der Qualität des sichtbaren Teils einer webbasierten Software

Test(ing)• Überprüfen• Softwarebranche: Steigerung der

Softwarequalität

Layout• Werbung• Räumliche Anordnung von Texten und

Bildern und anderen visuellen Elementen

9

Testing-Pyramide

Unit-Tests

Integrations-Tests

UI-Tests

10

Testing-Pyramide

UI-Tests

Aussehen wird mit Layout-Tests überprüft

Verhalten/Funktionalität wird mit Behaviour Driven Development überprüft

11

Was geht? Was bringt`s? Wer braucht`s?

Layout-Testing

12

Wer braucht`s?

Layout-Testing

13

Developer/Tester MarketeerDecision Maker

Wer braucht´s?W

er b

rauc

ht‘s?

14

FRONTEND

Wer

bra

ucht

‘s? Entwickler

15

TesterW

er b

rauc

ht‘s?

Unit-Tests

Integrations-Tests

UI-Tests

16

Wer

bra

ucht

‘s?

17

Usability

Wer

bra

ucht

‘s?

18

Wer

bra

ucht

‘s?

19

Wer

bra

ucht

‘s?

20

Wer

bra

ucht

‘s?

21

Wer

bra

ucht

‘s?

22

Wer

bra

ucht

‘s?

23

Wer

bra

ucht

‘s?

Extern gehostete Ressourcen

24

Strenge CD Vorgaben

Wer

bra

ucht

‘s?

25

Was bringt´s?

Layout-Testing

26

VoraussetzungenW

as b

ringt

‘s?

27

Was

brin

gt‘s?

28

Was

brin

gt‘s?

29

Was

brin

gt‘s?

30

(Selbst-)VertrauenW

as b

ringt

‘s?

31

Was

brin

gt‘s?

32

Was

brin

gt‘s?

Erwartung Realität

33

Was geht?

Layout-Testing

34

Was

geh

t?

35

ZielRegressionsfehler während der

Entwicklung einer neuen Webseite schnellstmöglich finden

Was

geh

t?

Wie finde ich das passende Framework?

36

Wie finde ich das passende Framework?

CSS CriticGrunt PhotoBox

PhantomCSS

Snap and CompareSpecter

FBSnapshotTestCase

dpdxtWraith

BackstopJS

Fighting Layout Bugs

Selenium Visual Diff

Huxley

Needle

Wraith-SeleniumApplitools Eyes

Gemini

Praktisch für RWD

Bekannte Programmiersprache

Kostenfrei

CI-Integration

Gute DokumentationVisualCeptionDetaillierter Vergleich

GalenWebdriverCSS

Was

geh

t?

Kann Selenium

37

Was brauche ich alles?W

as g

eht?

WebdriverIO

WebdriverCSS

Mocha

Webdriver

Screenshots

Test Framework

38

AblaufW

as g

eht?

39

Installation

npm install mocha (besser global)

npm install webdriverio

npm install webdrivercss

Was

geh

t?

Achtung: momentan ist WebdriverCSS offiziell nicht mit WebdriverIO 3.x oder höher kompatibel

40

Was

geh

t?

Test-Beispiel

41

KonfigurationW

as g

eht?

Tipp: Testeigener screenshotRootPath führt zu mehr Übersichtlichkeit

42

Test-BeispielW

as g

eht?

43

Test-BeispielW

as g

eht?

44

Test ausführenAlle Tests innerhalb eines Ordners:

mocha path/to/tests/*.js --timeout 20s

Oder mit spezieller Config-Datei:

MOCHA_ENVIRONMENT="develop" mocha tests/*.js --timeout 20s

Ein bestimmter Test:

mocha path/to/tests/example.js --timeout 20s

Was

geh

t?

45

Vorteile• Sehr einfach, Tests zu schreiben

• Copy & Paste-, CSS-Selektor-Kenntnisse reichen für einfache Tests

• Ausschließen von Elementen und Flächen

Was

geh

t?

46

Vorteile• Sehr einfach, Tests zu schreiben

• Copy & Paste-, CSS-Selektor-Kenntnisse reichen für einfache Tests

• Ausschließen von Elementen und Flächen

• Gute Dokumentation

• Interaktionen vor dem Screenshot möglich (z.B. Klicken eines Buttons)

• Bildschirmbreiten können pro Test oder allgemein gesetzt werden

Was

geh

t?

47

Nachteile• Nicht mit gleichen Screenshots auf verschiedenen Betriebssystemen testen

• Retina-Bildschirm vs. Nicht-Retina-Bildschirm

• In Verbindung mit Mocha: Strukturierung der Testdateien schwierig

• Gruppierung beim Ausführen der Tests nicht möglich

Was

geh

t?

48

Grenzen von Screenshotvergleichstests• Aktuelles (z.B. heutiges Datum, zeitbegrenzte Inhalte)

• Zufall (z.B. Werbung)

• Externes (z.B. Google Maps)

• Slider und Animation

• Lazy Loading

• Infinite Scrolling

Was

geh

t?

49

Was

geh

t?

Geht da noch mehr?

ZielTests auf einem Live-System mit

häufigen redaktionellen Änderungen

50

CSS CriticGrunt PhotoBox

PhantomCSS

Snap and CompareSpecter

FBSnapshotTestCase

dpdxtWraith

BackstopJS

Fighting Layout Bugs

Selenium Visual Diff

Huxley

Needle

Wraith-SeleniumApplitools Eyes

Gemini

Kein Pixelvergleich

VisualCeption

GalenWebdriverCSS

Was

geh

t?

Wie finde ich das passende Framework?

51

Installationsudo npm install -g galenframework-cli

Was

geh

t?

• Benötigt Java >= 1.7• Passendes Betriebssystem

52

Konfigurationgalen config

Was

geh

t?

53

SpecW

as g

eht?

54

TestsuiteW

as g

eht?

55

Ausführengalen test Tests/Galen/TestSuites/Monitoring/NonContent.test

Was

geh

t?

56

Was

geh

t?

57

Vorteile• Zum größten Teil auch von nicht-Techies/Nicht-Entwicklern lesbar und z.T. schreibbar

• Sehr sehr gute Dokumentation - mit Bildern und Videos!

• Textänderungen stören Tests nicht

• TDD – schreibe die Specs bevor das Design umgesetzt wurde

• Welcher Teil des Designs ist wirklich wichtig?

• Betriebssysteme unwichtig

• SpecLanguage und JS möglich

Was

geh

t?

58

Nachteile• Man kann unmöglich alles testen!!!

• Testschreiben dauert länger – nicht nur Copy & Paste

• Installieren in der CI-Kette funktioniert bisher nicht, da FreeBSD nicht unterstützt wird

• BaseURL steht in der Testsuite statt in der Konfiguration, d.h. man muss das Ausführen pro System erneut schreiben

Was

geh

t?

59

Wann welches Framework?W

as g

eht?

PixelvergleichGleichbleibender Datenstand

Mit möglichst wenig Aufwand möglichst viel testen

Regressionstests

GalenDatenstand (Inhalte) weniger wichtig

Spezifische Eigenschaften von wenigen Elementen testen

TDD – Tests vor Umsetzung

60

FazitW

as g

eht?

61

Wir freuen uns auf Feedback!

@punkt_de

62

Linksammlung• Frameworks:

• https://github.com/webdriverio/webdrivercss

• http://galenframework.com/

• Dokumentationsvideos von Ivan Shubin, dem Entwickler von Galen: https://www.youtube.com/watch?v=qP8NmRM1OsI&list=PLyhyM1XhqdgWQ1DevSn-Zhxbvee3AQs_j

• Bilder

• Bildquelle: http://www.tinti.eu/sites/default/files/fehlersuchbild_1.jpg

• Bildquelle: http://antje-heimsoeth.com/wp-content/uploads/2015/10/Antje-Heimsoeth-Vortrag-Mut-1920.jpg

• Statistikquelle: https://www.vocatus.de/files/pdf/Vocatus-2005-01-PA-Website-Prozessoptimierung-und-Abbrecheranalysen.pdf

• Eigene Bilder