punkt.de – layout-testing: was geht, was bringt´s, wer braucht´s?
TRANSCRIPT
![Page 1: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/1.jpg)
1
Layout-TestingChristiane Helmchen & Bianca NiestrojNürnberg, den 20. Juni 2016
#dwx16#Layouttesting
![Page 2: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/2.jpg)
2
Christiane HelmchenEntwicklerin mit Leidenschaft fürs Testen
@tiah15
![Page 3: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/3.jpg)
3
Bianca NiestrojArbeitet im Marketing von punkt.de
@BiancaNiestroj
![Page 4: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/4.jpg)
4
Developer Tester MarketeerDecision Maker
![Page 5: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/5.jpg)
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
![Page 6: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/6.jpg)
6
![Page 7: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/7.jpg)
7
![Page 8: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/8.jpg)
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
![Page 9: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/9.jpg)
9
Testing-Pyramide
Unit-Tests
Integrations-Tests
UI-Tests
![Page 10: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/10.jpg)
10
Testing-Pyramide
UI-Tests
Aussehen wird mit Layout-Tests überprüft
Verhalten/Funktionalität wird mit Behaviour Driven Development überprüft
![Page 11: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/11.jpg)
11
Was geht? Was bringt`s? Wer braucht`s?
Layout-Testing
![Page 12: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/12.jpg)
12
Wer braucht`s?
Layout-Testing
![Page 13: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/13.jpg)
13
Developer/Tester MarketeerDecision Maker
Wer braucht´s?W
er b
rauc
ht‘s?
![Page 14: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/14.jpg)
14
FRONTEND
Wer
bra
ucht
‘s? Entwickler
![Page 15: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/15.jpg)
15
TesterW
er b
rauc
ht‘s?
Unit-Tests
Integrations-Tests
UI-Tests
![Page 16: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/16.jpg)
16
Wer
bra
ucht
‘s?
![Page 17: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/17.jpg)
17
Usability
Wer
bra
ucht
‘s?
![Page 18: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/18.jpg)
18
Wer
bra
ucht
‘s?
![Page 19: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/19.jpg)
19
Wer
bra
ucht
‘s?
![Page 20: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/20.jpg)
20
Wer
bra
ucht
‘s?
![Page 21: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/21.jpg)
21
Wer
bra
ucht
‘s?
![Page 22: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/22.jpg)
22
Wer
bra
ucht
‘s?
![Page 23: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/23.jpg)
23
Wer
bra
ucht
‘s?
Extern gehostete Ressourcen
![Page 24: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/24.jpg)
24
Strenge CD Vorgaben
Wer
bra
ucht
‘s?
![Page 25: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/25.jpg)
25
Was bringt´s?
Layout-Testing
![Page 26: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/26.jpg)
26
VoraussetzungenW
as b
ringt
‘s?
![Page 27: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/27.jpg)
27
Was
brin
gt‘s?
![Page 28: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/28.jpg)
28
Was
brin
gt‘s?
![Page 29: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/29.jpg)
29
Was
brin
gt‘s?
![Page 30: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/30.jpg)
30
(Selbst-)VertrauenW
as b
ringt
‘s?
![Page 31: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/31.jpg)
31
Was
brin
gt‘s?
![Page 32: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/32.jpg)
32
Was
brin
gt‘s?
Erwartung Realität
![Page 33: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/33.jpg)
33
Was geht?
Layout-Testing
![Page 34: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/34.jpg)
34
Was
geh
t?
![Page 35: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/35.jpg)
35
ZielRegressionsfehler während der
Entwicklung einer neuen Webseite schnellstmöglich finden
Was
geh
t?
Wie finde ich das passende Framework?
![Page 36: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/36.jpg)
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
![Page 37: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/37.jpg)
37
Was brauche ich alles?W
as g
eht?
WebdriverIO
WebdriverCSS
Mocha
Webdriver
Screenshots
Test Framework
![Page 38: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/38.jpg)
38
AblaufW
as g
eht?
![Page 39: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/39.jpg)
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
![Page 40: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/40.jpg)
40
Was
geh
t?
Test-Beispiel
![Page 41: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/41.jpg)
41
KonfigurationW
as g
eht?
Tipp: Testeigener screenshotRootPath führt zu mehr Übersichtlichkeit
![Page 42: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/42.jpg)
42
Test-BeispielW
as g
eht?
![Page 43: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/43.jpg)
43
Test-BeispielW
as g
eht?
![Page 44: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/44.jpg)
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?
![Page 45: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/45.jpg)
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?
![Page 46: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/46.jpg)
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?
![Page 47: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/47.jpg)
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?
![Page 48: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/48.jpg)
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?
![Page 49: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/49.jpg)
49
Was
geh
t?
Geht da noch mehr?
ZielTests auf einem Live-System mit
häufigen redaktionellen Änderungen
![Page 50: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/50.jpg)
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?
![Page 51: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/51.jpg)
51
Installationsudo npm install -g galenframework-cli
Was
geh
t?
• Benötigt Java >= 1.7• Passendes Betriebssystem
![Page 52: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/52.jpg)
52
Konfigurationgalen config
Was
geh
t?
![Page 53: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/53.jpg)
53
SpecW
as g
eht?
![Page 54: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/54.jpg)
54
TestsuiteW
as g
eht?
![Page 55: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/55.jpg)
55
Ausführengalen test Tests/Galen/TestSuites/Monitoring/NonContent.test
Was
geh
t?
![Page 56: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/56.jpg)
56
Was
geh
t?
![Page 57: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/57.jpg)
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?
![Page 58: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/58.jpg)
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?
![Page 59: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/59.jpg)
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
![Page 60: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/60.jpg)
60
FazitW
as g
eht?
![Page 61: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/61.jpg)
61
Wir freuen uns auf Feedback!
@punkt_de
![Page 62: Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?](https://reader038.vdocuments.site/reader038/viewer/2022103105/58f1e2141a28ab7c0e8b4591/html5/thumbnails/62.jpg)
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