Download - Fighting Layout Bugs (JUG-BB 2011)
Michael Tamm | optivo GmbH
Fighting Layout Bugs
2 / 117
Worum geht's?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
3 / 117
Wer bin ich?
Michael Tamm
SystemarchitektQA Automation ExpertSelenium CommitterConference SpeakerAutor für die c't und iX
4 / 117
Drei-Schichten-Architektur
Presentation Layer
Business Logic Layer
Persistence Layer
5 / 117
Worum geht's?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
6 / 117
Idee #1
Layout-Fehler vermeiden, indem man immer
valides HTML ausliefert.
7 / 117
Wie?• HTML während des Builds überprüfen
– Funktioniert nicht für dynamischerzeugtes HTML.
8 / 117
Wie?• Browser Extension
– (Funktioniert nur in einem Browser.)– (Muss manuell getriggert werden.)– Läßt den CI-Build nicht fehlschlagen.
9 / 117
Wie?• Automatische HTML-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
10 / 117
W3C Markup Validation Service
11 / 117
W3C Markup Validation Service
12 / 117
W3C Markup Validation Service
13 / 117
W3C Markup Validation Service
14 / 117
Schnelleres Feedback möglich?
15 / 117
Schnelleres Feedback möglich!
• Mit einem javax.servlet.Filter– Voraussetzung: HTML-Entwickler
benutzt Tomcat oder Jetty– Funktioniert in allen Browsern
16 / 117
W3CMarkupValidationFilter
17 / 117
How it works:– Inside the doFilter method:
responseWrapper = new TeeHttpServletResponse(response);filterChain.doFilter(request, responseWrapper);
– The TeeHttpServletReponse writes the reponsea) immediatly back to the browser andb) into an internal buffer.
– After doFilter returns, the HTML is fetched from, the buffer and send to the W3C Markup Validation Service.
– A small JavaScript snippet is appended to the response (after the closing </html> tag), which displays either a green or a red box, depending on the validation result.
18 / 117
Demo
19 / 117
Demo
20 / 117
Demo
21 / 117
Demo
22 / 117
Demo
23 / 117
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.
24 / 117
25 / 117
Idee #2
Layout-Fehler vermeiden, indem man immer
valides CSS ausliefert.
26 / 117
Wie?• CSS während des Builds überprüfen
– CSS ist nicht nur in *.css-Dateien,sondern auch in HTML-Templates in <style>-Elementen und/oder style-Attributen.
– Trotzdem:Nur eine Teilmenge des CSSzu überprüfen ist besser alsgar kein CSS zu überprüfen.
27 / 117
Wie?• Browser Extension
– (Funktioniert nur in einem Browser.)– (Muss manuell getriggert werden.)– Läßt den CI-Build nicht fehlschlagen.
28 / 117
Wie?• Automatische CSS-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
29 / 117
CSS Validation Service
30 / 117
Hinweise zum CSS Validation Service– Beschwert sich über einige CSS-Hacks wie:... { *display: ... }
– Beschwert sich nicht über:* html ... { ... }
– Beschwert sich über unbekannteCSS-Properties / -Werte wie beispielsweise:... { -moz-border-radius: ... }... { filter: progid:DXImageTransform.... } ... { ...: expression(...) }
31 / 117
32 / 117
33 / 117
Schnelleres Feedback möglich!
• Mit einem javax.servlet.Filter– Voraussetzung: HTML-Entwickler
benutzt Tomcat oder Jetty– Funktioniert in allen Browsern
34 / 117
35 / 117
36 / 117
Idee #3
Layout-Fehler vermeiden, indem man auf gültigeBild-URLs überprüft.
37 / 117
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
38 / 117
39 / 117
40 / 117
Worum geht's?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
41 / 117
42 / 117
43 / 117
44 / 117
45 / 117
46 / 117
47 / 117
48 / 117
49 / 117
50 / 117
Idee #4
Layout-Fehler entdecken, indem man die menschliche
Wahrnehmung simuliert.
51 / 117
52 / 117
53 / 117
54 / 117
55 / 117
56 / 117
57 / 117
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
58 / 117
59 / 117
60 / 117
61 / 117
62 / 117
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
63 / 117
64 / 117
65 / 117
66 / 117
67 / 117
Demo
68 / 117
69 / 117
DetectTextWithTooLowContrast
http://fighting-layout-bugs.googlecode.com
• Textpixel identifizieren (wie bereits gesehen)• Überprüfen, ob Kontrast zwischen Textpixeln
und Hintergrundpixeln groß genug ist
70 / 117
http://fighting-layout-bugs.googlecode.com/
• DetectInvalidImageUrls• DetectTextNearOrOverlappingHorizontalEdge• DetectTextNearOrOverlappingVerticalEdge• DetectTextWithTooLowContrast
71 / 117
http://fighting-layout-bugs.googlecode.com/
• Wird bereits eingesetzt beiAOL, eBay, Google, und Yahoo
• Soll(te) mal so etwas wie FindBugs werden:– FindBugs: typische Programmierfehler
in Java-Klassen finden– FLB: typische Layoutfehler
in Webseiten finden• Freue mich über jede Form
von Feedback und/oder Mitarbeit
72 / 117
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
73 / 117
Fehlerhafte Texterkennungdurch Animation auf der
zu analysierenden Seite ...
74 / 117
75 / 117
76 / 117
77 / 117
78 / 117
79 / 117
Umgang mit „Fehlalarmen“
• Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten
80 / 117
81 / 117
82 / 117
Umgang mit „Fehlalarmen“
• Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten
• Option 2: Bestimmte HTML-Elemente ausschließen
83 / 117
Weitere typische Layoutfehler ...
84 / 117
85 / 117
86 / 117
87 / 117
Idee #5
Layout-Fehler entdecken, indem man den angezeigten Text
auf verdächtige Muster prüft.
88 / 117
89 / 117
90 / 117
91 / 117
92 / 117
93 / 117
94 / 117
95 / 117
96 / 117
97 / 117
Idee #6
Layout-Fehler entdecken,indem man Screenshots von
verschiedenen Browsern vergleicht.
98 / 117
99 / 117
100 / 117
101 / 117
Idee #7
Zukünftige Layout-Fehler vermeiden, indem man automatische Tests fürbekannte Layout-Fehler schreibt.
102 / 117
103 / 117
104 / 117
105 / 117
106 / 117
107 / 117
108 / 117
Idee #8
Layout-Fehler vermeiden, indem man aus Designvorlagen
automatische Akzeptanztests ableitet.
109 / 117
Beispiele
• Ist das Logo / die Hauptnavigationauf jeder Seite an der gleichen Stelle?
• Läuft Text über die Spalten des für die Seite definierten Grids hinaus?
• Wird an irgendeiner Stelle ein falscher Font benutzt?
110 / 117
Lange Rede, kurzer Sinn:
• Layout-Fehler können mittels automatischer Tests bekämpft werden:– HTML validieren– CSS validieren– Common Detectors von FLB einsetzen– Automatische Tests für erkannte
Layout-Fehler / Designvorlagen schreiben
111 / 117
One more thing ...
112 / 117
One more thing ...
Usability-Fehlerdurch automatische Tests erkennen.
113 / 117
Beispiele
• Man kann einem grafischen Button nicht ansehen, ob er den Fokus hat.
• Ein Button kann nicht via Tabulator-Taste erreicht werden
• Unerwartete Fokus-Reihenfolge beim Elementwechsel via Tabulator-Taste
114 / 117
115 / 117
116 / 117
117 / 117
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/• http://web-accessibility-testing.googlecode.com/