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/

• mail@michaeltamm.de