fighting layout bugs (webinale 2011)
DESCRIPTION
German presentation about automatic detection of layout bugs in web pages.TRANSCRIPT
Michael Tamm | optivo GmbH
Fighting Layout Bugs
2 / 95
Worum geht's?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
3 / 95
Wer bin ich?
Michael Tamm
SystemarchitektQA Automation ExpertSelenium CommitterConference SpeakerAutor für die c't und iX
4 / 95
Drei-Schichten-Architektur
Presentation Layer
Business Logic Layer
Persistence Layer
5 / 95
Worum geht's?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
6 / 95
Idee #1
Layout-Fehler vermeiden, indem man immer
valides HTML ausliefert.
7 / 95
Wie?• Browser Extension
– Funktioniert nur in einem Browser– Läßt den CI-Build nicht fehlschlagen
8 / 95
Wie?• Automatische Validierung
als Bestandteil des CI-Builds– Option 1: Ein separater Test, der die
entscheidenen Seiten Ihrer Website überprüft.
– Option2: Innerhalb bereits existierender Frontend-Tests
9 / 95
W3C Markup Validation Service
10 / 95
W3C Markup Validation Service
11 / 95
W3C Markup Validation Service
12 / 95
W3C Markup Validation Service
13 / 95
Schnelleres Feedback möglich?
14 / 95
Schnelleres Feedback möglich!
• Mit einem javax.servlet.Filter– Voraussetzung: HTML-Entwickler
benutzt Tomcat oder Jetty– Funktioniert in allen Browsern
15 / 95
W3CMarkupValidationFilter
16 / 95
Demo
17 / 95
Demo
18 / 95
Demo
19 / 95
Demo
20 / 95
Demo
21 / 95
Ads
• Müssen Sie invalides HTML von externen Quellen in Ihre Seiten einbinden?
• Option 1: Fügen Sie einen Switch zum Ausschalten aller Ads zu Ihrer Web-applikation hinzu.
• Option 2: Erweitern Sie den W3CMarkupValidationFilter so, dass er vor der Validierung alle Ads entfernt.
22 / 95
23 / 95
Idee #2
Layout-Fehler vermeiden, indem man immer
valides CSS ausliefert.
24 / 95
CSS Validation Service
25 / 95
26 / 95
27 / 95
Idee #3
Layout-Fehler vermeiden, indem man auf gültigeBild-URLs überprüft.
28 / 95
DetectInvalidImageUrls
• Überprüft HTML auf sichtbare<img>- Elemente ohne oder mit ungültigen src-Attribut
• Überprüft CSS (style-Attribute,<style>-Elemente, eingebundeneStylesheets) auf ungültige Bild-URLs
• Überprüft die URL für das Favicon
http://fighting-layout-bugs.googlecode.com
29 / 95
30 / 95
Worum geht's?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
31 / 95
32 / 95
33 / 95
34 / 95
35 / 95
36 / 95
37 / 95
38 / 95
39 / 95
40 / 95
Idee #4
Layout-Fehler entdecken, indem man die menschliche
Wahrnehmung simuliert.
41 / 95
42 / 95
43 / 95
44 / 95
45 / 95
46 / 95
47 / 95
SimpleTextDetector
• jQuery wird in die zu analysierende Seite injected• jQuery('*').css('color', '#000000');• ein Screenshot wird erstellt• jQuery('*').css('color', '#fffff');• es wird ein zweiter Screenshot erstellt• Vergleich beider Screenshots:
unterschiedliche Pixel sind Textpixel
http://fighting-layout-bugs.googlecode.com
48 / 95
49 / 95
50 / 95
51 / 95
52 / 95
SimpleEdgeDetector
• jQuery wird in die zu analysierende Seite injected• jQuery('*').css('color', 'transparent');• ein Screenshot wird erstellt• Bestimmen der Kandidaten für vertikale / horizontale
Kanten: alle Pixelpaare mit hohem Kontrast• Bestimmen der vertikale / horizontale Kanten:
alle vertikalen / horizontalen Sequenzen in dengefundenen Kandidaten mit ähnlicher Farbe undeiner gewissen Mindestlänge
http://fighting-layout-bugs.googlecode.com
53 / 95
54 / 95
55 / 95
56 / 95
57 / 95
Demo
58 / 95
59 / 95
DetectTextWithTooLowContrast
http://fighting-layout-bugs.googlecode.com
• Textpixel identifizieren (wie bereits gesehen)• Überprüfen, ob Kontrast zwischen Textpixeln
und Hintergrundpixeln groß genug ist
60 / 95
61 / 95
http://fighting-layout-bugs.googlecode.com/
• DetectInvalidImageUrls• DetectNeedsHorizontalScrolling• DetectTextNearOrOverlappingHorizontalEdge• DetectTextNearOrOverlappingVerticalEdge• DetectTextWithTooLowContrast
62 / 95
Integration in den Entwicklungsprozess
• Nigthly Build• Option 1: separater Frontend-Test,
der verschiedene wohldefinierteSeiten untersucht
• Option 2: An ausgewählten Punktenin bereits bestehenden Frontend-Tests
63 / 95
Fehlerhafte Texterkennungdurch Animation auf der
zu analysierenden Seite ...
64 / 95
65 / 95
66 / 95
67 / 95
68 / 95
69 / 95
Umgang mit „Fehlalarmen“
• Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten
70 / 95
71 / 95
72 / 95
Umgang mit „Fehlalarmen“
• Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten
• Option 2: Bestimmte HTML-Elemente ausschließen
73 / 95
Weitere typische Layoutfehler ...
74 / 95
75 / 95
76 / 95
Idee #5
Layout-Fehler entdecken, indem man den angezeigten Text
auf verdächtige Muster prüft.
77 / 95
78 / 95
79 / 95
80 / 95
81 / 95
82 / 95
83 / 95
84 / 95
85 / 95
Idee #6
Layout-Fehler entdecken,indem man Screenshots von
verschiedenen Browsern vergleicht.
86 / 95
87 / 95
Idee #7
Zukünftige Layout-Fehler vermeiden, indem man automatische Tests fürbekannte Layout-Fehler schreibt.
88 / 95
89 / 95
90 / 95
91 / 95
92 / 95
93 / 95
94 / 95
Idee #8
Layout-Fehler vermeiden, indem man aus Designvorlagen
automatische Akzeptanztests ableitet.
95 / 95
Danke für Ihre Aufmerksamkeit• http://validator.w3.org/• http://w3c-markup-validation-filter.googlecode.com/• http://jigsaw.w3.org/css-validator/• http://selenium.googlecode.com/• http://fighting-layout-bugs.googlecode.com/