en komplet Guide til GUI test: brugergrænseflade Test Tutorial
Hvad er GUI test?
GUI-test er en proces til test af applikationens grafiske brugergrænseflade for at sikre korrekt funktionalitet i henhold til specifikationerne. Det indebærer kontrol af programkomponenter som knapper, ikoner, afkrydsningsfelter, farve, menu, vinduer osv.
visuel dynamik i en internetapplikation spiller en central rolle i accepten af en applikation med brugeren.
følgelig giver denne accept i at bringe en lang tid bondage af kunder med kundens ansøgning. I denne æra med digitalisering ændrer brugergrænsefladen sig hurtigt og har en vigtig fæstning til at tiltrække den nye skare af mulige kunder.
Brugergrænsefladetestning
for at sikre, at visuel æstetik af internetapplikation er godt accepteret, bliver UI og brugbarhedstest et centralt aspekt af den overordnede kvalitetssikringspraksis. Enhver applikation, der kan tilgås via en URL, er en internetbaseret applikation. I sådanne applikationer tester vi hovedsageligt den forreste ende af applikationen, der skal bruges af slutbrugeren.
hver bro. ser viser hjemmesider forskelligt, så det er vigtigt, at siden ser ens ud på forskellige bro.Serere. Hvis en hjemmeside vises forvrænget og ikke-administreret, vil det føre seerne til at forlade hjemmesiden. Så en hjemmeside bør gennemgå UI test for bedre resultater.
bro.ser test består af nedenstående to typer:
funktionalitetstest
test af forskellige funktioner i hele applikationen. Det indebærer validering af alle navigationer samt alle feltværdier, der er til stede på frontend-siderne ved hjælp af alle positive såvel som negative scenarier.
UI test
test af udseendet og følefaktoren på hjemmesiden. Look and feel factor inkluderer Skærmtype, skrifttype, justering, radioknap, afkrydsningsfelt osv.
- områder, der er omfattet af UI-test, er brugervenlighed, se & føler, navigationskontroller/navigationslinjer, instruktioner og teknisk informationstil, billeder, tabeller, tilgængelighed osv.
- for at teste for tilgængelighed, er vi nødt til at tjekke med retningslinjer for tilgængelighed for indhold på 3C.
Klik her for at få V3C-retningslinjen.
tilgang til UI-test
vi vælger en delmængde af testcases fra funktionelle testcases, der dækker alle funktionaliteter i applikationen.
det andet trin er at ændre disse testsager i henhold til UI-testkrav.
næste trin vil være at udføre disse testsager; sammenligne resultatet med forventede resultater, og hvis der er nogen forskel, så rejser problemet for det samme. Det er ikke muligt at teste i alle brugere. Normalt beslutter klienten, i hvilken bro.ser der er kravet om at teste.
da vi ved, at hver bro.ser viser hjemmeside forskelligt, så kan vi ikke forvente, at alle bro. Serere viser hjemmeside nøjagtigt ens.
for eksempel vil rullemenuen være anderledes end mac-firefoks. Sådanne problemer er acceptable, da disse er operativsystemværktøjer, og vi skal acceptere dem som sådan.
Basis Bro. Ser: Normalt er applikationen udviklet målrettet mod en bro.ser, som forventes at blive brugt mest af slutbrugere, det kaldes basissøgeren.
almindeligt forekommende UI-defekter
- problemer med Knapjustering
- inkonsekvent mellemrum mellem etiketter eller tekstbokse
- ødelagte etiketter, dvs. enkeltlinjeetiket vises i to linjer
- forkert justering mellem tekstbokse, infoikoner, etiketter eller rullemenuer
- overlapning af felter
- ufuldstændige felter
- data på siden er forkert justeret; mens du vælger en handling, sker den tilsvarende handling ikke
- ændring af størrelse fungerer ikke som forventet
- sessionens udløbstid enten meget kort eller meget lang for nogle bro. sere
- bro. ser specifikke problemer – få felter kan ikke redigeres efter indtastning af data i en bro. ser, men kan redigeres i en anden bro. ser
krav til Key UI og usability test
de vigtigste UI-testkrav til internetapplikationen er:
- tilgængelighed af forskellige komponenter i en brugergrænseflade
- forskellige tilstande af UI-komponenten
komponent:
en komponent er en byggesten, som kan bruges sammen med kombinationen af flere andre komponenter til at danne en applikation. Komponenterne kan genbruges på tværs af applikationen.
eksempler på en komponent inkluderer knap, tekstfelt, Autosuggest, afkrydsningsfelt, rullemenu osv.
nogle grundlæggende komponenter
afkrydsningsfelt: en eller flere indstillinger kan vælges fra afkrydsningsfeltet komponent
radioknapper: Når kun en mulighed 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 et emne kan også udvides.
2. Breadcrumbs: dette er en meget nyttig komponent, der hjælper med navigation på hjemmesiden. Brugeren kan identificere sin aktuelle placering på hjemmesiden fra denne komponent.
3. Karrusel: Flere sæt informationselementer kan indarbejdes i en karruselkomponent. Måde finders nederst angiver flere elementer er til stede. Pile hjælper med navigation i karrusellen. Normalt er karruselnavigation konfigureret som en kontinuerlig løkke.
Klik her for at få mere nyttig information om UI-komponenter
tilstande af UI-komponenter
tilgængelighed af komponenter 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:
- ufyldt tilstand
- fyldt tilstand og på fokus
- normal tilstand og standardtilstand
- Hover State
- deaktiveret tilstand
- maskeret tilstand
ufyldt tilstand:
før indtastning af en hvilken som helst værdi i en komponent siges at være en uudfyldt tilstand. Den uudfyldte tilstand viser pladsholderteksten, hvis nogen. Nedenstående er en tekstfeltkomponent.
fyldt tilstand:
en komponent med en værdi indtastet af brugeren er udfyldt tilstand.
på Fokustilstand:
brugeren besøger en komponent, der allerede er udfyldt. Komponenten skal vise markøren, hvilket indikerer, at den specifikke komponent i fokus
Normal tilstand:
visningen af en komponent med den værdi, som brugeren allerede har indtastet på skærmen, beskrives 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-tilstand:
musepekeren over komponenten fremhæver komponenten, der angiver hover-handlingen.
før Hover:
på Hover:
deaktiveret tilstand:
komponenten er deaktiveret, og brugeren kan ikke redigere felterne.
aktiveret tilstand
deaktiveret tilstand
maskeret tilstand:
følsomme data som adgangskoden kan skjules ved hjælp af denne komponent.
de vigtigste krav til brugbarhedstest i internetapplikationen er:
- Skriftfamilie
- skriftstørrelse
- farve
- Bogstavafstand
- linjehøjde
- baggrundsvalidering
- fyld/opacitet
- målinger af komponenter som Længde, Bredde og bredde
- placering/afstand mellem komponenterne på en skærm
ovenstående Brugbarhedsfunktioner kan testes i koden eller ved hjælp af Inspektionselementet i applikationen. En anden nemmere måde er at bruge tilføjelser. Tilføjelserne kan variere afhængigt af den bro.ser, hvor applikationen skal testes.
detaljer om forskellige tilføjelser
| navn | Brugsdetaljer | Kompatibilitet |
|---|---|---|
| Sidelineal | denne tilføjelse hjælper med at teste komponenternes bredde og højde. De øverste, venstre, højre og nederste positioner af komponenterne kan også være regnet ud | Chrome og Firefoks |
| Inspector | inspector viser skrifttypen, tekstfarven og baggrundsfarven på blot ved at klikke på ikonet inspector og svæve den over det afsnit, der skal testes | Chrome og Safari |
| Fire Bug | Firebug er en open source add on til overvågning af hjemmesidens CSS, HTML, DOM og JavaScript. Dette er et alternativ til inspicere element, kompatibel med brand. | brandmand |
| Farvevælger | det er en farvevælger-tilføjelse, der bruges til at analysere farven på hjemmesiden | Chrome og Firefoks |
| mål det | det bruges til at teste bredden, højden og justeringen af elementer i billedpunkter. | Chrome, Safari og brandmand |
fordele ved tilføjelser:
- sparer tid
- let at bruge
- det er omkostningseffektivt
begrænsning af tilføjelser:
- Parallaksfejl under brug af måling
- kompatibel på tværs af applikationer
- kompatibel med flere bro. sere
referencer til Tilføjelser:
- Apple Dev Tools
- Firebug: Firebug
- mål det
- Colorsilla
GUI testværktøjer
flere værktøjer er tilgængelige i teknologiverdenen, der vil hjælpe testere i UI-test.
- selen
- HP Unified Functional Testing
- agurk
- kodet brugergrænseflade
- Sahi
en detaljeret liste over GUI-værktøjer er tilgængelig i softwaretestinghelp.com sig selv! Klik her.
Sample GUI Test Cases
1) Kontroller, at karruselpile og vejfindere fungerer
2) Kontroller, at adgangskodefeltet kun accepterer værdier i en maskeret tilstand
3) Kontroller, at ‘Gem’ – knappen forbliver inaktiv, indtil alle krævede felter er indtastet
4) Kontroller, at brugeren har lov til at navigere til toppen af siden ved hjælp af ‘Top’ bar
5) Kontroller, at korrekt meddelelse er vises, når de anvendte filtre ikke henter nogen resultater
6) Kontroller navigationen fra links, der er tilgængelige i sidehoveder og sidefødder
7) Kontroller, at justeringen af radioknapper er nøjagtig
8) Kontroller, at flere indstillinger i afkrydsningsfelter kan vælges ad gangen
9) Kontroller, at titlen på hvert afsnit er med fed skrift
10) Bekræft farveændringen af hyperlinks ved at klikke på
konklusion
en hjemmeside er sjælen i mange virksomheder. Det er meget nødvendigt at sikre, at det ser fint ud og fungerer på samme måde på forskellige platforme &. Således er UI-test meget vigtig, og det vil sikre en stor kundebase og tilføjelse i forretningsværdi.