GUI-testen: UI-testcases en voorbeelden
Redactie
⚡ Slimme samenvatting
GUI-testen valideren elk zichtbaar element van een applicatie — knoppen, menu's, pictogrammen, tekstvakken en lay-outs — zodat schermen zich precies gedragen en eruitzien zoals gespecificeerd in verschillende browsers, op verschillende apparaten en met verschillende schermresoluties, nog voordat echte gebruikers ze aanraken.
Om GUI-testen te begrijpen, moeten we eerst begrijpen wat een GUI is.
Wat is GUI?
Er zijn twee soorten interfaces voor een computertoepassing. De opdrachtregelinterface is waar u tekst typt en de computer reageert op die opdracht. GUI staat voor Graphical User Interface, waarbij u met de computer communiceert met behulp van afbeeldingen in plaats van tekst.
Hieronder staan de GUI-elementen die gebruikt kunnen worden voor interactie tussen de gebruiker en de applicatie:
GUI-testen is een validatie van de bovenstaande elementen.
Wat is GUI-testen?
GUI-testen is een softwaretesttype dat de grafische gebruikersinterface van de software controleert. Het doel van het testen van de grafische gebruikersinterface (GUI) is ervoor te zorgen dat de functionaliteiten van de softwareapplicatie werken volgens de specificaties door schermen en bedieningselementen zoals menu's, knoppen, pictogrammen, enz. te controleren.
De GUI is wat de gebruiker ziet. Ga naar guru99.com en de homepage die verschijnt, is de GUI van de site. De broncode blijft verborgen; alleen de interface is zichtbaar. GUI-testen richten zich daarom op de ontwerpstructuur en op de correcte weergave van afbeeldingen.
In de bovenstaande schermafbeelding begint de GUI-test met het controleren of elke afbeelding volledig zichtbaar is in verschillende browsers. De resterende controles op diezelfde pagina zijn:
- De links zijn beschikbaar en elke knop werkt wanneer erop geklikt wordt.
- Het wijzigen van de schermgrootte zorgt er nooit voor dat afbeeldingen of tekst kleiner worden, bijgesneden worden of elkaar overlappen.
- Er blijft niets in de lay-out veranderen wanneer het browservenster smaller wordt gemaakt.
💡Tip: Test dezelfde pagina op de resoluties 1920×1080, 1366×768 en 375×812 voordat u een fout meldt. Veel meldingen van "kapotte lay-out" betreffen simpelweg niet-geteste breakpoints.
Noodzaak van GUI-testen
Nu het basisconcept van GUI-testen duidelijk is, zullen de volgende vragen bij u opkomen:
- Waarom GUI-testen?
- Is het echt nodig?
- Is het testen van de functionaliteit en logica van een applicatie op zich niet voldoende, en waarom zou je dan extra tijd besteden aan de interface?
Om het antwoord te vinden, moet je denken als een gebruiker en niet als een tester. Een gebruiker weet niet hoe de applicatie is gebouwd. Het is de interface die bepaalt of die gebruiker de applicatie blijft gebruiken of ermee stopt.
Een doorsnee gebruiker kijkt eerst naar het ontwerp en de vormgeving van de applicatie, en hoe gebruiksvriendelijk de interface is. Als een gebruiker zich niet prettig voelt bij de interface, of de applicatie te complex vindt, zal die gebruiker niet meer terugkomen. De grafische gebruikersinterface (GUI) is daarom een belangrijk aandachtspunt en moet grondig getest worden om er zeker van te zijn dat de interface vrij is van bugs.
Soorten GUI-testen
Weten waarom de interface belangrijk is, is slechts de helft van het verhaal. GUI-testen zijn er in vijf soorten, en elk type beantwoordt een andere vraag over hetzelfde scherm.
- Functionele GUI-testen: Bevestigt dat elke bedieningseenheid doet wat hij belooft. Nauw verwant aan functioneel testenHet vraagt of een knop een formulier verzendt, een keuzelijst filtert en een veld geldige invoer accepteert.
- Bruikbaarheidstesten: Meet hoe gemakkelijk een echt persoon een taak voltooit. Bruikbaarheidstesten Het onderzoek bekijkt de diepte van de navigatie, de leesbaarheid en of foutmeldingen daadwerkelijk nuttig zijn.
- Compatibiliteitstesten: De schermen worden steeds hetzelfde weergegeven in verschillende browsers, besturingssystemen en op verschillende schermformaten. Cross-browser testen vangt weergavefouten op die alleen in één engine voorkomen.
- Toegankelijkheidstesten: Controleert de toetsenbordnavigatie, de labels voor schermlezers en het kleurcontrast volgens de WCAG-richtlijnen. Toegankelijkheidstesten is nu in veel markten een wettelijke verplichting, geen optionele extra meer.
- Visuele en prestatietests: Vergelijkt weergegeven schermafbeeldingen met een basislijn en meet hoe snel de interface tekent en reageert, en de overlapping.ping with prestatie testen.
De meeste teams passen alle vijf criteria toe, maar hanteren een verschillende weegfactor: een publieke website legt de nadruk op compatibiliteit en toegankelijkheid, een intern dashboard op functionele controles.
Wat controleer je tijdens GUI-testen?
De volgende checklist zorgt voor gedetailleerde GUI-tests bij het testen van software.
- Controleer alle GUI-elementen op grootte, positie, breedte, lengte en acceptatie van tekens of getallen. U moet bijvoorbeeld invoer kunnen leveren voor de invoervelden.
- Controleer of u de beoogde functionaliteit van de applicatie kunt uitvoeren met behulp van de GUI
- Controleer of foutmeldingen correct worden weergegeven
- Controleer of de verschillende secties op het scherm duidelijk zijn afgebakend
- Controleer of het lettertype dat in een applicatie wordt gebruikt leesbaar is
- Controleer of de uitlijning van de tekst correct is
- Controleer of de kleur van het lettertype en de waarschuwingsberichten esthetisch aantrekkelijk zijn
- Controleer of de afbeeldingen goed scherp zijn
- Controleer of de afbeeldingen goed zijn uitgelijnd
- Controleer de positionering van GUI-elementen voor verschillende schermresoluties.
GUI-testtechnieken
Zodra de checklist er is, is de volgende vraag hoe deze uitgevoerd gaat worden. GUI-testtechnieken kan in drie delen worden onderverdeeld:
Handmatig gebaseerd testen
Bij deze aanpak worden grafische schermen handmatig door testers gecontroleerd op basis van de eisen die staan vermeld in het document met bedrijfsvereisten.
Opnemen en opnieuw afspelen
GUI-testen kunnen worden uitgevoerd met behulp van automatiseringstools. Dit gebeurt in twee fasen. Tijdens de opnamefase worden de teststappen vastgelegd door de automatiseringstool. Tijdens de afspeelfase worden de opgenomen teststappen uitgevoerd op de te testen applicatie. Een voorbeeld van dergelijke tools is... QTP.
Modelgebaseerd testen
Een model is een grafische beschrijving van het gedrag van een systeem. Het helpt ons het gedrag van het systeem te begrijpen en te voorspellen. Modellen helpen bij het genereren van efficiënte testgevallen op basis van de systeemvereisten. Het onderstaande diagram laat zien hoe een model de testgeneratie aanstuurt:
Voor deze modelgebaseerde test moet rekening worden gehouden met het volgende:
- Bouw het model
- Bepaal de invoer voor het model
- Bereken de verwachte output voor het model
- Voer de tests uit
- Vergelijk de werkelijke output met de verwachte output
- Een besluit over verdere actie op het model
Enkele modelleringstechnieken waaruit testgevallen kunnen worden afgeleid:
- Grafieken – Geeft de status van een systeem weer en controleert de status na enige invoer.
- Beslissingstabellen – Tabellen die worden gebruikt om de resultaten voor elke toegepaste invoer te bepalen
Modelgebaseerd testen is een zich ontwikkelende techniek voor het genereren van testgevallen op basis van de vereisten. Het belangrijkste voordeel, vergeleken met de twee bovenstaande methoden, is dat het ongewenste toestanden kan bepalen die uw GUI kan bereiken.
Handmatig versus geautomatiseerd GUI-testen
Twee van die drie technieken zijn handmatig en één is geautomatiseerd, wat de praktische vraag oproept waar ze elk thuishoren. Handmatig testen Het plaatst een mens voor het scherm, waardoor onhandige workflows, onhandige formuleringen en animaties die niet kloppen, worden opgemerkt – oordelen die geen enkel script kan vellen.
Geautomatiseerde testen Het herhaalt dezelfde interacties duizenden keren zonder vermoeidheid, waardoor het de juiste oplossing is voor stabiele regressietests en voor het herhalen van één testsuite in meerdere browsers. De keerzijde is het onderhoud: geautomatiseerde GUI-scripts werken niet meer wanneer een locator of lay-out verandert. De meeste volwassen teams werken daarom met een hybride aanpak, waarbij ze de herhaalbare taken automatiseren en mensen inzetten voor de meer experimentele taken.
| Factor | Handmatig GUI-testen | Geautomatiseerd GUI-testen |
|---|---|---|
| Best voor | Nieuwe schermen, verkennende tests, uiterlijk en gevoel | Stabiele regressietests, cross-browser tests |
| Snelheid per cyclus | Traag, beperkt door het aantal testeruren | Snel, kan 's nachts onbeheerd draaien. |
| Kosten vooraf | Laag | Hoog (scripting en frameworkconfiguratie) |
| Onderhoud | Niets meer dan het bijwerken van de checklist. | Belangrijk wanneer de interface verandert. |
| Legt subjectieve kwesties bloot | Ja | Nee |
Voorbeeld GUI-testen Testcases
GUI-testen houdt in principe in
- Het testen van de grootte, positie, breedte en hoogte van de elementen.
- Testen van de foutmeldingen die worden weergegeven.
- Het testen van de verschillende delen van het scherm.
- Testen of het lettertype leesbaar is of niet.
- Testen van het scherm in verschillende resoluties met behulp van in- en uitzoomen, zoals 640 x 480, 600×800, enz.
- Het testen van de uitlijning van de teksten en andere elementen zoals pictogrammen, knoppen, etc. staan op de juiste plaats of niet.
- Het testen van de kleuren van de lettertypen.
- Het testen van de kleuren van de foutmeldingen, waarschuwingsberichten.
- Testen of het beeld een goede helderheid heeft of niet.
- Testen van de uitlijning van de afbeeldingen.
- Testen van de spelling.
- De gebruiker mag niet gefrustreerd raken tijdens het gebruik van de systeeminterface.
- Testen of de interface zich optracactief of niet.
- Testen van de schuifbalken op basis van de grootte van de pagina, indien aanwezig.
- Testen van de uitgeschakelde velden, indien aanwezig.
- Testen van de grootte van de afbeeldingen.
- Testen van de koppen of deze goed zijn uitgelijnd of niet.
- Testen van de kleur van de hyperlink.
Demo: hoe u een GUI-test uitvoert
De bovenstaande lijst wordt veel duidelijker wanneer deze op een echt scherm wordt toegepast. Daarom zullen we hier enkele voorbeeldtestgevallen gebruiken voor het volgende dialoogvenster.
Hieronder volgt een voorbeeld van testgevallen, bestaande uit UI- en gebruiksvriendelijkheidstestscenario's. Als je nog niet bekend bent met het schrijven van testgevallen, zie dan... hoe testcases te schrijven kopen.
Testgeval 01 – Controleer of het tekstvak met het label “Bronmap” goed is uitgelijnd.
Testgeval 02 – Controleer of het tekstvak met het label “Pakket” goed is uitgelijnd.
Testgeval 03 – Controleer of het etiket de naam "Blader” is een knop die zich aan het einde van Tekst bevindtBox met de naam "Bronmap. '
Testgeval 04 – Controleer of het etiket de naam "Blader” is een knop die zich aan het einde van Tekst bevindtBox met de naam "Pakket. '
Testgeval 05 – Controleer of het tekstvak met het label “Naam” goed is uitgelijnd.
Testgeval 06 – Controleer of het etiket “modifiers” bestaat uit 4 keuzerondjes met de naam openbaar, standaard, privé, beschermd.
Testgeval 07 – Controleer of het etiket “modifiers” bestaat uit 4 keuzerondjes die goed op een rij zijn uitgelijnd.
Testgeval 08 – Controleer of het etiket “Superklasse” onder het etiket “modifiersbestaat uit een vervolgkeuzelijst die goed moet worden uitgelijnd.
Testgeval 09 – Controleer of het etiket “Superklasse' bestaat uit een knop met het label 'Blader” erop, die goed moeten worden uitgelijnd.
Testgeval 10 – Controleer of bij het klikken op een keuzeknop de standaard muisaanwijzer wordt gewijzigd in een handaanwijzer.
Testgeval 11 – Controleer of de gebruiker niet in het keuzemenu van “ kan typenSuperklasse. '
Testgeval 12 – Controleer of er een correcte foutmelding wordt gegenereerd als er per ongeluk iets verkeerd is geselecteerd.
Testgeval 13 – Controleer of de foutmelding overal waar nodig in het rood wordt weergegeven.
Testgeval 14 – Controleer of de juiste labels in de foutmeldingen moeten worden gebruikt.
Testgeval 15 – Controleer of de afzonderlijke keuzeradiobuttons standaard altijd geselecteerd moeten zijn.
Testgeval 16 – Controleer of de TAB-toets correct werkt tijdens het springen.ping op een ander veld naast het vorige.
Testgeval 17 – Controleer of alle pagina's de juiste titel bevatten.
Testgeval 18 – Controleer of de tekst op de pagina correct is uitgelijnd.
Testgeval 19 – Controleer of er na het bijwerken van een veld een correcte bevestigingsmelding wordt weergegeven.
Testgeval 20 – Controleer of er slechts één keuzeradiobutton geselecteerd mag zijn en of er meerdere selectievakjes aangevinkt mogen zijn.
Uitdagingen bij GUI-testen
Het schrijven van die casussen is eenvoudig; houd er rekening mee datping Het is niet mogelijk om ze gedurende meerdere releases in leven te houden. In software engineering is het meest voorkomende probleem bij het ontwikkelen van software dat hierbij een rol speelt. Regressie Testing is dat de GUI van de applicatie regelmatig verandert. Het is erg moeilijk om te testen en te identificeren of het een probleem of een verbetering is. Het probleem manifesteert zich als u geen documenten heeft met betrekking tot GUI-wijzigingen.
⚠️ Waarschuwing: Scripts die elementen lokaliseren aan de hand van schermcoördinaten of automatisch gegenereerde ID's zullen bij de volgende build niet werken. Beschouw een lokalisatiestrategie als onderdeel van het ontwerp, niet als een bijzaak.
GUI-testtools
Met de juiste gereedschappen wordt een groot deel van die veranderingen opgevangen. Hieronder volgt een lijst met populaire gereedschappen. GUI-testtools :
- Selenium
- QTP
- Cucumber
- ZijdeTest
- TestComplete
- Squish GUI-tester
Klik hier om te leren Selenium, QTP & Cucumber.
Hieronder staan open source-tools waarmee u geautomatiseerde UI-tests kunt uitvoeren.
| Product | Gelicentieerd onder |
|---|---|
| AutoHotkey | LPG |
| Selenium | apache |
| Sikuli | MIT |
| Robot-kader | apache |
| Water | BSD |
| Dojo-toolkit | BSD |
Sikuli is beeldgebaseerd en nuttig wanneer een controlepunt geen betrouwbare locator heeft; Selenium blijft de standaard voor testen van webapplicaties.
