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
Systemarchitekt
QA Automation Expert
Selenium Committer
Conference Speaker
Autor 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 dynamisch
erzeugtes 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 reponse
a) immediatly back to the browser and
b) 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 CSS
zu überprüfen ist besser als
gar 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 unbekannte
CSS-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ültige
Bild-URLs überprüft.

37 / 117
http://fighting-layout-bugs.googlecode.com
DetectInvalidImageUrls
• Überprüft HTML auf sichtbare
<img>- Elemente ohne oder mit
ungültigen src-Attribut
• Überprüft CSS (style-Attribute,
<style>-Elemente, eingebundene
Stylesheets) auf ungültige Bild-URLs
• Überprüft die URL für das Favicon

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
http://fighting-layout-bugs.googlecode.com
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

58 / 117

59 / 117

60 / 117

61 / 117

62 / 117
http://fighting-layout-bugs.googlecode.com
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 den
gefundenen Kandidaten mit ähnlicher Farbe und
einer gewissen Mindestlänge

63 / 117

64 / 117

65 / 117

66 / 117

67 / 117
Demo

68 / 117

69 / 117
http://fighting-layout-bugs.googlecode.com
DetectTextWithTooLowContrast
• 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 bei
AOL, 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 wohldefinierte
Seiten untersucht
• Option 2: An ausgewählten Punkten
in bereits bestehenden Frontend-Tests

73 / 117
Fehlerhafte Texterkennung
durch 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ür
bekannte 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 Hauptnavigation
auf 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-Fehler
durch 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/
• mail@michaeltamm.de