SlideShare ist ein Scribd-Unternehmen logo
1 von 117
Downloaden Sie, um offline zu lesen
Michael Tamm | optivo GmbH


Fighting Layout Bugs
2 / 117




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




Wer bin ich?
    Michael Tamm

    Systemarchitekt
    QA Automation Expert
    Selenium Committer
    Conference Speaker
    Autor für die c't und iX
4 / 117




Drei-Schichten-Architektur


       Presentation Layer

      Business Logic Layer

       Persistence Layer
5 / 117




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




       Idee #1

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




W3C Markup Validation Service
11 / 117




W3C Markup Validation Service
12 / 117




W3C Markup Validation Service
13 / 117




W3C Markup Validation Service
14 / 117




Schnelleres Feedback möglich?
15 / 117




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




W3CMarkupValidationFilter
17 / 117


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




Demo
19 / 117




Demo
20 / 117




Demo
21 / 117




Demo
22 / 117




Demo
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 #2

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




CSS Validation Service
30 / 117




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




Schnelleres 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 #3

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




         Worum geht's?
• 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 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 / 117




Demo
68 / 117
69 / 117
  http://fighting-layout-bugs.googlecode.com


DetectTextWithTooLowContrast
 • Textpixel identifizieren (wie bereits gesehen)
 • Überprüfen, ob Kontrast zwischen Textpixeln
   und Hintergrundpixeln groß genug ist
70 / 117




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

  • DetectInvalidImageUrls
  • DetectTextNearOrOverlappingHorizontalEdge
  • DetectTextNearOrOverlappingVerticalEdge
  • DetectTextWithTooLowContrast
71 / 117




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




Fehlerhafte Texterkennung
 durch Animation auf der
zu 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 / 117




Weitere typische
Layoutfehler ...
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 von
verschiedenen Browsern vergleicht.
98 / 117
99 / 117
100 / 117
101 / 117




            Idee #7

Zukü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 Designvorlagen
automatische 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 / 117




One more thing ...
112 / 117




     One more thing ...

          Usability-Fehler
durch 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 / 117




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/
• http://web-accessibility-testing.googlecode.com/



• mail@michaeltamm.de

Weitere ähnliche Inhalte

Andere mochten auch

Webkunst aus verschiedenen_kulturen1
Webkunst aus verschiedenen_kulturen1Webkunst aus verschiedenen_kulturen1
Webkunst aus verschiedenen_kulturen1katja_w
 
Súmula do Jogo: Salgueiro-PE 1x0 Botafogo-PB
Súmula do Jogo: Salgueiro-PE 1x0 Botafogo-PBSúmula do Jogo: Salgueiro-PE 1x0 Botafogo-PB
Súmula do Jogo: Salgueiro-PE 1x0 Botafogo-PBBotashow
 
Shs revenue management aber richtig 2012-05-30
Shs   revenue management aber richtig 2012-05-30Shs   revenue management aber richtig 2012-05-30
Shs revenue management aber richtig 2012-05-30Wilko Weber
 
Die Medienkompetenz der Generation Z in Schule und Ausbildung nutzen
Die Medienkompetenz der Generation Z in Schule und Ausbildung nutzenDie Medienkompetenz der Generation Z in Schule und Ausbildung nutzen
Die Medienkompetenz der Generation Z in Schule und Ausbildung nutzenCorporate Learning & Change GmbH
 
Apre 3t10
Apre 3t10Apre 3t10
Apre 3t10Cteep
 
Die gute fee und der kater
Die gute fee und der katerDie gute fee und der kater
Die gute fee und der katerGeorg Montsch
 
Wir gehen jetzt auf bärenjagd2003 fertig
Wir gehen jetzt auf bärenjagd2003 fertigWir gehen jetzt auf bärenjagd2003 fertig
Wir gehen jetzt auf bärenjagd2003 fertigguest42e757a
 
Modernes Bildungsmanagement in Zeiten des Fachkräftemangels. Wie Sie Mitarbei...
Modernes Bildungsmanagement in Zeiten des Fachkräftemangels. Wie Sie Mitarbei...Modernes Bildungsmanagement in Zeiten des Fachkräftemangels. Wie Sie Mitarbei...
Modernes Bildungsmanagement in Zeiten des Fachkräftemangels. Wie Sie Mitarbei...Thomas Jenewein
 
Monika Wimmer, Wolfgang Richter et al.: Fit bleiben nach dem Medientraining
Monika Wimmer, Wolfgang Richter et al.: Fit bleiben nach dem MedientrainingMonika Wimmer, Wolfgang Richter et al.: Fit bleiben nach dem Medientraining
Monika Wimmer, Wolfgang Richter et al.: Fit bleiben nach dem MedientrainingStefanie Kollenberg, Raabe Verlag
 
Evaluation des Projektes TUDfolio - Kurzbericht
Evaluation des Projektes TUDfolio - KurzberichtEvaluation des Projektes TUDfolio - Kurzbericht
Evaluation des Projektes TUDfolio - KurzberichtAndrea Lißner
 
Citizen journalismus
Citizen journalismusCitizen journalismus
Citizen journalismusMartina197
 

Andere mochten auch (17)

Webkunst aus verschiedenen_kulturen1
Webkunst aus verschiedenen_kulturen1Webkunst aus verschiedenen_kulturen1
Webkunst aus verschiedenen_kulturen1
 
Kirchen und Theologie im Social Web
Kirchen und Theologie im Social WebKirchen und Theologie im Social Web
Kirchen und Theologie im Social Web
 
imatics & ModelLabs Integration
imatics & ModelLabs Integrationimatics & ModelLabs Integration
imatics & ModelLabs Integration
 
Siagie 2.0 inicial
Siagie 2.0 inicialSiagie 2.0 inicial
Siagie 2.0 inicial
 
2384 stumag
2384 stumag2384 stumag
2384 stumag
 
Súmula do Jogo: Salgueiro-PE 1x0 Botafogo-PB
Súmula do Jogo: Salgueiro-PE 1x0 Botafogo-PBSúmula do Jogo: Salgueiro-PE 1x0 Botafogo-PB
Súmula do Jogo: Salgueiro-PE 1x0 Botafogo-PB
 
Shs revenue management aber richtig 2012-05-30
Shs   revenue management aber richtig 2012-05-30Shs   revenue management aber richtig 2012-05-30
Shs revenue management aber richtig 2012-05-30
 
Stand SHOPPING
Stand SHOPPINGStand SHOPPING
Stand SHOPPING
 
Die Medienkompetenz der Generation Z in Schule und Ausbildung nutzen
Die Medienkompetenz der Generation Z in Schule und Ausbildung nutzenDie Medienkompetenz der Generation Z in Schule und Ausbildung nutzen
Die Medienkompetenz der Generation Z in Schule und Ausbildung nutzen
 
Apre 3t10
Apre 3t10Apre 3t10
Apre 3t10
 
Die gute fee und der kater
Die gute fee und der katerDie gute fee und der kater
Die gute fee und der kater
 
Wir gehen jetzt auf bärenjagd2003 fertig
Wir gehen jetzt auf bärenjagd2003 fertigWir gehen jetzt auf bärenjagd2003 fertig
Wir gehen jetzt auf bärenjagd2003 fertig
 
Modernes Bildungsmanagement in Zeiten des Fachkräftemangels. Wie Sie Mitarbei...
Modernes Bildungsmanagement in Zeiten des Fachkräftemangels. Wie Sie Mitarbei...Modernes Bildungsmanagement in Zeiten des Fachkräftemangels. Wie Sie Mitarbei...
Modernes Bildungsmanagement in Zeiten des Fachkräftemangels. Wie Sie Mitarbei...
 
GRACIAS PAPAS
GRACIAS PAPASGRACIAS PAPAS
GRACIAS PAPAS
 
Monika Wimmer, Wolfgang Richter et al.: Fit bleiben nach dem Medientraining
Monika Wimmer, Wolfgang Richter et al.: Fit bleiben nach dem MedientrainingMonika Wimmer, Wolfgang Richter et al.: Fit bleiben nach dem Medientraining
Monika Wimmer, Wolfgang Richter et al.: Fit bleiben nach dem Medientraining
 
Evaluation des Projektes TUDfolio - Kurzbericht
Evaluation des Projektes TUDfolio - KurzberichtEvaluation des Projektes TUDfolio - Kurzbericht
Evaluation des Projektes TUDfolio - Kurzbericht
 
Citizen journalismus
Citizen journalismusCitizen journalismus
Citizen journalismus
 

Ähnlich wie Fighting Layout Bugs (JUG-BB 2011)

Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebSebastian Springer
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine TricksJens Grochtdreis
 
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018Christian Mücke
 
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenHightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenPeter Rozek
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Andreas Wissel
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptSebastian Springer
 
Build Patterns - Patterns und Best Practices für den Build Prozess
Build Patterns - Patterns und Best Practices für den Build ProzessBuild Patterns - Patterns und Best Practices für den Build Prozess
Build Patterns - Patterns und Best Practices für den Build ProzessRalf Abramowitsch
 
Continous Deployment - Schneller entwickeln
Continous Deployment - Schneller entwickelnContinous Deployment - Schneller entwickeln
Continous Deployment - Schneller entwickelnMartin Seibert
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenJonathan Weiß
 
Testgetriebene Entwicklung mit JavaScript - webtech 2010
Testgetriebene Entwicklung mit JavaScript - webtech 2010Testgetriebene Entwicklung mit JavaScript - webtech 2010
Testgetriebene Entwicklung mit JavaScript - webtech 2010Sebastian Sanitz
 
Testgetriebene Entwicklung mit JavaScript - JAX 2011
Testgetriebene Entwicklung mit JavaScript - JAX 2011Testgetriebene Entwicklung mit JavaScript - JAX 2011
Testgetriebene Entwicklung mit JavaScript - JAX 2011Sebastian Sanitz
 
Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?
Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?
Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?punkt.de GmbH
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdAOE
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der PraxisTobias Kraft
 
Automatisierte GUI-Tests mit Selenium
Automatisierte GUI-Tests mit SeleniumAutomatisierte GUI-Tests mit Selenium
Automatisierte GUI-Tests mit SeleniumBenjamin Schmid
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsUlrich Schmidt
 
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJSAcceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJSBjörn Wilmsmann
 

Ähnlich wie Fighting Layout Bugs (JUG-BB 2011) (20)

Codeception VisualCeption
Codeception VisualCeptionCodeception VisualCeption
Codeception VisualCeption
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
 
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenHightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign Testen
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScript
 
Build Patterns - Patterns und Best Practices für den Build Prozess
Build Patterns - Patterns und Best Practices für den Build ProzessBuild Patterns - Patterns und Best Practices für den Build Prozess
Build Patterns - Patterns und Best Practices für den Build Prozess
 
Continous Deployment - Schneller entwickeln
Continous Deployment - Schneller entwickelnContinous Deployment - Schneller entwickeln
Continous Deployment - Schneller entwickeln
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Testgetriebene Entwicklung mit JavaScript - webtech 2010
Testgetriebene Entwicklung mit JavaScript - webtech 2010Testgetriebene Entwicklung mit JavaScript - webtech 2010
Testgetriebene Entwicklung mit JavaScript - webtech 2010
 
Testgetriebene Entwicklung mit JavaScript - JAX 2011
Testgetriebene Entwicklung mit JavaScript - JAX 2011Testgetriebene Entwicklung mit JavaScript - JAX 2011
Testgetriebene Entwicklung mit JavaScript - JAX 2011
 
Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?
Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?
Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der Praxis
 
Automatisierte GUI-Tests mit Selenium
Automatisierte GUI-Tests mit SeleniumAutomatisierte GUI-Tests mit Selenium
Automatisierte GUI-Tests mit Selenium
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJSAcceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
IntelliJ für Flex
IntelliJ für FlexIntelliJ für Flex
IntelliJ für Flex
 

Fighting Layout Bugs (JUG-BB 2011)

  • 1. Michael Tamm | optivo GmbH Fighting Layout Bugs
  • 2. 2 / 117 Worum geht's? • 2 Folien Einführung • Drei alte bekannte Gegenmaßnahmen • Neue innovative Gegenmaßnahmen
  • 3. 3 / 117 Wer bin ich? Michael Tamm Systemarchitekt QA Automation Expert Selenium Committer Conference Speaker Autor für die c't und iX
  • 4. 4 / 117 Drei-Schichten-Architektur Presentation Layer Business Logic Layer Persistence Layer
  • 5. 5 / 117 Worum geht's? • 2 Folien Einführung • Drei alte bekannte Gegenmaßnahmen • Neue innovative Gegenmaßnahmen
  • 6. 6 / 117 Idee #1 Layout-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 / 117 W3C Markup Validation Service
  • 11. 11 / 117 W3C Markup Validation Service
  • 12. 12 / 117 W3C Markup Validation Service
  • 13. 13 / 117 W3C Markup Validation Service
  • 14. 14 / 117 Schnelleres Feedback möglich?
  • 15. 15 / 117 Schnelleres Feedback möglich! • Mit einem javax.servlet.Filter – Voraussetzung: HTML-Entwickler benutzt Tomcat oder Jetty – Funktioniert in allen Browsern
  • 17. 17 / 117 How 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.
  • 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.
  • 25. 25 / 117 Idee #2 Layout-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 / 117 CSS Validation Service
  • 30. 30 / 117 Hinweise 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(...) }
  • 33. 33 / 117 Schnelleres Feedback möglich! • Mit einem javax.servlet.Filter – Voraussetzung: HTML-Entwickler benutzt Tomcat oder Jetty – Funktioniert in allen Browsern
  • 36. 36 / 117 Idee #3 Layout-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
  • 40. 40 / 117 Worum geht's? • 2 Folien Einführung • Drei alte bekannte Gegenmaßnahmen • Neue innovative Gegenmaßnahmen
  • 50. 50 / 117 Idee #4 Layout-Fehler entdecken, indem man die menschliche Wahrnehmung simuliert.
  • 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
  • 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
  • 69. 69 / 117 http://fighting-layout-bugs.googlecode.com DetectTextWithTooLowContrast • Textpixel identifizieren (wie bereits gesehen) • Überprüfen, ob Kontrast zwischen Textpixeln und Hintergrundpixeln groß genug ist
  • 70. 70 / 117 http://fighting-layout-bugs.googlecode.com/ • DetectInvalidImageUrls • DetectTextNearOrOverlappingHorizontalEdge • DetectTextNearOrOverlappingVerticalEdge • DetectTextWithTooLowContrast
  • 71. 71 / 117 http://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 / 117 Fehlerhafte Texterkennung durch Animation auf der zu analysierenden Seite ...
  • 79. 79 / 117 Umgang mit „Fehlalarmen“ • Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten
  • 82. 82 / 117 Umgang mit „Fehlalarmen“ • Option 1: Umkonfiguration des Kontrastschwellwerts für Kanten • Option 2: Bestimmte HTML-Elemente ausschließen
  • 83. 83 / 117 Weitere typische Layoutfehler ...
  • 87. 87 / 117 Idee #5 Layout-Fehler entdecken, indem man den angezeigten Text auf verdächtige Muster prüft.
  • 97. 97 / 117 Idee #6 Layout-Fehler entdecken, indem man Screenshots von verschiedenen Browsern vergleicht.
  • 101. 101 / 117 Idee #7 Zukünftige Layout-Fehler vermeiden, indem man automatische Tests für bekannte Layout-Fehler schreibt.
  • 108. 108 / 117 Idee #8 Layout-Fehler vermeiden, indem man aus Designvorlagen automatische 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 / 117 One more thing ...
  • 112. 112 / 117 One more thing ... Usability-Fehler durch 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
  • 117. 117 / 117 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/ • http://web-accessibility-testing.googlecode.com/ • mail@michaeltamm.de