GUI-Test-Tutorial: Eine vollständige Anleitung zum Testen der Benutzeroberfläche (UI)

Eine vollständige Anleitung zum Testen der Benutzeroberfläche: Tutorial zum Testen der Benutzeroberfläche

Was ist GUI-Test?

GUI-Test ist ein Prozess zum Testen der grafischen Benutzeroberfläche der Anwendung, um die ordnungsgemäße Funktionalität gemäß den Spezifikationen sicherzustellen. Es beinhaltet die Überprüfung der Anwendungskomponenten wie Schaltflächen, Symbole, Kontrollkästchen, Farbe, Menü, Fenster usw.

Die visuelle Dynamik einer Webanwendung spielt eine zentrale Rolle bei der Akzeptanz einer Anwendung beim Benutzer.

Folglich ergibt sich diese Akzeptanz in eine lange Zeit Bindung der Kunden mit der Anwendung des Kunden zu bringen. In dieser Ära der Digitalisierung verändert sich die Benutzeroberfläche schnell und spielt eine Schlüsselrolle bei der Gewinnung der neuen Menge möglicher Kunden.

User Interface Testing

Um sicherzustellen, dass die visuelle Ästhetik von Webanwendungen gut angenommen wird, werden UI- und Usability-Tests zu einem Schlüsselaspekt der gesamten QA-Praxis. Jede Anwendung, auf die über eine URL zugegriffen werden kann, ist eine webbasierte Anwendung. In solchen Anwendungen testen wir hauptsächlich das Frontend der Anwendung, das vom Endbenutzer verwendet werden soll.

Jeder Browser zeigt Webseiten unterschiedlich an, daher ist es wichtig, dass die Seite in verschiedenen Browsern gleich aussieht. Wenn eine Webseite verzerrt und nicht verwaltet angezeigt wird, führt dies dazu, dass die Betrachter die Webseite verlassen. Daher sollte eine Website UI-Tests unterzogen werden, um bessere Ergebnisse zu erzielen.

Browser-Tests umfassen die folgenden zwei Typen:

Funktionstest

Testen verschiedener Funktionen in der gesamten Anwendung. Es beinhaltet die Validierung aller Navigationen sowie aller Feldwerte, die auf den Front-End-Seiten vorhanden sind, unter Verwendung aller positiven und negativen Szenarien.

Testen der Benutzeroberfläche

Testen des Look-and-Feel-Faktors der Webseite. Der Look-and-Feel-Faktor umfasst Anzeigetyp, Schriftart, Ausrichtung, Optionsfeld, Kontrollkästchen usw.

• Bereiche, die in UI-Tests behandelt werden, sind Benutzerfreundlichkeit, Aussehen & Gefühl, Navigationssteuerelemente / Navigationsleisten, Anweisungen und technischer Informationsstil, Bilder, Tabellen, Zugänglichkeit usw.
• Um die Barrierefreiheit zu testen, müssen wir uns an die W3C-Web Content Accessibility Guidelines halten.

Klicken Sie hier, um die W3C-Richtlinie zu erhalten.

Ansatz für UI-Tests

Wir wählen eine Teilmenge von Testfällen aus funktionalen Testfällen aus, die alle Funktionen der Anwendung abdecken.

Der zweite Schritt besteht darin, diese Testfälle entsprechend den Testanforderungen der Benutzeroberfläche zu ändern.

Der nächste Schritt besteht darin, diese Testfälle auszuführen; Vergleichen Sie das Ergebnis mit den erwarteten Ergebnissen, und wenn es einen Unterschied gibt, erhöhen Sie das Problem für dasselbe. Es ist nicht möglich, in allen Browsern zu testen. Normalerweise entscheidet der Client, in welchem Browser die Anforderung zum Testen besteht.

Da wir wissen, dass jeder Browser eine Webseite anders anzeigt, können wir nicht erwarten, dass alle Browser eine Webseite genau ähnlich anzeigen.

Zum Beispiel Drop-down in Windows-Firefox wird anders sein, dass Mac-Firefox. Solche Probleme sind akzeptabel, da es sich um Betriebssystemdienstprogramme handelt und wir sie als solche akzeptieren müssen.

Basisbrowser: Normalerweise wird die Anwendung für einen Browser entwickelt, von dem erwartet wird, dass er hauptsächlich von Endbenutzern verwendet wird.

Häufig auftretende UI-Fehler

• Probleme mit der Tastenausrichtung
• Inkonsistenter Abstand zwischen Beschriftungen oder Textfeldern
• Defekte Beschriftungen, d. H. einzeilige Beschriftungen werden in zwei Zeilen angezeigt
• Fehlausrichtung zwischen Textfeldern, Infosymbolen, Beschriftungen oder Dropdown-Listen
• Überlappung von Feldern
• Unvollständige Felder
• Daten auf der Seite sind falsch ausgerichtet; einige Zeit nach oben oder unten verschoben
• In jedem Browser wird beim Auswählen einer Aktion die entsprechende Aktion nicht ausgeführt
• Größenänderung funktioniert nicht wie erwartet
• Sitzungsablaufzeit für einige Browser entweder sehr kurz oder sehr lang
• Browserspezifische Probleme – Einige Felder können nach Eingabe von Daten in einem Browser nicht bearbeitet werden, können jedoch in einem anderen Browser bearbeitet werden

und Usability–Testanforderungen

Die wichtigsten UI-Testanforderungen der Webanwendung sind:

1. Verfügbarkeit verschiedener Komponenten in einer Benutzeroberfläche
2. Verschiedene Zustände der UI-Komponente

Komponente:

Eine Komponente ist ein Baustein, der mit der Kombination mehrerer anderer Komponenten zu einer Anwendung verwendet werden kann. Die Komponenten können in der gesamten Anwendung wiederverwendet werden.

Beispiele für eine Komponente sind Schaltfläche, Textfeld, Autosuggest, Kontrollkästchen, Dropdown usw.

Einige Basiskomponenten

Checkbox: Eine oder mehrere Optionen können aus der Checkbox-Komponente ausgewählt werden

Optionsfelder: Wenn nur eine Option ausgewählt werden muss, sind Optionsfelder nützlich

Einige erweiterte Komponenten

1. Akkordeon: Mit dieser Komponente können mehrere Elemente vertikal gestapelt werden. Jedes Element kann erweitert werden, um den Inhalt darin anzuzeigen. Mehr als ein Element kann auch erweitert werden.

2. Breadcrumbs: Dies ist eine sehr nützliche Komponente, die bei der Website-Navigation hilft. Über diese Komponente kann der Nutzer seinen aktuellen Standort innerhalb der Internetseite erkennen.

3. Karussell: Mehrere Sätze von Informationen können in eine Karussellkomponente integriert werden. Wegfinder unten zeigen an, dass weitere Elemente vorhanden sind. Pfeile helfen bei der Navigation innerhalb des Karussells. Normalerweise ist die Karussellnavigation als Endlosschleife konfiguriert.

Klicken Sie hier, um weitere nützliche Informationen zu UI-Komponenten zu erhalten

Zustände von UI-Komponenten

Die Verfügbarkeit von Komponenten basiert ausschließlich auf den Richtlinien für Projektanforderungen. Es wird von einem Projekt zum anderen variieren.

Die verschiedenen UI-Zustände für eine Basiskomponente sind:

1. Ungefüllter Zustand
2. Gefüllter Zustand und im Fokus
3. Normalzustand und Standardzustand
4. Hover-Zustand
5. Deaktivierter Zustand
6. Maskierter Zustand

Ungefüllter Zustand:

Vor wenn Sie einen beliebigen Wert in einer Komponente eingeben, handelt es sich um einen ungefüllten Zustand. Der Status Ungefüllt zeigt den Platzhaltertext an, falls vorhanden. Das Folgende ist eine Textfeldkomponente.

Gefüllter Zustand:

Eine Komponente mit einem vom Benutzer eingegebenen Wert ist gefüllter Zustand.

Im Fokuszustand:

Der Benutzer besucht erneut eine Komponente, die bereits gefüllt ist. Die Komponente sollte den Cursor anzeigen, der anzeigt, dass die spezifische Komponente fokussiert ist

Normalzustand:

Die Anzeige einer Komponente mit dem vom Benutzer bereits auf dem Bildschirm eingegebenen Wert wird als Normalzustand bezeichnet.

Standardzustand:

Eine Komponente, die automatisch ausgefüllte Werte vom Server / Backend anzeigt. Dieser Wert kann in einigen Szenarien auch vom Benutzer bearbeitet werden.

Hover-Status:

Wenn Sie mit der Maus über die Komponente fahren, wird die Komponente hervorgehoben, die die Hover-Aktion anzeigt.

Vor Hover:

Beim Hover:

Disabled State:

Die Komponente ist deaktiviert und der Benutzer kann die Felder nicht bearbeiten.

Aktivierter Zustand

Deaktivierter Zustand

Maskierter Zustand:

Sensible Daten wie das Passwort können mit dieser Komponente ausgeblendet werden.

Die wichtigsten USABILITY-Testanforderungen der Webanwendung sind:

1. Schriftfamilie
2. Schriftgröße
3. Farbe
4. Buchstabenabstand
5. Zeilenhöhe
6. Hintergrundgröße
7. Füllung / Deckkraft
8. Maße der Komponenten wie Länge, Breite und Breite
9. Position / Abstand zwischen den Komponenten in einem Bildschirm

Die oben genannten Usability-Funktionen können im Code oder mit dem inspect-Element in der Anwendung getestet werden. Eine andere einfachere Möglichkeit ist die Verwendung von Add-Ons. Die Add-Ons können je nach Browser variieren, in dem die Anwendung getestet werden soll.

Details zu verschiedenen Browser-Add-Ons

Vorteile von Add-Ons:

• Spart Zeit
• Einfach zu bedienen
• Es ist kostengünstig

Begrenzung der Add-Ons:

• Parallaxenfehler bei der Verwendung von
• Anwendungsübergreifend kompatibel
• Kompatibel mit mehreren Browsern

Referenzen für Add-Ons:

• Web Inspector: Apple Dev Tools
• Firebug: Firebug Wiki
• Messen Sie ES
• Colorzilla

GUI Testing Tools

In der Technologiewelt stehen mehrere Tools zur Verfügung, die Testern beim Testen der Benutzeroberfläche helfen würden.

• Selenium
• HP Unified Functional Testing
• Gurke
• Codierte Benutzeroberfläche
• Sahi

Eine detaillierte Liste der GUI-Tools finden Sie in softwaretestinghelp.com selbst! Bitte klicken Sie hier.

Beispiel-GUI-Testfälle

1) Überprüfen Sie die Funktion der Karussellpfeile und Wegfinder
2) Stellen Sie sicher, dass das Kennwortfeld Werte nur in einem maskierten Zustand akzeptiert
3) Stellen Sie sicher, dass die Schaltfläche ‚Speichern‘ inaktiv bleibt, bis alle erforderlichen Felder eingegeben sind
4) Stellen Sie sicher, dass der Benutzer mit der oberen Leiste
zum Seitenanfang navigieren darf 5) Stellen Sie sicher, dass die richtige Meldung angezeigt wird, wenn angewendete Filter rufen keine Ergebnisse ab
6) Überprüfen Sie die Navigation über Links, die in Kopf- und Fußzeilen verfügbar sind
7) Überprüfen Sie, ob die Ausrichtung der Optionsfelder genau
8) Stellen Sie sicher, dass mehrere Optionen in Kontrollkästchen gleichzeitig ausgewählt werden können
9) Stellen Sie sicher, dass der Titel jedes Abschnitts fett gedruckt ist
10) Überprüfen Sie die Farbänderung von Hyperlinks beim Klicken

Fazit

Eine Website ist die Seele vieler Unternehmen. Es ist sehr wichtig sicherzustellen, dass es auf verschiedenen Browsern & -Plattformen gut aussieht und ähnlich funktioniert. Daher ist das Testen der Benutzeroberfläche sehr wichtig und gewährleistet einen großen Kundenstamm und einen Mehrwert für das Unternehmen.