GUI-testhandleiding: een complete gebruikersinterface (UI) testhandleiding

gui testing tutorial

Een complete gids voor GUI-testen: zelfstudie over het testen van gebruikersinterfaces

Wat is GUI-testen?

GUI-testen is een proces waarbij de grafische gebruikersinterface van de applicatie wordt getest om de juiste functionaliteit te garanderen volgens de specificaties. Het omvat het controleren van de applicatiecomponenten zoals knoppen, pictogrammen, selectievakjes, kleur, menu, vensters enz.

net interviewvragen en antwoorden voor eerstejaarsstudenten

Visuele dynamiek van een webapplicatie speelt een centrale rol bij de acceptatie van een applicatie bij de gebruiker.

Bijgevolg leidt deze acceptatie tot een langdurige band tussen klanten en de applicatie van de klant. In dit tijdperk van digitalisering verandert de gebruikersinterface snel en heeft het een belangrijke troef in het aantrekken van de nieuwe menigte mogelijke klanten.

Wat je leert:

• Gebruikersinterface testen
• Aanpak voor UI-testen
• Veel voorkomende UI-defecten
• Belangrijkste vereisten voor gebruikersinterface en bruikbaarheidstest
• Enkele basiscomponenten
• Enkele geavanceerde componenten
• Statussen van UI-componenten
• GUI-testtools
• Voorbeelden van GUI-testcases
• Gevolgtrekking
• Aanbevolen literatuur

Gebruikersinterface testen

Om ervoor te zorgen dat de visuele esthetiek van webapplicaties goed wordt geaccepteerd, worden UI- en bruikbaarheidstests een belangrijk aspect van de algehele QA-praktijk. Elke applicatie die toegankelijk is via een URL is een webapplicatie. Bij dergelijke applicaties testen we voornamelijk de front-end van de applicatie die gebruikt gaat worden door de eindgebruiker.

Elke browser geeft webpagina's anders weer, dus het is belangrijk dat de pagina er in verschillende browsers hetzelfde uitziet. Als een webpagina vervormd en onbeheerd wordt weergegeven, zal dit ertoe leiden dat kijkers de webpagina verlaten. Dus een website moet UI-tests ondergaan voor betere resultaten.

Browsertests bestaan ​​uit onderstaande twee typen:

Functionaliteitstesten

Testen van verschillende functies in de hele applicatie. Het omvat het valideren van alle navigaties en alle veldwaarden die aanwezig zijn op de frontend-pagina's met behulp van zowel positieve als negatieve scenario's.

UI Testing

Het testen van de look en feel-factor van de webpagina. De look-and-feel-factor omvat het weergavetype, het lettertype, de uitlijning, het keuzerondje, het selectievakje enz.

• Gebieden die worden bestreken bij het testen van de gebruikersinterface zijn bruikbaarheid, uiterlijk en gevoel, navigatieknoppen / navigatiebalken, instructies en technische informatiestijl, afbeeldingen, tabellen, toegankelijkheid enz.
• Om de toegankelijkheid te testen, moeten we de toegankelijkheidsrichtlijnen van W3C-Web-content raadplegen.

Klik hier om de W3C-richtlijn te krijgen.

Aanpak voor UI-testen

We selecteren een subset van testgevallen uit functionele testgevallen die alle functionaliteiten van de applicatie omvatten.

De tweede stap is om die testcases aan te passen aan de UI-testvereisten.

De volgende stap is het uitvoeren van die testgevallen; het resultaat vergelijken met de verwachte resultaten, en als er enig verschil is, het probleem voor hetzelfde aankaarten. Het is niet haalbaar om in alle browsers te testen. Normaal gesproken beslist de klant in welke browser hij moet testen.

Omdat we weten dat elke browser webpagina's anders weergeeft, 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 acceptabel, aangezien dit hulpprogramma's van het besturingssysteem zijn en we ze als zodanig moeten accepteren.

Basisbrowser: Normaal gesproken wordt een applicatie ontwikkeld die gericht is op een browser waarvan wordt verwacht dat deze voornamelijk door eindgebruikers wordt gebruikt. Dit wordt de basisbrowser genoemd.

Veel voorkomende UI-defecten

• Problemen met het uitlijnen van knoppen
• Inconsistente ruimte tussen labels of tekstvakken
• Gebroken labels, d.w.z. labels met één regel worden weergegeven in twee regels
• Verkeerde uitlijning tussen tekstvakken, infopictogrammen, labels of vervolgkeuzemenu's
• Overlappende velden
• Onvolledige velden
• Gegevens op de pagina zijn niet goed uitgelijnd; enige tijd verschoven naar boven of naar beneden
• In elke browser, terwijl u een actie selecteert, gebeurt de bijbehorende actie niet
• Formaat wijzigen werkt niet zoals verwacht
• De duur van de sessie is voor sommige browsers erg kort of erg lang
• Browserspecifieke problemen - Er zijn maar weinig velden die niet kunnen worden bewerkt na het invoeren van gegevens in de ene browser, maar bewerkbaar zijn in een andere browser

Belangrijkste vereisten voor gebruikersinterface en bruikbaarheidstest

De belangrijkste vereisten voor het testen van de gebruikersinterface van de webapplicatie zijn:

1. Beschikbaarheid van verschillende componenten in een gebruikersinterface
2. Verschillende statussen van de UI-component

Component:

Een component is een bouwsteen die kan worden gebruikt met de combinatie van verschillende andere componenten om een ​​applicatie te vormen. De componenten kunnen in de hele applicatie worden hergebruikt.

Voorbeelden van een component zijn onder meer Button, Text Field, Autosuggest, Checkbox, Dropdown etc.

Enkele basiscomponenten

Selectievakje: Een of meer opties kunnen worden geselecteerd uit de checkbox-component

Radio knoppen: Als er maar één optie moet worden geselecteerd, zijn keuzerondjes handig

Enkele geavanceerde componenten

1. Accordeon: Met deze component kunnen meerdere items verticaal worden gestapeld. Elk item kan worden uitgevouwen om de inhoud ervan te bekijken. Er kunnen ook meerdere items worden uitgebreid.

2. Paneermeel: Dit is een erg handig onderdeel dat helpt bij het navigeren op websites. Vanuit dit onderdeel kan de gebruiker zijn huidige locatie binnen de website identificeren.

3. Carrousel: Meerdere sets met informatie-items kunnen in een carrouselcomponent worden opgenomen. Wegzoekers onderaan geven aan dat er meer items aanwezig zijn. Pijlen helpen bij het navigeren binnen de carrousel. Gewoonlijk is carrouselnavigatie geconfigureerd als een continue lus.

Klik hier voor meer nuttige informatie over UI-componenten

Statussen van UI-componenten

Beschikbaarheid van componenten is puur gebaseerd op de projecteisenrichtlijnen. Het zal van project tot project verschillen.

De verschillende UI-statussen voor een basiscomponent zijn:

1. Ongevulde staat
2. Gevulde staat en op focus
3. Normale staat en standaardstaat
4. Hover State
5. Uitgeschakelde staat
6. Gemaskeerde staat

Ongevulde staat:

Voordat een waarde in een component wordt ingetoetst, wordt er gezegd dat het een niet-gevulde staat is. De staat Niet gevuld geeft de tijdelijke aanduiding-tekst weer, indien aanwezig. Het onderstaande is een tekstveldcomponent.

Gevulde staat:

Een component met een waarde die door de gebruiker is ingetoetst, is gevuld.

Op focusstatus:

De gebruiker bezoekt een component die al is gevuld opnieuw. De component moet de cursor weergeven om aan te geven dat de specifieke component wordt gefocust

Normale staat:

De weergave van een component met de waarde die al door de gebruiker op het scherm is ingevoerd, wordt beschreven in de normale toestand.

Standaard staat:

Een component die automatisch ingevulde waarde van de server / backend weergeeft. Deze waarde kan in sommige scenario's ook door de gebruiker worden bewerkt.

Hover State:

De muisaanwijzer op het onderdeel markeert het onderdeel dat de zweefactie aangeeft.

Voordat Hover:

Bij Hover:

wat bereikt de verificatiefase in de levenscyclus van software?

Uitgeschakelde staat:

De component is uitgeschakeld en de gebruiker kan de velden niet bewerken.

Ingeschakelde staat

Uitgeschakelde staat

Gemaskeerde staat:

Gevoelige gegevens zoals het wachtwoord kunnen met deze component worden verborgen.

De belangrijkste USABILITY-testvereisten van de webapplicatie zijn:

1. Lettertypefamilie
2. Lettertypegrootte
3. Kleur
4. Letterafstand
5. Lijnhoogte
6. Achtergrondvalidatie
7. Vulling / dekking
8. Metingen van de componenten zoals lengte, breedte en breedte
9. Locatie / afstand tussen de componenten in een scherm

De bovenstaande bruikbaarheidseigenschappen kunnen worden getest in de code of met behulp van het inspect-element in de applicatie. Een andere eenvoudigere manier is om add-ons te gebruiken. De add-ons kunnen variëren, afhankelijk van de browser waarin de applicatie moet worden getest.

Details van verschillende browser-add-ons

Voordelen van add-ons:

• Bespaart tijd
• Makkelijk te gebruiken
• Het is kostenbesparend

Beperking van add-ons:

• Parallaxfout tijdens het meten
• Compatibel met verschillende applicaties
• Compatibel met meerdere browsers

Referenties voor add-ons:

• Webinspecteur: Apple Dev Tools
• Vuurwants: Firebug Wiki
• Meet het
• Colorzilla

GUI-testtools

Er zijn verschillende tools beschikbaar in de technologiewereld die testers kunnen helpen bij het testen van de gebruikersinterface.

• Selenium
• HP Unified Functional Testing
• Komkommer
• Gecodeerde gebruikersinterface
• Werkelijk

Een gedetailleerde lijst met GUI-tools is beschikbaar in softwaretestinghelp.com zelf! Klik alstublieft hier ​

Voorbeelden van GUI-testcases

1) Controleer de werking van carrouselpijlen en wegzoekers
twee) Controleer of het wachtwoordveld alleen waarden accepteert in een gemaskeerde staat
3) Controleer of de knop ‘opslaan’ inactief blijft totdat alle vereiste velden zijn ingevuld
4) Controleer of de gebruiker naar de bovenkant van de pagina mag navigeren met de balk ‘Top’
5) Controleer of het juiste bericht wordt weergegeven wanneer de toegepaste filters geen resultaten ophalen
6) Controleer de navigatie van koppelingen die beschikbaar zijn in kopteksten en voetteksten
7) Controleer of de uitlijning van keuzerondjes juist is
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 door erop te klikken

Gevolgtrekking

Een website is de ziel van veel bedrijven. Het is zeer noodzakelijk om ervoor te zorgen dat het er goed uitziet en op dezelfde manier werkt op verschillende browsers en platforms. UI-testen zijn dus erg belangrijk en het zorgt voor een groot klantenbestand en een toegevoegde waarde voor het bedrijf.

Aanbevolen literatuur

• Beste softwaretesttools 2021 (QA Test Automation Tools)
• Alfatesten en bètatesten (een complete gids)
• Primer eBook downloaden testen
• Functioneel testen versus niet-functioneel testen
• Build Verification Testing (BVT Testing) Complete Guide
• Wat is interfacetesten? Ken de typen, strategie en tools
• QA Outsourcing Guide: Software Testing Outsourcing Companies
• Soorten softwaretests: verschillende testtypen met details