Fighting Layout Bugs (webinale 2011)

Michael Tamm | optivo GmbH

Fighting Layout Bugs

2 / 95

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

3 / 95

Wer bin ich?

Michael Tamm

SystemarchitektQA Automation ExpertSelenium CommitterConference SpeakerAutor für die c't und iX

4 / 95

Drei-Schichten-Architektur

Presentation Layer

Business Logic Layer

Persistence Layer

5 / 95

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

6 / 95

Idee #1

Layout-Fehler vermeiden, indem man immer

valides HTML ausliefert.

7 / 95

Wie?• Browser Extension

– Funktioniert nur in einem Browser– Läßt den CI-Build nicht fehlschlagen

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

W3C Markup Validation Service

10 / 95

W3C Markup Validation Service

11 / 95

W3C Markup Validation Service

12 / 95

W3C Markup Validation Service

13 / 95

Schnelleres Feedback möglich?

14 / 95

Schnelleres Feedback möglich!

• Mit einem javax.servlet.Filter– Voraussetzung: HTML-Entwickler

benutzt Tomcat oder Jetty– Funktioniert in allen Browsern

15 / 95

W3CMarkupValidationFilter

16 / 95

Demo

17 / 95

Demo

18 / 95

Demo

19 / 95

Demo

20 / 95

Demo

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

23 / 95

Idee #2

Layout-Fehler vermeiden, indem man immer

valides CSS ausliefert.

24 / 95

CSS Validation Service

25 / 95

26 / 95

27 / 95

Idee #3

Layout-Fehler vermeiden, indem man auf gültigeBild-URLs überprüft.

28 / 95

DetectInvalidImageUrls

• Überprüft HTML auf sichtbare<img>- Elemente ohne oder mit ungültigen src-Attribut

• Überprüft CSS (style-Attribute,<style>-Elemente, eingebundeneStylesheets) auf ungültige Bild-URLs

• Überprüft die URL für das Favicon

http://fighting-layout-bugs.googlecode.com

29 / 95

30 / 95

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

31 / 95

32 / 95

33 / 95

34 / 95

35 / 95

36 / 95

37 / 95

38 / 95

39 / 95

40 / 95

Idee #4

Layout-Fehler entdecken, indem man die menschliche

Wahrnehmung simuliert.

41 / 95

42 / 95

43 / 95

44 / 95

45 / 95

46 / 95

47 / 95

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

http://fighting-layout-bugs.googlecode.com

48 / 95

49 / 95

50 / 95

51 / 95

52 / 95

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 dengefundenen Kandidaten mit ähnlicher Farbe undeiner gewissen Mindestlänge

http://fighting-layout-bugs.googlecode.com

53 / 95

54 / 95

55 / 95

56 / 95

57 / 95

Demo

58 / 95

59 / 95

DetectTextWithTooLowContrast

http://fighting-layout-bugs.googlecode.com

• Textpixel identifizieren (wie bereits gesehen)• Überprüfen, ob Kontrast zwischen Textpixeln

und Hintergrundpixeln groß genug ist

60 / 95

61 / 95

http://fighting-layout-bugs.googlecode.com/

• DetectInvalidImageUrls• DetectNeedsHorizontalScrolling• DetectTextNearOrOverlappingHorizontalEdge• DetectTextNearOrOverlappingVerticalEdge• DetectTextWithTooLowContrast

62 / 95

Integration in den Entwicklungsprozess

• Nigthly Build• Option 1: separater Frontend-Test,

der verschiedene wohldefinierteSeiten untersucht

• Option 2: An ausgewählten Punktenin bereits bestehenden Frontend-Tests

63 / 95

Fehlerhafte Texterkennungdurch Animation auf der

zu analysierenden Seite ...

64 / 95

65 / 95

66 / 95

67 / 95

68 / 95

69 / 95

Umgang mit „Fehlalarmen“

• Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten

70 / 95

71 / 95

72 / 95

Umgang mit „Fehlalarmen“

• Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten

• Option 2: Bestimmte HTML-Elemente ausschließen

73 / 95

Weitere typische Layoutfehler ...

74 / 95

75 / 95

76 / 95

Idee #5

Layout-Fehler entdecken, indem man den angezeigten Text

auf verdächtige Muster prüft.

77 / 95

78 / 95

79 / 95

80 / 95

81 / 95

82 / 95

83 / 95

84 / 95

85 / 95

Idee #6

Layout-Fehler entdecken,indem man Screenshots von

verschiedenen Browsern vergleicht.

86 / 95

87 / 95

Idee #7

Zukünftige Layout-Fehler vermeiden, indem man automatische Tests fürbekannte Layout-Fehler schreibt.

88 / 95

89 / 95

90 / 95

91 / 95

92 / 95

93 / 95

94 / 95

Idee #8

Layout-Fehler vermeiden, indem man aus Designvorlagen

automatische Akzeptanztests ableitet.

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/

• [email protected]