Michael Tamm | optivo GmbHFighting Layout Bugs
2 / 117         Worum gehts?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
3 / 117Wer bin ich?    Michael Tamm    Systemarchitekt    QA Automation Expert    Selenium Committer    Conference Speaker...
4 / 117Drei-Schichten-Architektur       Presentation Layer      Business Logic Layer       Persistence Layer
5 / 117         Worum gehts?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
6 / 117       Idee #1Layout-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 werd...
9 / 117                   Wie?• Automatische HTML-Validierung  als Bestandteil des CI-Builds  – Option 1: Ein separater Te...
10 / 117W3C Markup Validation Service
11 / 117W3C Markup Validation Service
12 / 117W3C Markup Validation Service
13 / 117W3C Markup Validation Service
14 / 117Schnelleres Feedback möglich?
15 / 117Schnelleres Feedback möglich!• Mit einem javax.servlet.Filter  – Voraussetzung: HTML-Entwickler    benutzt Tomcat ...
16 / 117W3CMarkupValidationFilter
17 / 117How it works:  – Inside the doFilter method:   responseWrapper = new TeeHttpServletResponse(response);   filterCha...
18 / 117Demo
19 / 117Demo
20 / 117Demo
21 / 117Demo
22 / 117Demo
23 / 117                Ads• Müssen Sie invalides HTML von externen  Quellen in Ihre Seiten einbinden?• Option 1: Fügen Si...
24 / 117
25 / 117       Idee #2Layout-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 i...
27 / 117                   Wie?• Browser Extension  – (Funktioniert nur in einem Browser.)  – (Muss manuell getriggert wer...
28 / 117                   Wie?• Automatische CSS-Validierung  als Bestandteil des CI-Builds  – Option 1: Ein separater Te...
29 / 117CSS Validation Service
30 / 117Hinweise zum CSS Validation Service  – Beschwert sich über einige CSS-Hacks wie:   ... { *display: ... }  – Beschw...
31 / 117
32 / 117
33 / 117Schnelleres Feedback möglich!• Mit einem javax.servlet.Filter  – Voraussetzung: HTML-Entwickler    benutzt Tomcat ...
34 / 117
35 / 117
36 / 117       Idee #3Layout-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...
38 / 117
39 / 117
40 / 117         Worum gehts?• 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 analysieren...
58 / 117
59 / 117
60 / 117
61 / 117
62 / 117    http://fighting-layout-bugs.googlecode.com           SimpleEdgeDetector• jQuery wird in die zu analysierende S...
63 / 117
64 / 117
65 / 117
66 / 117
67 / 117Demo
68 / 117
69 / 117  http://fighting-layout-bugs.googlecode.comDetectTextWithTooLowContrast • Textpixel identifizieren (wie bereits g...
70 / 117http://fighting-layout-bugs.googlecode.com/  • DetectInvalidImageUrls  • DetectTextNearOrOverlappingHorizontalEdge...
71 / 117http://fighting-layout-bugs.googlecode.com/  • Wird bereits eingesetzt bei    AOL, eBay, Google, und Yahoo  • Soll...
72 / 117       Integration in den      Entwicklungsprozess• Nigthly Build• Option 1: separater Frontend-Test,  der verschi...
73 / 117Fehlerhafte Texterkennung durch Animation auf derzu 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 HT...
83 / 117Weitere typischeLayoutfehler ...
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 vonverschiedenen Browsern vergleicht.
98 / 117
99 / 117
100 / 117
101 / 117            Idee #7Zukünftige Layout-Fehler vermeiden, indem man automatische Tests für  bekannte Layout-Fehler s...
102 / 117
103 / 117
104 / 117
105 / 117
106 / 117
107 / 117
108 / 117             Idee #8      Layout-Fehler vermeiden,   indem man aus Designvorlagenautomatische Akzeptanztests able...
109 / 117               Beispiele• Ist das Logo / die Hauptnavigation  auf jeder Seite an der gleichen Stelle?• Läuft Text...
110 / 117   Lange Rede, kurzer Sinn:• Layout-Fehler können mittels  automatischer Tests bekämpft werden:  – HTML validiere...
111 / 117One 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 n...
114 / 117
115 / 117
116 / 117
117 / 117Danke für Ihre Aufmerksamkeit• http://validator.w3.org/• http://w3c-markup-validation-filter.googlecode.com/• htt...
Nächste SlideShare
Wird geladen in …5
×

Fighting Layout Bugs (JUG-BB 2011)

1.642 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.642
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
11
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Fighting Layout Bugs (JUG-BB 2011)

  1. 1. Michael Tamm | optivo GmbHFighting Layout Bugs
  2. 2. 2 / 117 Worum gehts?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
  3. 3. 3 / 117Wer bin ich? Michael Tamm Systemarchitekt QA Automation Expert Selenium Committer Conference Speaker Autor für die ct und iX
  4. 4. 4 / 117Drei-Schichten-Architektur Presentation Layer Business Logic Layer Persistence Layer
  5. 5. 5 / 117 Worum gehts?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
  6. 6. 6 / 117 Idee #1Layout-Fehler vermeiden, indem man immer valides HTML ausliefert.
  7. 7. 7 / 117 Wie?• HTML während des Builds überprüfen – Funktioniert nicht für dynamisch erzeugtes HTML.
  8. 8. 8 / 117 Wie?• Browser Extension – (Funktioniert nur in einem Browser.) – (Muss manuell getriggert werden.) – Läßt den CI-Build nicht fehlschlagen.
  9. 9. 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. 10. 10 / 117W3C Markup Validation Service
  11. 11. 11 / 117W3C Markup Validation Service
  12. 12. 12 / 117W3C Markup Validation Service
  13. 13. 13 / 117W3C Markup Validation Service
  14. 14. 14 / 117Schnelleres Feedback möglich?
  15. 15. 15 / 117Schnelleres Feedback möglich!• Mit einem javax.servlet.Filter – Voraussetzung: HTML-Entwickler benutzt Tomcat oder Jetty – Funktioniert in allen Browsern
  16. 16. 16 / 117W3CMarkupValidationFilter
  17. 17. 17 / 117How 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. 18. 18 / 117Demo
  19. 19. 19 / 117Demo
  20. 20. 20 / 117Demo
  21. 21. 21 / 117Demo
  22. 22. 22 / 117Demo
  23. 23. 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. 24. 24 / 117
  25. 25. 25 / 117 Idee #2Layout-Fehler vermeiden, indem man immer valides CSS ausliefert.
  26. 26. 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. 27. 27 / 117 Wie?• Browser Extension – (Funktioniert nur in einem Browser.) – (Muss manuell getriggert werden.) – Läßt den CI-Build nicht fehlschlagen.
  28. 28. 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. 29. 29 / 117CSS Validation Service
  30. 30. 30 / 117Hinweise 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. 31. 31 / 117
  32. 32. 32 / 117
  33. 33. 33 / 117Schnelleres Feedback möglich!• Mit einem javax.servlet.Filter – Voraussetzung: HTML-Entwickler benutzt Tomcat oder Jetty – Funktioniert in allen Browsern
  34. 34. 34 / 117
  35. 35. 35 / 117
  36. 36. 36 / 117 Idee #3Layout-Fehler vermeiden, indem man auf gültige Bild-URLs überprüft.
  37. 37. 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. 38. 38 / 117
  39. 39. 39 / 117
  40. 40. 40 / 117 Worum gehts?• 2 Folien Einführung• Drei alte bekannte Gegenmaßnahmen• Neue innovative Gegenmaßnahmen
  41. 41. 41 / 117
  42. 42. 42 / 117
  43. 43. 43 / 117
  44. 44. 44 / 117
  45. 45. 45 / 117
  46. 46. 46 / 117
  47. 47. 47 / 117
  48. 48. 48 / 117
  49. 49. 49 / 117
  50. 50. 50 / 117 Idee #4 Layout-Fehler entdecken,indem man die menschliche Wahrnehmung simuliert.
  51. 51. 51 / 117
  52. 52. 52 / 117
  53. 53. 53 / 117
  54. 54. 54 / 117
  55. 55. 55 / 117
  56. 56. 56 / 117
  57. 57. 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. 58. 58 / 117
  59. 59. 59 / 117
  60. 60. 60 / 117
  61. 61. 61 / 117
  62. 62. 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. 63. 63 / 117
  64. 64. 64 / 117
  65. 65. 65 / 117
  66. 66. 66 / 117
  67. 67. 67 / 117Demo
  68. 68. 68 / 117
  69. 69. 69 / 117 http://fighting-layout-bugs.googlecode.comDetectTextWithTooLowContrast • Textpixel identifizieren (wie bereits gesehen) • Überprüfen, ob Kontrast zwischen Textpixeln und Hintergrundpixeln groß genug ist
  70. 70. 70 / 117http://fighting-layout-bugs.googlecode.com/ • DetectInvalidImageUrls • DetectTextNearOrOverlappingHorizontalEdge • DetectTextNearOrOverlappingVerticalEdge • DetectTextWithTooLowContrast
  71. 71. 71 / 117http://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. 72. 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. 73. 73 / 117Fehlerhafte Texterkennung durch Animation auf derzu analysierenden Seite ...
  74. 74. 74 / 117
  75. 75. 75 / 117
  76. 76. 76 / 117
  77. 77. 77 / 117
  78. 78. 78 / 117
  79. 79. 79 / 117 Umgang mit „Fehlalarmen“• Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten
  80. 80. 80 / 117
  81. 81. 81 / 117
  82. 82. 82 / 117 Umgang mit „Fehlalarmen“• Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten• Option 2: Bestimmte HTML-Elemente ausschließen
  83. 83. 83 / 117Weitere typischeLayoutfehler ...
  84. 84. 84 / 117
  85. 85. 85 / 117
  86. 86. 86 / 117
  87. 87. 87 / 117 Idee #5 Layout-Fehler entdecken,indem man den angezeigten Text auf verdächtige Muster prüft.
  88. 88. 88 / 117
  89. 89. 89 / 117
  90. 90. 90 / 117
  91. 91. 91 / 117
  92. 92. 92 / 117
  93. 93. 93 / 117
  94. 94. 94 / 117
  95. 95. 95 / 117
  96. 96. 96 / 117
  97. 97. 97 / 117 Idee #6 Layout-Fehler entdecken, indem man Screenshots vonverschiedenen Browsern vergleicht.
  98. 98. 98 / 117
  99. 99. 99 / 117
  100. 100. 100 / 117
  101. 101. 101 / 117 Idee #7Zukünftige Layout-Fehler vermeiden, indem man automatische Tests für bekannte Layout-Fehler schreibt.
  102. 102. 102 / 117
  103. 103. 103 / 117
  104. 104. 104 / 117
  105. 105. 105 / 117
  106. 106. 106 / 117
  107. 107. 107 / 117
  108. 108. 108 / 117 Idee #8 Layout-Fehler vermeiden, indem man aus Designvorlagenautomatische Akzeptanztests ableitet.
  109. 109. 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. 110. 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. 111. 111 / 117One more thing ...
  112. 112. 112 / 117 One more thing ... Usability-Fehlerdurch automatische Tests erkennen.
  113. 113. 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. 114. 114 / 117
  115. 115. 115 / 117
  116. 116. 116 / 117
  117. 117. 117 / 117Danke 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

×