en komplett Guide till GUI-testning: handledning för Användargränssnittstestning
vad är GUI-testning?
GUI-testning är en process för att testa programmets grafiska användargränssnitt för att säkerställa korrekt funktionalitet enligt specifikationerna. Det handlar om att kontrollera programkomponenter som knappar, ikoner, kryssrutor, färg, meny, fönster etc.
visuell dynamik i en webbapplikation spelar en central roll för att acceptera en applikation med användaren.
följaktligen ger denna acceptans för att få en lång tid bondage av kunder med kundens ansökan. I denna tid av digitalisering, användargränssnittet förändras snabbt och har en viktig fästning för att locka den nya publiken av möjliga kunder.
Användargränssnittstestning
för att säkerställa visuell estetik av webbapplikation är väl accepterad, blir UI och användbarhetstestning en viktig aspekt av den övergripande QA-praxisen. Alla program som kan nås via en URL är en webbaserad applikation. I sådana applikationer testar vi främst den främre änden av applikationen som ska användas av slutanvändaren.
Varje webbläsare visar webbsidor på olika sätt, så det är viktigt att sidan ska se ut på olika webbläsare. Om en webbsida visas förvrängd och omanagd kommer den att leda tittarna att lämna webbsidan. Så en webbplats bör genomgå UI-testning för bättre resultat.
Webbläsartestning består av under två typer:
funktionstestning
testning av olika funktioner i hela applikationen. Det handlar om att validera alla navigationer samt alla fältvärden som finns i front end sidor med alla positiva och negativa scenarier.
UI-testning
testa utseendet och känslan på webbsidan. Utseende och känsla faktor inkluderar visningstyp, typsnitt,justering, alternativknapp, kryssruta etc.
- områden som omfattas av UI-testning är användbarhet, Look & känsla, navigeringskontroller / navigeringsfält, instruktioner och teknisk informationsstil, bilder, tabeller, tillgänglighet etc.
- för testning av tillgänglighet måste vi kontrollera med W3C-riktlinjer för tillgänglighet för webbinnehåll.
Klicka 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 modifiera dessa testfall enligt UI-testkraven.
nästa steg kommer att utföra dessa testfall; jämföra resultatet med förväntade resultat, och om det finns någon skillnad då höja 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 finns krav på att testa.
som vi vet att varje webbläsare visar webbsidan annorlunda, så kan vi inte förvänta oss att alla webbläsare visar webbsidan exakt lika.
till exempel kommer rullgardinsmenyn i windows-firefox att vara annorlunda än mac-firefox. Sådana problem är acceptabla, eftersom det här är operativsystemverktyg och vi måste acceptera dem som sådana.
Baswebbläsare: Normalt är applikationen utvecklad med inriktning på en webbläsare som förväntas användas mest av slutanvändare, det kallas baswebbläsaren.
vanliga UI-defekter
- knappjusteringsproblem
- inkonsekvent utrymme mellan etiketter eller textrutor
- trasiga etiketter, dvs enradig etikett visas i två rader
- felinställning mellan textrutor, info-ikoner, etiketter eller rullgardinsmenyer
- överlappning av fält
- ofullständiga fält
- data på sidan är feljusterade; någon tidsförskjuten uppåt eller nedåt
- i en webbläsare, medan du väljer någon åtgärd, sker inte motsvarande åtgärd
- ändra storlek 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 ha matat in data i en webbläsare men kan redigeras i en annan webbläsare
Key UI och användbarhetstestkrav
de viktigaste Ui – testkraven för webbapplikationen är:
- tillgänglighet av olika komponenter i ett användargränssnitt
- olika tillstånd i ANVÄNDARGRÄNSSNITTSKOMPONENTEN
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,Autosuggest, kryssruta, rullgardinsmeny etc.
vissa grundläggande komponenter
kryssruta: ett eller flera alternativ kan väljas från kryssrutan komponent
radioknappar: När bara ett alternativ behöver väljas är radioknappar användbara
vissa avancerade komponenter
1. Dragspel: flera objekt kan staplas vertikalt med denna komponent. Varje objekt kan utökas för att visa innehållet i det. Mer än ett objekt kan också utökas.
2. Breadcrumbs: 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.
3. Carousel: Flera uppsättningar informationsobjekt kan införlivas i en karusellkomponent. Way finders längst ner indikerar att fler objekt är närvarande. Pilar hjälper till med navigering i karusellen. Vanligtvis är karusellnavigering konfigurerad som en kontinuerlig slinga.
Klicka här för att få mer användbar information om UI-komponenter
tillstånd för UI-komponenter
tillgänglighet av komponenter baseras enbart på riktlinjerna för projektkrav. Det kommer att variera från ett projekt till ett annat.
de olika GRÄNSSNITTSTILLSTÅNDEN för en grundläggande komponent är:
- ofylld tillstånd
- fylld tillstånd och på fokus
- normalt tillstånd och standardtillstånd
- sväva tillstånd
- inaktiverat tillstånd
- maskerat tillstånd
ofylld tillstånd:
före keying i något värde i en komponent, det sägs vara en ofylld tillstånd. Det ofyllda tillståndet visar platshållartexten om någon. Nedanstående är en textfältkomponent.
fylld stat:
en komponent med ett värde som anges av användaren är fylld stat.
på Fokusläge:
användaren återbesöker en komponent som redan är fylld. Komponenten ska visa markören, vilket indikerar att den specifika komponenten är fokuserad
normalt tillstånd:
visningen av en komponent med det värde som användaren redan har angett på skärmen beskrivs det normala tillståndet.
standardtillstånd:
en komponent som visar automatiskt befolkat 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 hover-åtgärden.
före Hover:
på Hover:
inaktiverat tillstånd:
komponenten är inaktiverad och användaren kan inte redigera fälten.
aktiverat tillstånd
inaktiverat tillstånd
maskerat tillstånd:
känsliga data som lösenordet kan döljas med den här komponenten.
de viktigaste ANVÄNDBARHETSTESTKRAVEN för webbapplikationen är:
- typsnittsfamilj
- teckenstorlek
- färg
- brevavstånd
- radhöjd
- bakgrundsvalidering
- fyll/opacitet
- mätningar av komponenterna som längd, bredd och bredd
- plats/avstånd mellan komponenterna i en skärm
ovanstående användbarhetsfunktioner kan testas i koden eller Med hjälp av inspect-elementet i applikationen. Ett annat enklare sätt är att använda tillägg. Tilläggen kan variera beroende på webbläsaren där applikationen ska testas.
detaljer om olika webbläsartillägg
| namn | användningsinformation | Kompatibilitet |
|---|---|---|
| Sidlinjal | detta tillägg hjälper till att testa komponenternas bredd och höjd. Komponenternas övre, vänstra, högra och nedre positioner kan också räknas ut | Chrome och Firefox |
| Webbinspektör | Webbinspektör visar teckensnittet, textfärgen och bakgrundsfärgen på bara genom att klicka på webbinspektörens ikon och sväva den över det avsnitt som ska testas | Chrome och Safari |
| Fire Bug | Firebug är ett open source-tillägg för övervakning av webbsidans CSS, HTML, DOM, XHR och JavaScript. Detta är ett alternativ till inspect element, kompatibelt med Firefox. | Firefox |
| ColorZilla | det är ett färgväljartillägg som används för att analysera färgen på webbsidan | Chrome och Firefox |
| mät det | det 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 användning av mätning
- kompatibel över applikationer
- kompatibel med flera webbläsare
referenser för tillägg:
- Webbinspektör: Apple Dev Tools
- Firebug: Firebug Wiki
- mät det
- Colorzilla
GUI-testverktyg
flera verktyg finns tillgängliga i teknikvärlden som skulle hjälpa testare i UI-testning.
- selen
- HP Unified funktionell testning
- gurka
- kodad UI
- Sahi
en detaljerad lista över GUI-verktyg finns i softwaretestinghelp.com själv! Klicka här.
exempel GUI-testfall
1) Verifiera arbetet med karusellpilar och vägfinnare
2) verifiera att lösenordsfältet endast accepterar värden i maskerat tillstånd
3) verifiera att ’spara’ – knappen förblir inaktiv tills alla obligatoriska fält är inmatade
4) verifiera att användaren får navigera till toppen av sidan med ’Top’ – fältet
5) verifiera att korrekt meddelande visas på skärmen när de tillämpade filtren inte hämtar några resultat
6) verifiera navigeringen från länkar som finns i sidhuvud och sidfot
7) verifiera justeringen av radioknapparna är exakt
8) verifiera att flera alternativ i kryssrutor kan väljas åt gången
9) verifiera att titeln på varje avsnitt är i fetstil
10) verifiera färgförändringen av hyperlänkar när du klickar på
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 & plattformar. Således UI testning är mycket viktigt och det kommer att säkerställa en stor kundbas och tillägg i affärsvärde.