punkt.de – layout-testing: was geht, was bringt´s, wer braucht´s?
Post on 15-Apr-2017
403 Views
Preview:
TRANSCRIPT
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
top related