En Komplett Guide TIL GUI Testing: Brukergrensesnitt Testing Tutorial
Hva ER GUI Testing?
GUI Testing ER en prosess for å teste programmets grafiske brukergrensesnitt for å sikre riktig funksjonalitet i henhold til spesifikasjonene. Det innebærer å sjekke programkomponenter som knapper, ikoner, avmerkingsbokser, farge, meny, vinduer etc.
Visuell dynamikk i et webprogram spiller en sentral rolle i aksept av et program med brukeren.
Følgelig gir denne aksepten i å bringe en lang tid bondage av kunder med kundens søknad. I denne tiden med digitalisering Er Brukergrensesnittet raskt i endring og har en viktig festning i å tiltrekke seg den nye mengden mulige kunder.
Brukergrensesnitt Testing
FOR å sikre visuell estetikk av web-applikasjon er godt akseptert, UI og Brukbarhetstesting bli en viktig del av den generelle qa praksis. Enhver applikasjon som kan nås via EN URL er En Web – basert applikasjon. I slike applikasjoner tester vi hovedsakelig forsiden av applikasjonen som skal brukes av sluttbrukeren.
hver nettleser viser nettsider forskjellig, så det er viktig at siden skal se samme ut på forskjellige nettlesere. Hvis en nettside vises forvrengt og uhåndtert, vil det føre til at seerne går ut av nettsiden. Så et nettsted bør gjennomgå UI testing for bedre resultater.
Nettlesertesting består av under to typer:
Funksjonalitetstesting
Testing av forskjellige funksjoner gjennom hele applikasjonen. Det innebærer å validere alle navigasjoner samt alle feltverdier som er til stede i front end sider ved hjelp av alle positive så vel som negative scenarier.
Ui Testing
Teste utseendet faktor på nettsiden. Utseende faktor inkluderer skjermtype, font, justering, radioknappen, boksen etc.
- Områder som dekkes AV UI-testing, Er Brukervennlighet, Utseende & følelse, Navigasjonskontroller/navigasjonsstenger, instruksjoner og teknisk informasjonsstil, bilder, tabeller, tilgjengelighet etc.
- for å teste for tilgjengelighet, må VI sjekke MED w3c-web content accessibility guidelines.
Klikk her FOR Å få w3c-retningslinjen.
Approach FOR UI testing
Vi velger en undergruppe av testtilfeller fra funksjonelle testtilfeller som dekker alle funksjonene i programmet.
det andre trinnet er å endre disse testtilfellene i henhold TIL UI-testkrav.
Neste trinn vil utføre disse testtilfellene; sammenligne resultatet med forventede resultater, og hvis det er noen forskjell, så heve problemet for det samme. Det er ikke mulig å teste i alle nettlesere. Normalt bestemmer klienten i hvilken nettleser det er kravet om å teste.
som vi vet hver nettleser vise websiden annerledes, så vi kan ikke forvente at alle nettlesere for å vise websiden nøyaktig lik.
for eksempel vil rullegardinmenyen i windows-firefox være annerledes enn mac-firefox. Slike problemer er akseptable, da disse er operativsystemverktøy, og vi må godta dem som sådan.
Grunnleggende Nettleser: Normalt programmet er utviklet rettet mot en nettleser som forventes å bli brukt mest av sluttbrukere, er det betegnet som base nettleser.
Vanlig Forekommende UI-Feil
- knappjusteringsproblemer
- Inkonsekvent mellomrom mellom etiketter eller tekstbokser
- Ødelagte etiketter, dvs. enlinjeetikett som vises i to linjer
- Feiljustering blant tekstbokser, info-ikoner, etiketter eller rullegardinlister
- Overlapping av felt
- ufullstendige felt
- Data På Siden Er Feiljustert; mens du velger en handling, skjer den tilsvarende handlingen ikke
- Endre Størrelse fungerer ikke som forventet
- utløpstid for Økten enten veldig kort eller veldig lang for noen nettlesere
- Nettleserspesifikke problemer-Få felt kan ikke redigeres etter at du har skrevet inn data i en nettleser, men redigeres i en annen nettleser
Key UI og brukbarhetstestkrav
de viktigste Ui – testkravene til webapplikasjonen er:
- Tilgjengelighet av ulike komponenter i ET BRUKERGRENSESNITT
- Ulike tilstander I BRUKERGRENSESNITTKOMPONENTEN
Komponent:
en komponent er en byggestein, som kan brukes med kombinasjonen av flere andre komponenter for å danne et program. Komponentene kan gjenbrukes på tvers av applikasjonen.
Eksempler på en komponent inkluderer Knapp, Tekstfelt, Autosuggest, Avkrysningsboks, Dropdown etc.
noen grunnleggende komponenter
Avkrysningsrute: Ett eller flere alternativer kan velges fra avkrysningsruten komponent
Radioknapper: Når bare ett alternativ må velges radioknapper er nyttige
Noen Avanserte Komponenter
1. Trekkspill: Flere elementer kan stables vertikalt ved hjelp av denne komponenten. Hvert element kan utvides for å vise innholdet i den. Mer enn ett element kan også utvides.
2. Breadcrumbs: Dette er en svært nyttig komponent som hjelpemidler i nettstedet navigasjon. Brukeren kan identifisere sin nåværende plassering på nettstedet fra denne komponenten.
3. Karusell: Flere sett med informasjonselementer kan innlemmes i en karusellkomponent. Way finders nederst indikerer flere elementer er til stede. Piler hjelp i navigasjon i karusellen. Vanligvis er karusellnavigasjon konfigurert som en kontinuerlig sløyfe.
Klikk her for å få mer nyttig informasjon OM UI-komponenter
Tilstander AV UI-komponenter
tilgjengeligheten av komponenter er utelukkende basert på prosjektkravets retningslinjer. Det vil variere fra ett prosjekt til et annet.
de ulike UI-tilstandene for en grunnleggende komponent er:
- Ufylt Tilstand
- Fylt Tilstand Og I Fokus
- Normal Tilstand Og Standardstatus
- Hoverstatus
- Deaktivert Tilstand
- Maskert Tilstand
Ufylt Tilstand:
Før tast inn noen verdi i en komponent, det sies å være en ufylt Tilstand. Den Ufylte tilstanden viser om noen plassholdertekst. Nedenfor er en tekstfelt komponent.
Fylt Tilstand:
en komponent med en verdi tastet inn av brukeren er fylt tilstand.
På Fokus Tilstand:
brukeren besøker en komponent som allerede er fylt. Komponenten skal vise markøren, noe som indikerer at den spesifikke komponenten i fokus
Normal Tilstand:
visningen av en komponent med verdien som allerede er angitt av brukeren på skjermen, beskrives som normal tilstand.
Standardstatus:
en komponent som viser automatisk fylt verdi fra serveren / backend. Denne verdien kan også redigeres av brukeren i enkelte scenarier.
Hover State:
mus musepekeren over komponenten fremhever komponenten som angir hover-handlingen.
Før Hover:
På Hover:
Deaktivert Tilstand:
komponenten er deaktivert, og brukeren kan ikke redigere feltene.
Aktivert Tilstand
Deaktivert Tilstand
Maskert Tilstand:
Sensitive data som passordet kan skjules ved hjelp av denne komponenten.
de viktigste BRUKBARHETSTESTKRAVENE for webapplikasjonen er:
- Skriftfamilie
- Skriftstørrelse
- Farge
- bokstavavstand
- Linjehøyde
- bakgrunnsvalidering
- Fyll/Tetthet
- målinger av komponenter som lengde, bredde og bredde
- plassering/avstand mellom komponentene i en skjerm
De Ovennevnte Bruksfunksjonene Kan Testes I Koden Eller Ved Hjelp Av Inspeksjonselementet I Applikasjonen. En annen enklere måte er å bruke tillegg. Tilleggene kan variere basert på nettleseren der programmet skal testes.
Detaljer om ulike Nettlesertillegg
| Navn | Bruksdetaljer | Kompatibilitet |
|---|---|---|
| Page Ruler | dette tillegget hjelper til med å teste bredde og høyde på komponentene. Topp -, venstre -, høyre-og bunnposisjonene til komponentene kan også finne ut | Chrome og Firefox |
| Web Inspector | Web inspector viser skrift, tekstfarge og bakgrunnsfarge på bare ved å klikke på web inspector ikonet og svever den over den delen som skal testes | Chrome og Safari |
| Fire Bug | Firebug er en åpen kildekode legge på for å overvåke web-sidens CSS, HTML, DOM, XHR og JavaScript. Dette er et alternativ til inspect element, kompatibelt Med Firefox. | Firefox |
| ColorZilla | det er et fargevelger-tillegg som brukes til å analysere fargen på nettsiden | Chrome og Firefox |
| Mål det | det brukes til å teste bredden, høyden og justeringen av elementer i piksler. | Chrome, Safari og Firefox |
Fordeler Med Tillegg:
- Sparer tid
- Enkel å bruke
- det er kostnadseffektivt
Begrensning Av Tillegg:
- Parallax feil ved måling
- Kompatibel på tvers av programmer
- Kompatibel med flere nettlesere
Referanser For Tillegg:
- Web Inspector: Apple Dev Tools
- Firebug: Firebug Wiki
- Mål det
- Colorzilla
GUI Testing Tools
Flere verktøy er tilgjengelige i teknologi verden som ville hjelpe testere I UI testing.
- Selen
- HP Unified Functional Testing
- Agurk
- Kodet BRUKERGRENSESNITT
- Sahi
en detaljert liste OVER GUI-verktøy er tilgjengelig i softwaretestinghelp.com seg selv! Vennligst klikk her.
EKSEMPEL PÅ GUI-Testtilfeller
1) Kontroller at karusellpiler og veifinnere fungerer
2) Kontroller at passordfeltet bare godtar verdier i maskert tilstand
3) Kontroller at lagre-knappen forblir inaktiv til alle obligatoriske felt er angitt
4) Kontroller at brukeren har lov til å navigere til toppen av siden ved Hjelp Av topplinjen
5) Kontroller at riktig melding vises når de anvendte filtrene henter ikke resultater
6) Kontroller Navigasjonen Fra Koblinger Som Er Tilgjengelige I Topp-Og Bunntekster
7) kontroller at justeringen av radioknappene er nøyaktig
8) Kontroller at flere alternativer i avmerkingsboksene kan velges om gangen
9) Kontroller at tittelen på hver seksjon er i fet skrift
10) Kontroller fargeendringen av hyperkoblinger ved å klikke
Konklusjon
et nettsted er sjelen til mange bedrifter. Det er svært nødvendig å sørge for at det ser fint og fungerer på samme måte på ulike nettlesere & plattformer . DERMED UI testing er svært viktig, og det vil sikre en stor kundebase og tillegg i forretningsverdi.