Fighting Layout Bugs

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 Autor für die ct und iX

4 / 117Drei-Schichten-Architektur Presentation Layer Business Logic Layer Persistence Layer

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 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 / 117W3C Markup Validation Service

14 / 117Schnelleres Feedback möglich?

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

16 / 117W3CMarkupValidationFilter

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 / 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 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 #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 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 / 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 / 117CSS Validation Service

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 / 117

32 / 117

33 / 117Schnelleres 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 #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 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 / 117

39 / 117

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 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 / 117

59 / 117

60 / 117

61 / 117

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 / 117

64 / 117

65 / 117

66 / 117

67 / 117Demo

68 / 117

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 / 117http://fighting-layout-bugs.googlecode.com/ • DetectInvalidImageUrls • DetectTextNearOrOverlappingHorizontalEdge • DetectTextNearOrOverlappingVerticalEdge • DetectTextWithTooLowContrast

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 / 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 / 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 HTML-Elemente ausschließen

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 schreibt.

102 / 117

103 / 117

104 / 117

105 / 117

106 / 117

107 / 117

108 / 117 Idee #8 Layout-Fehler vermeiden, indem man aus Designvorlagenautomatische Akzeptanztests ableitet.

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 / 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 / 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 nicht via Tabulator- Taste erreicht werden• Unerwartete Fokus-Reihenfolge beim Elementwechsel via Tabulator-Taste

114 / 117

115 / 117

116 / 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

Fighting Layout Bugs

by Java Usergroup Berlin-Brandenburg on Feb 26, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 193

Statistics

Fighting Layout Bugs Presentation Transcript

http://www.jug-bb.de	192
http://reader.googleusercontent.com	1