Menü

Tutorial zum Testen von GUI: Ein vollständiges Handbuch zum Testen der Benutzeroberfläche

  • Haupt
  • Andere
  • Tutorial zum Testen von GUI: Ein vollständiges Handbuch zum Testen der Benutzeroberfläche

gui testing tutorial

Versuchen Sie Unser Instrument, Um Probleme Zu Beseitigen

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

Was ist GUI-Test?

Beim GUI-Test wird die grafische Benutzeroberfläche der Anwendung getestet, um die ordnungsgemäße Funktionalität gemäß den Spezifikationen sicherzustellen. Dabei werden die Anwendungskomponenten wie Schaltflächen, Symbole, Kontrollkästchen, Farbe, Menü, Fenster usw. überprüft.

Implementierung des dijkstra-Algorithmus in Java

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

Infolgedessen führt diese Akzeptanz dazu, dass die Kunden langfristig mit der Anwendung des Kunden verbunden werden. In dieser Ära der Digitalisierung ändert sich die Benutzeroberfläche schnell und ist eine wichtige Festung, um die neue Menge möglicher Kunden anzulocken.

GUI-Tests

Was du lernen wirst:

Testen der Benutzeroberfläche

Um sicherzustellen, dass die visuelle Ästhetik von Webanwendungen gut akzeptiert wird, werden UI- und Usability-Tests zu einem Schlüsselaspekt der gesamten QS-Praxis. Jede Anwendung, auf die über eine URL zugegriffen werden kann, ist eine webbasierte Anwendung. In solchen Anwendungen testen wir hauptsächlich das Front-End 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, verlassen die Betrachter die Webseite. Daher sollte eine Website UI-Tests unterzogen werden, um bessere Ergebnisse zu erzielen.

Das Testen von Browsern umfasst zwei Arten:

Funktionstests

Testen verschiedener Funktionen in der gesamten Anwendung. Dabei werden alle Navigationen sowie alle Feldwerte, die auf den Front-End-Seiten vorhanden sind, anhand aller positiven und negativen Szenarien überprüft.

UI-Tests

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

  • Bereiche, die in UI-Tests behandelt werden, sind Benutzerfreundlichkeit, Look & Feel, Navigationssteuerelemente / Navigationsleisten, Anweisungen und Stil für technische Informationen, Bilder, Tabellen, Barrierefreiheit usw.
  • Zum Testen der Barrierefreiheit müssen wir die Richtlinien zur Barrierefreiheit von W3C-Webinhalten beachten.

Klicken Hier um die W3C-Richtlinie zu erhalten.

Ansatz für UI-Tests

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

Der zweite Schritt besteht darin, diese Testfälle gemäß den UI-Testanforderungen zu ändern.

Der nächste Schritt ist die Ausführung dieser Testfälle. Vergleichen Sie das Ergebnis mit den erwarteten Ergebnissen, und wenn es einen Unterschied gibt, werfen Sie das Problem für dasselbe auf. Es ist nicht möglich, in allen Browsern zu testen. Normalerweise entscheidet der Client, in welchem ​​Browser getestet werden soll.

Da wir wissen, dass jeder Browser die Webseite anders anzeigt, können wir nicht erwarten, dass alle Browser die Webseite genau gleich anzeigen.

Zum Beispiel, Dropdown in Windows-Firefox unterscheidet sich von Mac-Firefox. Solche Probleme sind akzeptabel, da es sich um Betriebssystemdienstprogramme handelt und wir sie als solche akzeptieren müssen.

Basisbrowser: Normalerweise wird eine Anwendung entwickelt, die auf einen Browser abzielt, von dem erwartet wird, dass er hauptsächlich von Endbenutzern verwendet wird. Er wird als Basisbrowser bezeichnet.

Häufig auftretende UI-Fehler

  • Probleme mit der Tastenausrichtung
  • Inkonsistenter Abstand zwischen Beschriftungen oder Textfeldern
  • Unterbrochene Beschriftungen, d. H. Einzeilige Beschriftung, werden in zwei Zeilen angezeigt
  • Fehlausrichtung zwischen Textfeldern, Info-Symbolen, Beschriftungen oder Dropdowns
  • Überlappung von Feldern
  • Unvollständige Felder
  • Die Daten auf der Seite sind falsch ausgerichtet. einige zeitlich nach oben oder unten verschoben
  • In jedem Browser wird bei Auswahl einer Aktion die entsprechende Aktion nicht ausgeführt
  • Größenänderung funktioniert nicht wie erwartet
  • Die Ablaufzeit der Sitzung ist für einige Browser entweder sehr kurz oder sehr lang
  • Browserspezifische Probleme - Nur wenige Felder können nach Eingabe von Daten in einem Browser nicht bearbeitet werden, sondern in einem anderen Browser

Wichtige Anforderungen an die Benutzeroberfläche und den Usability-Test

Die wichtigsten Anforderungen für das Testen der Benutzeroberfläche 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 anwendungsweit wiederverwendet werden.

Beispiele für eine Komponente sind Button, Textfeld, Autosuggest, Checkbox, Dropdown usw.

Einige grundlegende Komponenten

Kontrollkästchen: Eine oder mehrere Optionen können über die Kontrollkästchenkomponente ausgewählt werden

Kontrollkästchen

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

Radio

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. Es kann auch mehr als ein Element erweitert werden.

Akkordeon

2. Semmelbrösel: Dies ist eine sehr nützliche Komponente, die bei der Website-Navigation hilft. Der Benutzer kann anhand dieser Komponente seinen aktuellen Standort auf der Website identifizieren.

Semmelbrösel

3. Karussell: In eine Karussellkomponente können mehrere Sätze von Informationselementen integriert werden. Wegfinder unten zeigen an, dass mehr Gegenstände vorhanden sind. Pfeile helfen bei der Navigation im Karussell. Normalerweise wird die Karussellnavigation als Endlosschleife konfiguriert.

Karussell

Klicken Hier um weitere nützliche Informationen zu UI-Komponenten zu erhalten

Status von UI-Komponenten

Die Verfügbarkeit von Komponenten basiert ausschließlich auf den Richtlinien für Projektanforderungen. Es wird von Projekt zu Projekt unterschiedlich sein.

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. Schwebezustand
  5. Deaktivierter Zustand
  6. Maskierter Zustand

Ungefüllter Zustand:

Bevor Sie einen Wert in eine Komponente eingeben, wird dieser als ungefüllter Zustand bezeichnet. Der Status 'Nicht gefüllt' zeigt den Platzhaltertext an, falls vorhanden. Das Folgende ist eine Textfeldkomponente.

ungefüllter Zustand

Gefüllter Zustand:

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

gefüllter Zustand

On Focus State:

Der Benutzer besucht eine bereits gefüllte Komponente erneut. Die Komponente sollte den Cursor anzeigen und anzeigen, dass die bestimmte Komponente fokussiert wird

auf Fokuszustand

Normalzustand:

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

Normalzustand

Standardzustand:

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

Schwebezustand:

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

Vor dem Schweben:

view details_no hover

Beim Schweben:

Welches ist kein Beispiel für Data Mining?

view details_hover

Behindertenzustand:

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

Aktivierter Status

aktivierter Zustand

Deaktivierter Zustand

deaktivierter Zustand

Maskierter Zustand:

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

maskierter Zustand

Die wichtigsten USABILITY-Testanforderungen der Webanwendung sind:

  1. Schriftfamilie
  2. Schriftgröße
  3. Farbe
  4. Buchstaben-Abstand
  5. Zeilenhöhe
  6. Hintergrundvalidierung
  7. Füllung / Deckkraft
  8. Messungen 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 mithilfe des Inspect-Elements 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

NameVerwendungsdetailsKompatibilität
SeitenlinealDieses Add-On hilft beim Testen der Breite und Höhe der Komponenten. Die oberen, linken, rechten und unteren Positionen der Komponenten können ebenfalls ermittelt werdenChrome und Firefox
Web InspectorDer Web Inspector zeigt die Schriftart, die Textfarbe und die Hintergrundfarbe des Webinspektors an, indem Sie auf das Webinspektor-Symbol klicken und den Mauszeiger über den zu testenden Abschnitt bewegenChrome und Safari
FeuerwanzeFirebug ist ein Open Source-Add-On zur Überwachung von CSS, HTML, DOM, XHR und JavaScript der Webseite. Dies ist eine Alternative zum Inspect-Element, die mit Firefox kompatibel ist.Feuerfuchs
ColorZillaEs ist ein Farbwähler-Add-On, mit dem die Farbe der Webseite analysiert wirdChrome und Firefox
Messe EsEs wird verwendet, um die Breite, Höhe und Ausrichtung von Elementen in Pixel zu testen.Chrome, Safari und Firefox

Vorteile von Add-Ons:

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

Einschränkung von Add-Ons:

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

Referenzen für Add-Ons:

GUI-Testwerkzeuge

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

  • Selen
  • HP Unified Functional Testing
  • Gurke
  • Codierte Benutzeroberfläche
  • Tatsächlich

Eine detaillierte Liste der GUI-Tools finden Sie auf softwaretestinghelp.com selbst! bitte klicken Hier .

Beispiel für GUI-Testfälle

1) Überprüfen Sie die Funktion der Karussellpfeile und Wegfinder
zwei) 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 wurden
4) Stellen Sie sicher, dass der Benutzer mithilfe der Leiste 'Oben' zum oberen Rand der Seite navigieren darf
5) Stellen Sie sicher, dass die richtige Meldung angezeigt wird, wenn die angewendeten Filter keine Ergebnisse abrufen
6) Überprüfen Sie die Navigation anhand der in Kopf- und Fußzeilen verfügbaren Links
7) Überprüfen Sie, ob die Ausrichtung der Optionsfelder korrekt ist
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 gut aussieht und auf verschiedenen Browsern und Plattformen ähnlich funktioniert. Daher ist das Testen der Benutzeroberfläche sehr wichtig und gewährleistet eine große Kundenbasis und eine Steigerung des Geschäftswerts.

Literatur-Empfehlungen

^