A Complete Guide to GUI Testing: gebruikersinterface Testing Tutorial
Wat is GUI Testing?
GUI Testing is een proces van het testen van de grafische gebruikersinterface van de toepassing om de juiste functionaliteit te garanderen volgens de specificaties. Het gaat om het controleren van de toepassing componenten zoals knoppen, pictogrammen, selectievakjes, kleur, menu, windows etc.
de visuele dynamiek van een webtoepassing speelt een cruciale rol bij de acceptatie van een toepassing bij de gebruiker.
deze acceptatie leidt er dan ook toe dat klanten met de aanvraag van de klant een langdurige bondage krijgen. In dit tijdperk van digitalisering, User Interface is snel aan het veranderen en heeft een belangrijke vesting in het aantrekken van de nieuwe menigte van mogelijke klanten.
User Interface Testing
om ervoor te zorgen dat de visuele esthetiek van webapplicaties goed wordt geaccepteerd, worden UI-en Usability testing een belangrijk aspect van de Algemene QA praktijk. Elke toepassing die toegankelijk is via een URL is een webgebaseerde toepassing. In dergelijke toepassingen testen we vooral de front-end van de applicatie die door de eindgebruiker moet worden gebruikt.
elke browser geeft webpagina ‘ s anders weer, dus het is belangrijk dat de pagina er op verschillende browsers hetzelfde uitziet. Als een webpagina wordt weergegeven vervormd en onbeheerd dan zal het leiden kijkers om de webpagina te verlaten. Dus een website moet UI testen ondergaan voor betere resultaten.
Browser testing bestaat uit minder dan twee typen:
Functionaliteitstests
testen van verschillende functies in de hele toepassing. Het gaat om het valideren van alle navigaties en alle veldwaarden die aanwezig zijn in de front-end pagina ’s met behulp van alle positieve en negatieve scenario’ s.
UI Testing
het testen van de look and feel factor van de webpagina. Look and feel factor omvat display type, lettertype, uitlijning, keuzerondje, checkbox etc.
- gebieden die onder UI-tests vallen zijn bruikbaarheid, Look & feel, Navigatiebesturingen/navigatiebalken, instructies en technische informatiestijl, afbeeldingen, tabellen, toegankelijkheid enz.
- voor het testen van toegankelijkheid, moeten we controleren met W3C-Web content accessibility guidelines.
Klik hier voor de W3C-richtlijn.
benadering voor UI-testen
we selecteren een subset van testcases uit functionele testcases die alle functionaliteiten van de applicatie omvat.
de tweede stap bestaat erin deze testgevallen aan te passen aan de eisen voor UI-tests.
de volgende stap is het uitvoeren van die testcases; het vergelijken van het resultaat met de verwachte resultaten, en als er een verschil is, dan is het probleem voor hetzelfde. Het is niet haalbaar om te testen in alle browsers. Normaal gesproken bepaalt de client in welke browser er de vereiste is om te testen.
omdat we elke browser webpagina anders weergeven, kunnen we niet verwachten dat alle browsers webpagina ‘ s precies hetzelfde weergeven.
bijvoorbeeld, drop-down in windows-firefox zal anders zijn dan mac-firefox. Dergelijke problemen zijn aanvaardbaar, omdat dit hulpprogramma ‘ s van het besturingssysteem zijn en we ze als zodanig moeten accepteren.
Basisbrowser: Normaal applicatie is ontwikkeld gericht op een browser die naar verwachting meestal worden gebruikt door eindgebruikers, het wordt aangeduid als de basis browser.
vaak voorkomende UI-defecten
- problemen met Knoppenuitlijning
- inconsistente ruimte tussen labels of tekstkaders
- gebroken labels d.w.z. label met één regel dat op twee regels wordt weergegeven
- verkeerde uitlijning tussen tekstkaders, infopictogrammen, labels of dropdowns
- overlapping van velden
- onvolledige velden
- gegevens op de pagina zijn verkeerd uitgelijnd; enige tijd verschoven naar boven of naar beneden
- In elke browser, terwijl het selecteren van een actie, de bijbehorende actie is niet gebeurt,
- grootte wijzigen werkt niet zoals verwacht
- Sessie verstrijken van tijd of heel kort of heel lang voor sommige browsers
- Browser specifieke problemen – slechts Enkele velden zijn niet bewerkbaar na het invoeren van gegevens in een browser, maar bewerkbare in een andere browser
Toets UI en Usability Test Eisen
De toets UI testen eisen van de web toepassing zijn:
- beschikbaarheid van verschillende componenten in een UI
- verschillende toestanden van de UI-component
Component:
een component is een bouwsteen die kan worden gebruikt met de combinatie van verschillende andere componenten om een aanvraag in te dienen. De componenten kunnen over de hele toepassing worden hergebruikt.
voorbeelden van een component zijn Button, Text Field, Autosuggest, Checkbox, Dropdown etc.
enkele basiscomponenten
selectievakje: Een of meer opties kunnen worden geselecteerd uit het selectievakje component
keuzerondjes: Wanneer slechts één optie moet worden geselecteerd zijn keuzerondjes nuttig
enkele geavanceerde componenten
1. Accordeon: meerdere items kunnen verticaal worden gestapeld met behulp van deze component. Elk item kan worden uitgebreid om de inhoud ervan te bekijken. Meer dan één item kan ook worden uitgebreid.
2. Breadcrumbs: Dit is een zeer nuttig onderdeel dat helpt bij website navigatie. De gebruiker kan zijn huidige locatie binnen de website te identificeren van deze component.
3. Carrousel: Meerdere sets van informatie items kunnen worden opgenomen in een carrousel component. Wegvinders onderaan geven aan dat er meer items aanwezig zijn. Pijlen helpen bij de navigatie binnen de carrousel. Meestal wordt carrousel navigatie geconfigureerd als een continue lus.
Klik hier voor meer nuttige informatie over UI-componenten
statussen van UI-componenten
beschikbaarheid van componenten is uitsluitend gebaseerd op de richtlijnen voor projectvereisten. Het zal van project tot project verschillen.
de verschillende UI-statussen voor een basiscomponent zijn::
- ongevulde toestand
- gevulde toestand en on Focus
- normale toestand en standaardtoestand
- zwevende toestand
- uitgeschakelde toestand
- gemaskeerde toestand
ongevulde toestand:
voordat een waarde in een component wordt ingetoetst, wordt gezegd dat het een ongevulde toestand is. De niet-ingevulde status toont de plaatshouder tekst indien aanwezig. Het onderstaande is een tekstveld component.
gevulde toestand:
een component met een door de gebruiker ingetoetste waarde is gevulde toestand.
On Focusstatus:
de gebruiker bezoekt een component die al is gevuld. Het onderdeel moet de cursor tonen, die aangeeft dat het specifieke onderdeel in focus
normale toestand:
de weergave van een onderdeel waarvan de waarde al door de gebruiker in het scherm is ingevoerd, wordt de normale toestand beschreven.
standaardstatus:
een component die automatisch ingevulde waarde van de server/backend weergeeft. Deze waarde kan ook worden bewerkt door de gebruiker in sommige scenario ‘ s.
Hover Status:
muisaanwijzer boven het component markeert de component die de hover actie aangeeft.
vóór zweven:
bij zweven:
Disabled Status:
het onderdeel is uitgeschakeld en de gebruiker kan de velden niet bewerken.
ingeschakeld toestand
uitgeschakeld toestand
gemaskeerde toestand:
gevoelige gegevens zoals het wachtwoord kunnen met dit onderdeel worden verborgen.
de belangrijkste vereisten voor het testen van de bruikbaarheid van de webtoepassing zijn::
- Lettertype
- lettergrootte
- Kleur
- letterafstand
- Line-height
- Achtergrond validatie
- Vul/Dekking
- afmetingen van de onderdelen, zoals lengte, breedte, en breedte
- Locatie/Afstand tussen de componenten in een scherm
De bovenstaande gebruiksfuncties kunnen worden getest in de code of met behulp van de inspecteer element in de toepassing. Een andere gemakkelijkere manier is om add-ons te gebruiken. De Add-ons kan variëren op basis van de browser waarin de toepassing moet worden getest.
Details van verschillende Browser Add-ons
| naam | gebruiksdetails | Compatibiliteit |
|---|---|---|
| Paginaliniaal | deze add-on helpt bij het testen van breedte en hoogte van de componenten. De boven -, linker -, rechter-en onderzijde van de posities van de componenten kan ook worden bedacht | Chrome en Firefox |
| Web Inspector | Web inspector toont het lettertype, de tekstkleur en de achtergrondkleur van het net door te klikken op de web inspector pictogram en zweefde over de sectie, die is om te worden getest | Chrome en Safari |
| Fire Bug | Firebug is een open source toevoegen op voor het toezicht op de web pagina ‘ s CSS, HTML, DOM, XHR, en JavaScript. Dit is een alternatief voor inspecteren element, compatibel met Firefox. | Firefox |
| ColorZilla | het is een kleurkiezer add – on gebruikt om de kleur van de webpagina | Chrome en Firefox te analyseren |
| meet het | het wordt gebruikt om de breedte, hoogte en uitlijning van elementen in pixels te testen. | Chrome, Safari en Firefox |
voordelen van Add-Ons:
- bespaart tijd
- gebruiksvriendelijk
- het is kosteneffectief
beperking van Add-Ons:
- Parallax fout tijdens het gebruik van
- Compatibel met toepassingen
- Compatibel met meerdere browsers
Referenties voor Add-Ons:
- Web Inspector: Apple Dev Tools
- Firebug: Firebug Wiki
- Maat
- Colorzilla
GUI Testen Gereedschappen
Verschillende gereedschappen zijn beschikbaar die in de technologie wereld zou dat helpen testers in UI te testen.
- seleen
- HP Unified Functional Testing
- komkommer
- gecodeerde UI
- Sahi
een gedetailleerde lijst van GUI tools is beschikbaar in softwaretestinghelp.com zichzelf! Klik hier.
voorbeeld GUI testcases
1) Controleer de werking van carrouselpijlen en wegvinders
2) Controleer of het wachtwoordveld alleen waarden accepteert in een gemaskerde toestand
3) Controleer of de knop ‘Opslaan’ inactief blijft totdat alle vereiste velden zijn ingevoerd
4) Controleer of de gebruiker naar de bovenkant van de pagina mag navigeren met de ’top’ Balk
5) Controleer of het juiste bericht wordt weergegeven wanneer de toegepaste filters geen resultaten ophalen
6) controleer de navigatie van links beschikbaar in headers en footers
7) Controleer of de uitlijning van de keuzerondjes is accuraat
8) Controleer of meerdere opties in selectievakjes tegelijk kunnen worden geselecteerd
9) Controleer of de titel van elke sectie vetgedrukt is
10) controleer de kleurverandering van hyperlinks bij het klikken op
conclusie
een website is de ziel van veel bedrijven. Het is zeer noodzakelijk om ervoor te zorgen dat het er goed uitziet en hetzelfde functioneert op verschillende browsers & platforms. Dus UI testen is zeer belangrijk en het zal zorgen voor een groot klantenbestand en toevoeging in bedrijfswaarde.