German presentation about automatic detection of layout bugs in web pages.

1. Michael Tamm | optivo GmbH
Fighting Layout Bugs

2. 2 / 95
Worum geht's?
• 2 Folien Einführung
• Drei alte bekannte Gegenmaßnahmen
• Neue innovative Gegenmaßnahmen

3. 3 / 95
Wer bin ich?
Michael Tamm
Systemarchitekt
QA Automation Expert
Selenium Committer
Conference Speaker
Autor für die c't und iX

4. 4 / 95
Drei-Schichten-Architektur
Presentation Layer
Business Logic Layer
Persistence Layer

5. 5 / 95
Worum geht's?
• 2 Folien Einführung
• Drei alte bekannte Gegenmaßnahmen
• Neue innovative Gegenmaßnahmen

6. 6 / 95
Idee #1
Layout-Fehler vermeiden,
indem man immer
valides HTML ausliefert.

7. 7 / 95
Wie?
• Browser Extension
– Funktioniert nur in einem Browser
– Läßt den CI-Build nicht fehlschlagen

8. 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. 9 / 95
W3C Markup Validation Service

10. 10 / 95
W3C Markup Validation Service

11. 11 / 95
W3C Markup Validation Service

12. 12 / 95
W3C Markup Validation Service

13. 13 / 95
Schnelleres Feedback möglich?

14. 14 / 95
Schnelleres Feedback möglich!
• Mit einem javax.servlet.Filter
– Voraussetzung: HTML-Entwickler
benutzt Tomcat oder Jetty
– Funktioniert in allen Browsern

15. 15 / 95
W3CMarkupValidationFilter

16. 16 / 95
Demo

17. 17 / 95
Demo

18. 18 / 95
Demo

19. 19 / 95
Demo

20. 20 / 95
Demo

21. 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. 22 / 95

23. 23 / 95
Idee #2
Layout-Fehler vermeiden,
indem man immer
valides CSS ausliefert.

24. 24 / 95
CSS Validation Service

25. 25 / 95

26. 26 / 95

27. 27 / 95
Idee #3
Layout-Fehler vermeiden,
indem man auf gültige
Bild-URLs überprüft.

28. 28 / 95
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

29. 29 / 95

30. 30 / 95
Worum geht's?
• 2 Folien Einführung
• Drei alte bekannte Gegenmaßnahmen
• Neue innovative Gegenmaßnahmen

31. 31 / 95

32. 32 / 95

33. 33 / 95

34. 34 / 95

35. 35 / 95

36. 36 / 95

37. 37 / 95

38. 38 / 95

39. 39 / 95

40. 40 / 95
Idee #4
Layout-Fehler entdecken,
indem man die menschliche
Wahrnehmung simuliert.

41. 41 / 95

42. 42 / 95

43. 43 / 95

44. 44 / 95

45. 45 / 95

46. 46 / 95

47. 47 / 95
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

48. 48 / 95

49. 49 / 95

50. 50 / 95

51. 51 / 95

52. 52 / 95
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

53. 53 / 95

54. 54 / 95

55. 55 / 95

56. 56 / 95

57. 57 / 95
Demo

58. 58 / 95

59. 59 / 95
http://fighting-layout-bugs.googlecode.com
DetectTextWithTooLowContrast
• Textpixel identifizieren (wie bereits gesehen)
• Überprüfen, ob Kontrast zwischen Textpixeln
und Hintergrundpixeln groß genug ist

60. 60 / 95

61. 61 / 95
http://fighting-layout-bugs.googlecode.com/
• DetectInvalidImageUrls
• DetectNeedsHorizontalScrolling
• DetectTextNearOrOverlappingHorizontalEdge
• DetectTextNearOrOverlappingVerticalEdge
• DetectTextWithTooLowContrast

62. 62 / 95
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

63. 63 / 95
Fehlerhafte Texterkennung
durch Animation auf der
zu analysierenden Seite ...

64. 64 / 95

65. 65 / 95

66. 66 / 95

67. 67 / 95

68. 68 / 95

69. 69 / 95
Umgang mit „Fehlalarmen“
• Option 1: Umkonfiguration des
Kontrastschwellwerts für Kanten

70. 70 / 95

71. 71 / 95

72. 72 / 95
Umgang mit „Fehlalarmen“
• Option 1: Umkonfiguration des
Kontrastschwellwerts für Kanten
• Option 2: Bestimmte HTML-Elemente
ausschließen

73. 73 / 95
Weitere typische
Layoutfehler ...

74. 74 / 95

75. 75 / 95

76. 76 / 95
Idee #5
Layout-Fehler entdecken,
indem man den angezeigten Text
auf verdächtige Muster prüft.

77. 77 / 95

78. 78 / 95

79. 79 / 95

80. 80 / 95

81. 81 / 95

82. 82 / 95

83. 83 / 95

84. 84 / 95

85. 85 / 95
Idee #6
Layout-Fehler entdecken,
indem man Screenshots von
verschiedenen Browsern vergleicht.

86. 86 / 95

87. 87 / 95
Idee #7
Zukünftige Layout-Fehler vermeiden,
indem man automatische Tests für
bekannte Layout-Fehler schreibt.

88. 88 / 95

89. 89 / 95

90. 90 / 95

91. 91 / 95

92. 92 / 95

93. 93 / 95

94. 94 / 95
Idee #8
Layout-Fehler vermeiden,
indem man aus Designvorlagen
automatische Akzeptanztests ableitet.

95. 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/
• mail@michaeltamm.de