Fighting Layout Bugs (JUG-BB 2011)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Fighting Layout Bugs (JUG-BB 2011)

on

  • 1,271 views

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

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

Statistics

Views

Total Views
1,271
Views on SlideShare
1,271
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Fighting Layout Bugs (JUG-BB 2011) Presentation Transcript

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