Visual regression test

VISUAL REGRESSION TEST INCLUDING RESPONSIVE

USER EXPERIENCE KONZEPTER UND INTERAKTIONSDESIGNER

Nico Maikowski

TEXT

WARUM SOLLTE MAN DAS TUN WOLLEN?

MOTIVATION

TEXT

AUS UNSERE GRUNDSÄTZE - ISO 9241

▸ SelbstbeschreibungsfähigkeitOrientierung: Dem Nutzer müssen auf jeder Seite und während eines jeden Prozesses Orientierungspunkte angeboten werden, damit er jederzeit weiß, wo genau er sich befindet und/oder wie weit er von seinem eigentlichen Ziel entfernt ist. Zum Lösen dieses Problems finden Design Patterns Anwendung, wie: Breadcrumb, Progress und Steps Left.Beherrschbarkeit Für die Besucher einer Website müssen Navigationselemente klar durch deren Gestaltung zu erkennen sein. Des Weiteren muss für den Benutzer klar sein, wo ein Navigationselement einen hinführt. Erst wenn zielsicher navigiert werden kann, ist eine Seite für einen Nutzer steuer- und beherrschbar. Design Patterns zur Lösung wären hier: Top Navigation Bar und Left Navigation Bar.RückmeldungErhält der Besucher eine Rückmeldung über den Erfolg einer vorher durchgeführten Aktion, entsteht ein Gefühl von Sicherheit, welches für die Vertrauensbildung maßgeblich ist. Ein Design Pattern hierfür ist: Shopping Cart.HilfenKomplexere Aufgaben sind grade für unerfahrene Besucher schwer zu bewältigen. Solche Aufgaben sollten mit besonderen Hilfen oder einer Dokumentation des Systems unterstützt werden. Hierzu folgende Design Patterns: Hover Invitation, Tooltip Invitation.

TEXT

ERWEITERTE GRUNDSÄTZE - ISO (9126)

▸ Unter dem Qualitätsmerkmal Benutzbarkeit gibt es den Punkt Attraktivität

▸ Attraktivität (lat. attrahere ‚an sich ziehen, anziehen‘) ist die Anziehungskraft. Auf Menschen bezogen, kann sie sowohl auf äußerlichen Eigenschaften (Schönheit) als auch auf Wesenseigenschaften (Charakter, Geist, Charisma, soziale Stellung) oder auf Materiellem beruhen. Sie wird individuell unterschiedlich bewertet und hängt im Wesentlichen von den Erwartungen des Betrachters ab. Als subjektiver Wert ist sie dem sozialen und gesellschaftlichen Wandel unterworfen.

JUST BECAUSE YOU’VE COUNTED ALL THE TREES DOESN’T MEAN YOU’VE SEEN THE FOREST.Anonymous

TEXT

WAS WILL MAN TESTEN?

▸ Breite, Höhe, Abstände

▸ Textgrößen, -farbe, -Alignment

▸ Responsive für Smartphone

▸ Browsertypen

TEXT

WAS KANN BEREITS GETESTET WERDEN?

‣ Near

‣ Below and Above

‣ Left of and Right of

‣ Inside

‣ Width and Height

‣ Aligned

‣ Text

‣ CSS Properties

‣ Centered

‣ Absent

‣ Visible

‣ Contains

‣ On

‣ Component

‣ Count

‣ Color scheme

‣ Image

WIE?

JUNIT

▸ Vorteile wie z.B. Einbindung in Jenkins CI

▸ bekannt bei den Frontend Entwicklern

▸ Shake Hands zwischen UX und UI

WIE?

SELENIUM

▸ Driver als Plugins für verschiedene Browser

▸ Auflösungen für Responsive Tests

▸ benötigt um die Website funktional zu steuern -> Navigation und Inputs befüllen

WIE?

GALEN

▸ das eigentliche Framework zum visuellen Test

▸ grafische Auswertung

TEXT

VORTEILE

▸ fortlaufende Wiederholung von Testfällen, d.h. Ausschluss von Fehlerquellen bei iterativer Entwicklung

▸ Tests können bereits parallel zur Gestaltungslösung entwickelt werden

▸ Kostensenkung durch Einsparung für manuelle Reviews

TEXT

NACHTEILE

▸ IDs in der Website bzw. den html-Tags

▸ gewisses Maß an Programmierkenntnisse

▸ Pflege der Tests

DEMO

TEXT

LINKS UND QUELLEN:

1. http://galenframework.com

2. http://docs.seleniumhq.org

3. http://junit.org/junit4/

4. https://github.com/hypery2k/galen_samples

THANK YOU FOR THE FISH

Douglas Adams

TEXT