Successfully reported this slideshow.

Fighting Layout Bugs (webinale 2011)

1

Share

Upcoming SlideShare
Fighting Layout Bugs
Fighting Layout Bugs
Loading in …3
×
1 of 95
1 of 95

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Fighting Layout Bugs (webinale 2011)

  1. 1. Michael Tamm | optivo GmbH Fighting Layout Bugs
  2. 2. 2 / 95 Worum geht's? • 2 Folien Einführung • Drei alte bekannte Gegenmaßnahmen • Neue innovative Gegenmaßnahmen
  3. 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. 4 / 95 Drei-Schichten-Architektur Presentation Layer Business Logic Layer Persistence Layer
  5. 5. 5 / 95 Worum geht's? • 2 Folien Einführung • Drei alte bekannte Gegenmaßnahmen • Neue innovative Gegenmaßnahmen
  6. 6. 6 / 95 Idee #1 Layout-Fehler vermeiden, indem man immer valides HTML ausliefert.
  7. 7. 7 / 95 Wie? • Browser Extension – Funktioniert nur in einem Browser – Läßt den CI-Build nicht fehlschlagen
  8. 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. 9 / 95 W3C Markup Validation Service
  10. 10. 10 / 95 W3C Markup Validation Service
  11. 11. 11 / 95 W3C Markup Validation Service
  12. 12. 12 / 95 W3C Markup Validation Service
  13. 13. 13 / 95 Schnelleres Feedback möglich?
  14. 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. 15 / 95 W3CMarkupValidationFilter
  16. 16. 16 / 95 Demo
  17. 17. 17 / 95 Demo
  18. 18. 18 / 95 Demo
  19. 19. 19 / 95 Demo
  20. 20. 20 / 95 Demo
  21. 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. 22 / 95
  23. 23. 23 / 95 Idee #2 Layout-Fehler vermeiden, indem man immer valides CSS ausliefert.
  24. 24. 24 / 95 CSS Validation Service
  25. 25. 25 / 95
  26. 26. 26 / 95
  27. 27. 27 / 95 Idee #3 Layout-Fehler vermeiden, indem man auf gültige Bild-URLs überprüft.
  28. 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. 29 / 95
  30. 30. 30 / 95 Worum geht's? • 2 Folien Einführung • Drei alte bekannte Gegenmaßnahmen • Neue innovative Gegenmaßnahmen
  31. 31. 31 / 95
  32. 32. 32 / 95
  33. 33. 33 / 95
  34. 34. 34 / 95
  35. 35. 35 / 95
  36. 36. 36 / 95
  37. 37. 37 / 95
  38. 38. 38 / 95
  39. 39. 39 / 95
  40. 40. 40 / 95 Idee #4 Layout-Fehler entdecken, indem man die menschliche Wahrnehmung simuliert.
  41. 41. 41 / 95
  42. 42. 42 / 95
  43. 43. 43 / 95
  44. 44. 44 / 95
  45. 45. 45 / 95
  46. 46. 46 / 95
  47. 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. 48 / 95
  49. 49. 49 / 95
  50. 50. 50 / 95
  51. 51. 51 / 95
  52. 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. 53 / 95
  54. 54. 54 / 95
  55. 55. 55 / 95
  56. 56. 56 / 95
  57. 57. 57 / 95 Demo
  58. 58. 58 / 95
  59. 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. 60 / 95
  61. 61. 61 / 95 http://fighting-layout-bugs.googlecode.com/ • DetectInvalidImageUrls • DetectNeedsHorizontalScrolling • DetectTextNearOrOverlappingHorizontalEdge • DetectTextNearOrOverlappingVerticalEdge • DetectTextWithTooLowContrast
  62. 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. 63 / 95 Fehlerhafte Texterkennung durch Animation auf der zu analysierenden Seite ...
  64. 64. 64 / 95
  65. 65. 65 / 95
  66. 66. 66 / 95
  67. 67. 67 / 95
  68. 68. 68 / 95
  69. 69. 69 / 95 Umgang mit „Fehlalarmen“ • Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten
  70. 70. 70 / 95
  71. 71. 71 / 95
  72. 72. 72 / 95 Umgang mit „Fehlalarmen“ • Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten • Option 2: Bestimmte HTML-Elemente ausschließen
  73. 73. 73 / 95 Weitere typische Layoutfehler ...
  74. 74. 74 / 95
  75. 75. 75 / 95
  76. 76. 76 / 95 Idee #5 Layout-Fehler entdecken, indem man den angezeigten Text auf verdächtige Muster prüft.
  77. 77. 77 / 95
  78. 78. 78 / 95
  79. 79. 79 / 95
  80. 80. 80 / 95
  81. 81. 81 / 95
  82. 82. 82 / 95
  83. 83. 83 / 95
  84. 84. 84 / 95
  85. 85. 85 / 95 Idee #6 Layout-Fehler entdecken, indem man Screenshots von verschiedenen Browsern vergleicht.
  86. 86. 86 / 95
  87. 87. 87 / 95 Idee #7 Zukünftige Layout-Fehler vermeiden, indem man automatische Tests für bekannte Layout-Fehler schreibt.
  88. 88. 88 / 95
  89. 89. 89 / 95
  90. 90. 90 / 95
  91. 91. 91 / 95
  92. 92. 92 / 95
  93. 93. 93 / 95
  94. 94. 94 / 95 Idee #8 Layout-Fehler vermeiden, indem man aus Designvorlagen automatische Akzeptanztests ableitet.
  95. 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

×