GUI Testing Tutorial: A Complete User Interface (UI) Testing Guide

gui testing tutorial

En komplet guide til GUI-test: Vejledning til test af brugergrænseflade

Hvad er GUI-test?

GUI Testing er en proces til test af applikationens grafiske brugergrænseflade for at sikre korrekt funktionalitet i henhold til specifikationerne. Det indebærer at kontrollere applikationskomponenterne som knapper, ikoner, afkrydsningsfelter, farve, menu, vinduer osv.

gratis mp3 musik download sites til Android-telefoner

Visuel dynamik i en webapplikation spiller en central rolle i accept af en applikation hos brugeren.

Som følge heraf giver denne accept, når kunderne bliver bundet i lang tid med kundens applikation. I denne æra med digitalisering skifter brugergrænsefladen hurtigt og har en vigtig fæstning til at tiltrække den nye skare af mulige kunder.

Hvad du lærer:

• Test af brugergrænseflade
• Tilgang til UI-test
• Almindeligvis forekommende UI-defekter
• Nøglekrav til brugergrænseflade og brugervenlighed
• Nogle grundlæggende komponenter
• Nogle avancerede komponenter
• UI-komponenters tilstande
• GUI-testværktøjer
• Eksempel på GUI-testtilfælde
• Konklusion
• Anbefalet læsning

Test af brugergrænseflade

For at sikre, at webapplikationens visuelle æstetik accepteres, bliver UI og Usability-test et nøgleaspekt af den samlede kvalitetspraksis. Enhver applikation, som der er adgang til via en URL, er en webbaseret applikation. I sådanne applikationer tester vi hovedsageligt den forreste ende af applikationen, som skal bruges af slutbrugeren.

Hver browser viser websider forskelligt, så det er vigtigt, at siden ser ens ud i forskellige browsere. Hvis en webside vises forvrænget og ikke-administreret, vil den få seerne til at forlade websiden. Så et websted skal gennemgå UI-test for bedre resultater.

Browser-test består af nedenstående to typer:

Funktionstest

Test af forskellige funktioner i hele applikationen. Det indebærer validering af alle navigationer såvel som alle feltværdier, der findes på forsiden, ved hjælp af alle positive såvel som negative scenarier.

UI-test

Test af udseendet og følelsesfaktoren på websiden. Udseende og følelsesfaktor inkluderer skærmtype, skrifttype, justering, radioknap, afkrydsningsfelt osv.

• Områder, der er dækket af UI-test, er brugervenlighed, look & feel, navigationsknapper / navigationsbjælker, instruktioner og teknisk informationsstil, billeder, tabeller, tilgængelighed osv.
• For at teste for tilgængelighed er vi nødt til at tjekke med W3C-Web indholdsretningslinjer for tilgængelighed.

Klik på her for at få W3C-retningslinjen.

Tilgang til UI-test

Vi vælger en undersæt af testsager fra funktionelle testsager, der dækker alle applikationens funktioner.

Det andet trin er at ændre disse testsager i henhold til UI-testkrav.

Næste trin vil være at udføre disse testsager; sammenligning af resultatet med forventede resultater, og hvis der er nogen forskel, så rejst spørgsmålet for det samme. Det er ikke muligt at teste i alle browsere. Normalt beslutter klienten i hvilken browser der er krav om at teste.

Som vi kender, viser hver browser websiden forskelligt, så vi kan ikke forvente, at alle browsere viser websider nøjagtigt ens.

For eksempel, drop-down i windows-firefox vil være anderledes end mac-firefox. Sådanne problemer er acceptable, da disse er operativsystemværktøjer, og vi er nødt til at acceptere dem som sådan.

Basisbrowser: Normalt er applikationen udviklet målrettet mod en browser, der forventes at blive brugt mest af slutbrugere, den betegnes som basisbrowseren.

Almindeligvis forekommende UI-defekter

• Problemer med knapjustering
• Inkonsekvent mellemrum mellem etiketter eller tekstfelter
• Brudte etiketter, dvs. etiket med en linje vises i to linjer
• Misjustering mellem tekstfelter, info-ikoner, etiketter eller rullelister
• Overlappende felter
• Ufuldstændige felter
• Data på siden er forkert justeret; noget tidsforskudt opad eller nedad
• I en hvilken som helst browser sker den tilsvarende handling ikke, mens du vælger en handling
• Ændring af størrelse fungerer ikke som forventet
• Sessionens udløbstid enten meget kort eller meget lang for nogle browsere
• Browser-specifikke problemer - Få felter kan ikke redigeres efter indtastning af data i en browser, men redigerbare i en anden browser

Nøglekrav til brugergrænseflade og brugervenlighed

De vigtigste UI-testkrav til webapplikationen er:

1. Tilgængelighed af forskellige komponenter i et brugergrænseflade
2. UI-komponentens forskellige tilstande

Komponent:

En komponent er en byggesten, der kan bruges med kombinationen af ​​flere andre komponenter til at danne en applikation. Komponenterne kan genbruges på tværs af applikationen.

Eksempler på en komponent inkluderer Button, Text Field, Autosuggest, Checkbox, Dropdown osv.

Nogle grundlæggende komponenter

Afkrydsningsfelt: En eller flere indstillinger kan vælges fra afkrydsningsfeltkomponenten

Radioknapper: Når kun en indstilling skal vælges, er radioknapper nyttige

Nogle avancerede komponenter

1. Harmonika: Flere elementer kan stables lodret ved hjælp af denne komponent. Hvert element kan udvides for at se indholdet i det. Mere end en vare kan også udvides.

2. Brødsmuler: Dette er en meget nyttig komponent, der hjælper med navigering på hjemmesiden. Brugeren kan identificere sin aktuelle placering på hjemmesiden ud fra denne komponent.

3. Karrusel: Flere sæt informationselementer kan indarbejdes i en karruselkomponent. Vejfindere i bunden angiver, at der er flere ting til stede. Pile hjælper med at navigere inden i karrusellen. Normalt er karruselnavigation konfigureret som en kontinuerlig sløjfe.

Klik på her for at få mere nyttig information om UI-komponenter

UI-komponenters tilstande

Komponenternes tilgængelighed er udelukkende baseret på retningslinjerne for projektkrav. Det vil variere fra et projekt til et andet.

De forskellige UI-tilstande for en grundlæggende komponent er:

1. Ufyldt stat
2. Fyldt tilstand og i fokus
3. Normal tilstand og standardtilstand
4. Hover State
5. Handicappet tilstand
6. Maskeret stat

Uudfyldt stat:

Før der indtastes en værdi i en komponent, siges det at være en uudfyldt tilstand. Den udfyldte tilstand viser pladsholderteksten, hvis nogen. Nedenfor er en tekstfeltkomponent.

Udfyldt stat:

En komponent med en værdi indtastet af brugeren er udfyldt tilstand.

På fokusstatus:

Brugeren besøger en allerede udfyldt komponent. Komponenten skal vise markøren, hvilket indikerer, at den specifikke komponent er i fokus

Normal tilstand:

Visningen af ​​en komponent med den værdi, som brugeren allerede har indtastet på skærmen, beskriver den normale tilstand.

Standardtilstand:

En komponent, der viser automatisk udfyldt værdi fra serveren / backend. Denne værdi kan også redigeres af brugeren i nogle scenarier.

Hover-stat:

Musen svæver over komponenten fremhæver komponenten, der angiver svævningshandling.

Før svæver:

På svæver:

se min hjemmeside i forskellige browsere

Handicappet tilstand:

Komponenten er deaktiveret, og brugeren kan ikke redigere felterne.

Aktiveret stat

Handicappet tilstand

Maskeret tilstand:

Følsomme data som adgangskoden kan skjules ved hjælp af denne komponent.

De vigtigste testkrav for brugbarhed i webapplikationen er:

1. Skrifttypefamilie
2. Skriftstørrelse
3. Farve
4. Mellemrum mellem bogstaver
5. Linjehøjde
6. Baggrundsvalidering
7. Fyld / uigennemsigtighed
8. Målinger af komponenterne som længde, bredde og bredde
9. Placering / afstand mellem komponenterne på en skærm

Ovenstående anvendelsesfunktioner kan testes i koden eller ved hjælp af inspektionselementet i applikationen. En anden lettere måde er at bruge tilføjelsesprogrammer. Tilføjelserne kan variere afhængigt af den browser, hvor applikationen skal testes.

Detaljer om forskellige browsertilføjelser

Fordele ved tilføjelsesprogrammer:

• Sparer tid
• Let at bruge
• Det er omkostningseffektivt

Begrænsning af tilføjelsesprogrammer:

• Parallaks fejl under måling
• Kompatibel på tværs af applikationer
• Kompatibel med flere browsere

Referencer for tilføjelsesprogrammer:

• Webinspektør: Apple Dev-værktøjer
• Firebug: Firebug Wiki
• Mål IT
• Colorzilla

GUI-testværktøjer

Flere teknologier er tilgængelige i teknologiverden, der kan hjælpe testere i UI-test.

• Selen
• HP Unified Functional Testing
• Agurk
• Kodet brugergrænseflade
• Rent faktisk

En detaljeret liste over GUI-værktøjer er tilgængelig i softwaretestinghelp.com selv! Klik venligst her .

Eksempel på GUI-testtilfælde

1) Kontroller, at karruselpile og vejfindere fungerer
to) Kontroller, at adgangskodefeltet kun accepterer værdier i maskeret tilstand
3) Kontroller, at knappen 'Gem' forbliver inaktiv, indtil alle krævede felter er indtastet
4) Bekræft, at brugeren har lov til at navigere til toppen af ​​siden ved hjælp af 'Top' bar
5) Kontroller, at den korrekte besked vises, når de anvendte filtre ikke henter nogen resultater
6) Bekræft navigationen fra links, der er tilgængelige i sidehoveder og sidefødder
7) Kontroller, at radioknappernes justering er nøjagtig
8) Kontroller, at flere valgmuligheder i afkrydsningsfelter kan vælges ad gangen
9) Kontroller, at titlen på hvert afsnit er med fed skrift
10) Bekræft farveændring af hyperlinks ved at klikke

Konklusion

Et websted er sjælen for mange virksomheder. Det er meget nødvendigt at sikre, at det ser fint ud og fungerer på samme måde på forskellige browsere og platforme. UI-test er således meget vigtig, og det vil sikre en stor kundebase og tilføje forretningsværdi.

Anbefalet læsning

• Bedste softwaretestværktøjer 2021 (QA Test Automation Tools)
• Alpha-test og betatestning (En komplet guide)
• Test af Primer eBook Download
• Funktionel testning mod ikke-funktionel testning
• Build Verification Testing (BVT Testing) Komplet guide
• Hvad er interface test? Kend dens typer, strategi og værktøjer
• QA Outsourcing Guide: Software Testing Outsourcing Company
• Typer af softwaretest: Forskellige testtyper med detaljer