Fighting-layout-bugs. Layout bugs - Wie man sie findet und erfolgreich bekämpft

Größe: px

Ab Seite anzeigen:

Download "Fighting-layout-bugs. Layout bugs - Wie man sie findet und erfolgreich bekämpft"

Johanna Maus
vor 8 Jahren
Abrufe

1 Fighting-layout-bugs Layout bugs - Wie man sie findet und erfolgreich bekämpft

2 Gliederung 2 1) Einführung 2) Erste Schritte: Code-Validierung gegen Bugs 3) Fighting Layout Bugs - a library for automatic detection of layout bugs Überblick über erkannte Bugsorten Funktionsweise der Bug-Detection 4) Die Detection-Bibliothek in der Praxis Quellen

detection of layout bugs Überblick über erkannte Bugsorten

3 1) Einführung 3 Circa 50% der Entwicklungszeit eines Projekts sind Testing und Bugfixing zuzuordnen Hauptproblem besteht zumeist darin, Bugs ausfindig zu machen Soll vermieden werden, dass der Benutzer die Bugs mitbekommen, bevor sie gefixt werden können Logische und semantische Fehler sind zumeist die schwerwiegendsten, aber auch Layout-Bugs sollten gefixt werden Denn - Impliziert Unprofessionalität - Schränkt Funktionalitäten ggf. ein - Verwirrt Benutzer

bevor sie gefixt werden können Logische und semantische Fehler sind zumeist die schwerwiegendsten, aber auch

4 1) Einführung: Wodurch kommen Layout-Bugs im Web zustande? 4 Falschinterpretation des HTML-Codes bedingt durch fehlerhaftes, nichtvalides HTML Unterschiedliche Interpretation des HTML-Codes durch verschiedene Browser - Historisch bedingt: 1992 Veröffentlichung der Ursprungsversion von HTML Browserentwickler Netscape und Microsoft erkennen Bedeutung des WWW Implementieren browsereigene HTML-Elemente - Versuch neue Sprachelemente in Standard zu fassen scheiterte mehrmals (HTML+, HTML 3.0) Trotz richtiger Interpretation des HTML-Codes erscheint Layout nicht wie angedacht und somit für Benutzer suboptimal und fehlerhaft

- Historisch bedingt: 1992 Veröffentlichung der Ursprungsversion von HTML - 1994 Browserentwickler Netscape und Microsoft erkennen Bedeutung des WWW

5 1) Einführung: Auch bekannte Seiten kämpfen mit Layout-Bugs 5 [ ]

6 1) Einführung: Auch bekannte Seiten kämpfen mit Layout-Bugs 6 Firefox 4 Google Chrome [ ]

7 Gliederung 7 1) Einführung 2) Erste Schritte: Code-Validierung gegen Bugs 3) Fighting Layout Bugs - a library for automatic detection of layout bugs Überblick über erkannte Bugsorten Funktionsweise der Bug-Detection 4) Die Detection-Bibliothek in der Praxis Quellen

8 2) Erste Schritte: Code-Validierung gegen Bugs 8 Code-Validierung beugt vielen Layout-Bugs vor, die aufgrund von Falschinterpretation zustande kommen (1) HTML-Validierung [ ] HTML 4.01, XHTML 1.0, XHTML 1.1, HTML 5, (2) CSS-Validierung [ ] CSS Level 1, Level 2, Level 2.1, Level 3,

HTML-Validierung [ http://validator.w3.org/ ] HTML 4.01, XHTML 1.0, XHTML 1.

9 2) Erste Schritte: Code-Validierung gegen Bugs 9 Demo

10 Gliederung 10 1) Einführung 2) Erste Schritte: Code-Validierung gegen Bugs 3) Fighting Layout Bugs - a library for automatic detection of layout bugs Überblick über erkannte Bugsorten Funktionsweise der Bug-Detection 4) Die Detection-Bibliothek in der Praxis Quellen

11 3) Fighting Layout Bugs - a library for automatic detection of layout bugs 11 Anzeigefehler zu finden, die trotz validem Markup auftreten, ist sehr umständlich 1. Möglichkeit: Jede Seite einzeln nach Layout-Bugs durchsuchen Probleme: Regelmäßige Kontrollen bei Änderungen / Erweiterungen notwendig Seiten müssen in jedem Browser geprüft werden 2. Möglichkeit: Versuchen, häufig auftretende Arten von Layout-Bugs genau zu definieren und nach ihnen zu suchen Möglichkeit, in ganzen Sitemaps regelmäßig und per Software automatisiert nach Layout-Bugs in verschiedenen Browsern zu durchsuchen

Möglichkeit: Jede Seite einzeln nach Layout-Bugs durchsuchen Probleme: Regelmäßige Kontrollen bei Änderungen / Erweiterungen notwendig Seiten

12 3) Fighting Layout Bugs - a library for automatic detection of layout bugs 12 Java-Bibliothek zur automatischen Erkennung von Layout-Bugs Fighting layout bugs - a library for automatic detection of layout bugs in web pages. Entwickler: Michael Tamm Auf der Google Test Automation Conference im Oktober 2009 als Google Code Projekt vorgestellt und online frei zu Verfügung gestellt Bedient sich der drei in Selenium implementierten WebDriver für Google Chrome, Firefox und InternetExplorer Seitdem regelmäßige Updates

Entwickler: Michael Tamm Auf der Google Test Automation Conference im Oktober 2009 als Google Code Projekt vorgestellt und

13 3) Fighting Layout Bugs - Überblick über erkannte Bugsorten 13 Bisher fünf Bug-Detectors implementiert: DetectTextWithTooLowContrast DetectTextNearOrOverlappingHorizontalEdge DetectTextNearOrOverlappingVerticalEdge DetectNeedsHorizontalScrolling DetectInvalidImageUrls

14 3) Fighting Layout Bugs Funktionsweise der Bug-Detection 14 Generelle Funktionsweise: Vergleich von Screenshots der mit jquery bearbeiteten Seite Die Sicht des Nutzers wird simuliert Unterschiedliche Webelemente werden durch verschiedene Vergleiche wie z.b. verschiedene jquery-injections identifiziert $( * ).css( color, #FFFFFF ); $( * ).css( color, # ); Unterschiedliche Pixel sind Text Ähnliche Mechanismen bei Identifikation von Layout-Komponenten: Vergleich von Farbwerten in der Umgebung

Vergleiche wie z.b. verschiedene jquery-injections identifiziert $( * ).css( color, #FFFFFF ); $( * ).

15 Gliederung 15 1) Einführung 2) Erste Schritte: Code-Validierung gegen Bugs 3) Fighting Layout Bugs - a library for automatic detection of layout bugs Überblick über erkannte Bugsorten Funktionsweise der Bug-Detection 4) Die Detection-Bibliothek in der Praxis Quellen

16 4) Die Detection-Bibliothek in der Praxis 16 Demo

17 4) Die Detection-Bibliothek in der Praxis 17 Weitere Möglichkeiten: Quellcode auslesen, interne Links feststellen und umfangreiche Seiten automatisch prüfen Pixelvergleich von Screenshots aus verschiedenen WebDrivern à Erkennung von unterschiedlichen Darstellungen Bekannte Probleme: Hover-Effekte und von Nutzeraktionen abhängige Layout-Elemente können noch nicht ausgewertet werden Animationen und Farbverläufe triggern oft fälschlicherweise BugDetection

Erkennung von unterschiedlichen Darstellungen Bekannte Probleme: Hover-Effekte und von Nutzeraktionen abhängige

18 Quellen 18 [ ] [ ] [ ] [ ]

Ähnliche Dokumente

Microsoft Update Windows Update

Microsoft Update Windows Update Microsoft bietet mehrere Möglichkeit, Updates durchzuführen, dies reicht von vollkommen automatisch bis zu gar nicht. Auf Rechnern unserer Kunden stellen wir seit September 2006 grundsätzlich die Option