Meny

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

  • Huvud
  • Övrig
  • GUI Testing Tutorial: A Complete User Interface (UI) Testing Guide

gui testing tutorial

Prova Vårt Instrument För Att Eliminera Problem

En komplett guide till GUI-testning: Handledning för testning av användargränssnitt

Vad är GUI-testning?

GUI Testing är en process för att testa applikationens grafiska användargränssnitt för att säkerställa korrekt funktion enligt specifikationerna. Det handlar om att kontrollera applikationskomponenter som knappar, ikoner, kryssrutor, färg, meny, fönster etc.

hur man skapar en matris av generisk typ i java

Visuell dynamik hos en webbapplikation spelar en central roll i godkännandet av en applikation med användaren.

Följaktligen ger detta godkännande genom att ge kundernas långvariga bondage med kundens applikation. I denna era av digitalisering förändras användargränssnittet snabbt och har en nyckelfästning för att locka den nya publiken till möjliga kunder.

GUI-testning

Vad du kommer att lära dig:

Testning av användargränssnitt

För att säkerställa att den visuella estetiken i webbapplikationen accepteras blir UI- och användbarhetstester en viktig aspekt av den övergripande kvalitetssäkringspraktiken. Alla applikationer som kan nås via en URL är en webbaserad applikation. I sådana applikationer testar vi främst applikationens främre del som ska användas av slutanvändaren.

Varje webbläsare visar webbsidor på olika sätt, så det är viktigt att sidan ser likadan ut i olika webbläsare. Om en webbsida visas förvrängd och ohanterad kommer den att leda tittarna att lämna webbsidan. Så en webbplats bör genomgå UI-test för bättre resultat.

Webbläsartestning består av nedan två typer:

Funktionstestning

Test av olika funktioner i hela applikationen. Det handlar om att validera alla navigeringar såväl som alla fältvärden som finns på framsidan med alla positiva såväl som negativa scenarier.

UI-testning

Testar webbsidans utseende och känsla. Utseende och känselfaktor inkluderar visningstyp, typsnitt, justering, alternativknapp, kryssruta etc.

  • Områden som omfattas av UI-testning är användbarhet, utseende och känsla, navigeringskontroller / navigationsfält, instruktioner och teknisk informationsstil, bilder, tabeller, tillgänglighet etc.
  • För att testa tillgänglighet måste vi kontrollera med W3C-riktlinjer för tillgänglighet för innehåll.

Klick här för att få W3C-riktlinjen.

Tillvägagångssätt för UI-testning

Vi väljer en delmängd av testfall från funktionella testfall som täcker alla funktioner i applikationen.

Det andra steget är att ändra dessa testfall enligt UI-testkrav.

Nästa steg kommer att utföras av dessa testfall; jämföra resultatet med förväntade resultat, och om det är någon skillnad så ta upp frågan för samma. Det är inte möjligt att testa i alla webbläsare. Normalt bestämmer klienten i vilken webbläsare det är kravet att testa.

Eftersom vi känner till visar varje webbläsare webbsidor annorlunda, så vi kan inte förvänta oss att alla webbläsare visar webbsidor exakt lika.

Till exempel, rullgardinsmenyn i Windows-Firefox kommer att skilja sig från Mac-Firefox. Sådana problem är acceptabla, eftersom det här är operativsystemsverktyg och vi måste acceptera dem som sådana.

Baswebbläsare: Normalt är applikationer utvecklade inriktade på en webbläsare som förväntas användas mest av slutanvändare, det kallas som baswebbläsaren.

Vanligt förekommande gränssnittsdefekter

  • Problem med knappjustering
  • Inkonsekvent utrymme mellan etiketter eller textrutor
  • Trasiga etiketter, dvs. etikett med en rad, visas i två rader
  • Feljustering mellan textrutor, informationsikoner, etiketter eller rullgardinsmenyer
  • Överlappning av fält
  • Ofullständiga fält
  • Uppgifterna på sidan är feljusterade. någon tidsförskjutning uppåt eller nedåt
  • I någon webbläsare sker inte motsvarande åtgärd när du väljer någon åtgärd
  • Storleksändring fungerar inte som förväntat
  • Sessionens utgångstid antingen mycket kort eller mycket lång för vissa webbläsare
  • Webbläsarspecifika problem - Få fält kan inte redigeras efter att du har angett data i en webbläsare men kan redigeras i en annan webbläsare

Viktiga krav för användargränssnitt och användbarhet

De viktigaste UI-testkraven för webbapplikationen är:

  1. Tillgänglighet för olika komponenter i ett användargränssnitt
  2. Olika tillstånd för UI-komponenten

Komponent:

En komponent är en byggsten, som kan användas med kombinationen av flera andra komponenter för att bilda en applikation. Komponenterna kan återanvändas i hela applikationen.

Exempel på en komponent inkluderar knapp, textfält, autoförslag, kryssruta, rullgardinsmeny etc.

Några grundläggande komponenter

Kryssruta: Ett eller flera alternativ kan väljas från kryssrutan

kryssruta

Radioknappar: När bara ett alternativ måste väljas är alternativknappar användbara

radio

Några avancerade komponenter

1. Dragspel: Flera objekt kan staplas vertikalt med den här komponenten. Varje objekt kan utökas för att visa innehållet i det. Mer än ett objekt kan också utökas.

dragspel

2. Brödsmulor: Detta är en mycket användbar komponent som hjälper till att navigera på webbplatsen. Användaren kan identifiera sin nuvarande plats på webbplatsen från denna komponent.

brödmjölk

3. Karusell: Flera uppsättningar informationsartiklar kan integreras i en karusellkomponent. Vägsökare längst ner anger att fler objekt finns. Pilar hjälper till vid navigering i karusellen. Vanligtvis är karusellnavigering konfigurerad som en kontinuerlig slinga.

karusell

Klick här för att få mer användbar information om UI-komponenter

UI-komponenter

Komponenternas tillgänglighet baseras endast på riktlinjerna för projektkraven. Det kommer att variera från ett projekt till ett annat.

De olika UI-tillstånden för en baskomponent är:

  1. Ofylld stat
  2. Fylld stat och i fokus
  3. Normalstatus och standardstatus
  4. Hover State
  5. Handikappat tillstånd
  6. Maskerad stat

Ofylld stat:

Innan du matar in något värde i en komponent sägs det vara ett ofylld tillstånd. I det ofyllda tillståndet visas eventuell platshållartext. Nedanstående är en textfältkomponent.

ofyllda tillstånd

Fylld stat:

En komponent med ett värde inmatat av användaren är fylld tillstånd.

fyllt tillstånd

På fokusstatus:

Användaren besöker en komponent som redan är fylld. Komponenten ska visa markören, vilket indikerar att den specifika komponenten fokuseras

på fokusläge

Normal tillstånd:

Visningen av en komponent med det värde som användaren redan har angett på skärmen beskriver det normala tillståndet.

normalt tillstånd

Standardstatus:

En komponent som visar automatiskt fyllt värde från servern / backend. Detta värde kan också redigeras av användaren i vissa scenarier.

Hover State:

Muspekaren över komponenten markerar komponenten som indikerar svävaråtgärden.

Före sväva:

visa detaljer_ ingen svävar

På Hover:

vad är min internetsäkerhetsnyckel

visa detaljer_hover

Handikappat tillstånd:

Komponenten är inaktiverad och användaren kan inte redigera fälten.

Aktiverat tillstånd

aktiverat tillstånd

Handikappat tillstånd

funktionshindrade tillstånd

Maskerad stat:

Känsliga data som lösenordet kan döljas med den här komponenten.

maskerat tillstånd

De viktigaste testkraven för användbarhet i webbapplikationen är:

  1. Typsnittsfamilj
  2. Textstorlek
  3. Färg
  4. Teckenavstånd
  5. Radavstånd
  6. Bakgrundsvalidering
  7. Fyllning / opacitet
  8. Mätningar av komponenterna som längd, bredd och bredd
  9. Plats / avstånd mellan komponenterna på en skärm

Ovanstående användbarhetsfunktioner kan testas i koden eller med hjälp av inspektionselementet i applikationen. Ett annat enklare sätt är att använda tillägg. Tilläggen kan variera beroende på vilken webbläsare applikationen ska testas i.

Detaljer om olika webbläsartillägg

namnAnvändningsdetaljerKompatibilitet
SidlinjalDetta tillägg hjälper till att testa komponenternas bredd och höjd. Komponenternas övre, vänstra, högra och nedre position kan också räknas utChrome och Firefox
WebbinspektörWebbinspektör visar teckensnitt, textfärg och bakgrundsfärg bara genom att klicka på webbinspektörsikonen och sväva över det avsnitt som ska testasChrome och Safari
Fire BugFirebug är ett open source-tillägg för övervakning av webbsidans CSS, HTML, DOM, XHR och JavaScript. Detta är ett alternativ för inspektionselement, kompatibelt med Firefox.Firefox
ColorZillaDet är ett tillägg för färgväljare som används för att analysera färgen på webbsidanChrome och Firefox
Mäta detDen används för att testa bredden, höjden och inriktningen av element i pixlar.Chrome, Safari och Firefox

Fördelar med tillägg:

  • Sparar tid
  • Lätt att använda
  • Det är kostnadseffektivt

Begränsning av tillägg:

  • Parallaxfel vid mätning
  • Kompatibel över applikationer
  • Kompatibel med flera webbläsare

Referenser för tillägg:

GUI-testverktyg

Flera verktyg finns tillgängliga i teknikvärlden som skulle hjälpa testare i UI-testning.

  • Selen
  • HP Unified Functional Testing
  • Gurka
  • Kodat gränssnitt
  • Faktiskt

En detaljerad lista över GUI-verktyg finns på softwaretestinghelp.com själv! var god klicka här .

Exempel på GUI-testfall

1) Kontrollera att karusellpilar och sökare fungerar
2) Kontrollera att lösenordsfältet endast accepterar värden i maskerat tillstånd
3) Kontrollera att knappen 'spara' förblir inaktiv tills alla obligatoriska fält har angetts
4) Verifiera att användaren har möjlighet att navigera till toppen av sidan med 'Topp' -fältet
5) Kontrollera att korrekt meddelande visas när de använda filtren inte hämtar några resultat
6) Verifiera navigeringen från länkar som finns i sidhuvud och sidfot
7) Kontrollera att inriktningen av radioknapparna är korrekt
8) Kontrollera att flera alternativ i kryssrutorna kan väljas åt gången
9) Kontrollera att rubriken för varje avsnitt är i fetstil
10) Kontrollera färgförändringen på hyperlänkar när du klickar

Slutsats

En webbplats är själen för många företag. Det är mycket nödvändigt att se till att det ser bra ut och fungerar på samma sätt på olika webbläsare och plattformar. UI-testning är därför mycket viktigt och det kommer att säkerställa en stor kundbas och tillägg i affärsvärde.

Rekommenderad läsning

^