Testování grafického uživatelského rozhraní: Testovací případy a příklady uživatelského rozhraní

Abychom pochopili testování GUI, nejprve si ujasněme, co GUI vlastně je.

Co je GUI?

Existují dva typy rozhraní pro počítačovou aplikaci. Rozhraní příkazového řádku je místo, kde zadáváte text a počítač na tento příkaz reaguje. GUI je zkratka pro Graphical User Interface, kde komunikujete s počítačem spíše pomocí obrázků než textu.

Následují prvky GUI, které lze použít pro interakci mezi uživatelem a aplikací:

Testování GUI je ověřením výše uvedených prvků.

Co je testování GUI?

Testování GUI je typ testování softwaru, který kontroluje grafické uživatelské rozhraní softwaru. Účelem testování grafického uživatelského rozhraní (GUI) je zajistit, aby funkce softwarové aplikace fungovaly podle specifikací kontrolou obrazovek a ovládacích prvků, jako jsou nabídky, tlačítka, ikony atd.

GUI je to, co vidí uživatel. Navštivte guru99.com a zobrazí se domovská stránka, která je GUI webu. Zdrojový kód zůstává skrytý; viditelné je pouze rozhraní. Testování GUI se proto zaměřuje na strukturu designu a na to, zda se obrázky vykreslují správně.

Na výše uvedeném snímku obrazovky začíná testování grafického uživatelského rozhraní ověřením, zda je každý obrázek zcela viditelný v různých prohlížečích. Zbývající kontroly na stejné stránce jsou:

• Odkazy jsou dostupné a každé tlačítko funguje po kliknutí.
• Změna velikosti obrazovky nikdy nezpůsobí zmenšení, oříznutí ani překrytí obrázků ani textu.
• Při zúžení okna prohlížeče se nic v rozvržení nesbalí.

💡 Tip: Před zaznamenáním jakékoli vady spusťte stejnou stránku v rozlišení 1920×1080, 1366×768 a 375×812. Mnoho reportů s „porušeným rozvržením“ jsou jednoduše neotestované zarážky.

Potřeba testování GUI

Základní koncept testování grafického uživatelského rozhraní je nyní jasný. Napadne vás několik otázek:

• Proč testovat GUI?
• Je to opravdu potřeba?
• Nestačí jen testování funkčnosti a logiky aplikace a proč trávit další čas rozhraním?

Abyste dostali odpověď, myslete jako uživatel, a ne jako tester. Uživatel neví, jak byla aplikace vytvořena. Je to rozhraní, které rozhoduje o tom, zda v aplikaci bude pokračovat, nebo ji opustí.

Běžný uživatel si nejprve všimne designu a vzhledu aplikace a toho, jak snadno se dá pochopit rozhraní. Pokud se uživatel s rozhraním necítí dobře nebo pokud je aplikace složitá k pochopení, už se k aplikaci nikdy nevrátí. Grafické uživatelské rozhraní je proto důvodem k obavám a mělo by být provedeno řádné testování, aby se zajistilo, že rozhraní neobsahuje chyby.

Typy testování grafického uživatelského rozhraní

Vědět, proč je rozhraní důležité, je jen polovina úspěchu. Testování grafického uživatelského rozhraní je rodina pěti typů a každý z nich odpovídá na jinou otázku týkající se stejné obrazovky.

• Funkční testování grafického uživatelského rozhraní: Potvrzuje, že každý ovládací prvek splňuje to, co slibuje. Úzce souvisí s funkční testování, ptá se, zda tlačítko odešle, rozbalovací nabídka filtruje a pole přijímá platný vstup.
• Testování použitelnosti: Měří, jak snadno skutečná osoba dokončí úkol. Testování použitelnosti zkoumá hloubku navigace, čitelnost a to, zda chybové zprávy skutečně pomáhají.
• Testování kompatibility: Opakuje stejné obrazovky napříč prohlížeči, operačními systémy a velikostmi zařízení. Testování mezi prohlížeči zachycuje chyby vykreslování, které se objevují pouze v jednom enginu.
• Testování přístupnosti: Ověřuje navigaci pomocí klávesnice, popisky čteček obrazovky a barevný kontrast podle standardů WCAG. Testování přístupnosti je nyní na mnoha trzích požadavkem na shodu s předpisy, nikoli volitelným doplňkem.
• Vizuální a výkonnostní testování: Porovnává vykreslené snímky obrazovky s výchozím stavem a měří, jak rychle rozhraní vykresluje a reaguje, a jak se překrývá.ping s testování výkonu.

Většina týmů používá všech pět prvků, ale klade na ně různou váhu: veřejné webové stránky se opírají o kompatibilitu a přístupnost, interní dashboard o funkční kontroly.

Co kontrolujete při testování grafického uživatelského rozhraní?

Následující kontrolní seznam zajistí podrobné testování GUI v testování softwaru.

• Zkontrolujte velikost, polohu, šířku, délku a přijatelnost znaků nebo čísel u všech prvků GUI. Například musíte být schopni zadat vstupy do vstupních polí.
• Zkontrolujte, zda můžete spustit zamýšlenou funkčnost aplikace pomocí GUI
• Zkontrolujte, zda se chybové zprávy zobrazují správně
• Zkontrolujte, zda je na obrazovce jasné ohraničení různých částí
• Zkontrolujte, zda je písmo použité v aplikaci čitelné
• Zkontrolujte správné zarovnání textu
• Zkontrolujte, zda je barva písma a varovných zpráv esteticky příjemná
• Zkontrolujte, zda jsou obrázky dobře zřetelné
• Zkontrolujte, zda jsou obrázky správně zarovnány
• Zkontrolujte umístění prvků GUI pro různé rozlišení obrazovky.

GUI testovací techniky

Jakmile existuje kontrolní seznam, dalším rozhodnutím je, jak jej provést. GUI testovací techniky lze rozdělit do tří částí:

Manuální testování

V rámci tohoto přístupu jsou grafické obrazovky kontrolovány ručně testery v souladu s požadavky uvedenými v dokumentu obchodních požadavků.

Záznam a přehrávání

Testování grafického uživatelského rozhraní lze provádět pomocí automatizačních nástrojů. Provádí se ve dvou částech. Během nahrávání jsou testovací kroky zachyceny automatizačním nástrojem. Během přehrávání jsou zaznamenané testovací kroky provedeny v testované aplikaci. Příklad takových nástrojů – QTP.

Testování založené na modelu

Model je grafický popis chování systému. Pomáhá nám pochopit a předvídat chování systému. Modely pomáhají generovat efektivní testovací případy s využitím systémových požadavků. Následující diagram ukazuje, jak model řídí generování testů:

Pro toto testování na základě modelu je třeba zvážit následující:

• Sestavte model
• Určete vstupy pro model
• Vypočítejte očekávaný výstup pro model
• Spusťte testy
• Porovnejte skutečný výkon s očekávaným výkonem
• Rozhodnutí o dalším postupu na modelu

Některé z technik modelování, ze kterých lze odvodit testovací případy:

• Grafy – Zobrazuje stav systému a kontroluje stav po nějakém vstupu.
• Rozhodovací tabulky – tabulky používané k určení výsledků pro každý použitý vstup

Testování založené na modelu je vyvíjející se technikou pro generování testovacích případů z požadavků. Jeho hlavní výhodou oproti výše uvedeným dvěma metodám je, že dokáže určit nežádoucí stavy, kterých může vaše GUI dosáhnout.

Manuální vs. automatizované testování grafického uživatelského rozhraní

Dvě z těchto tří technik jsou manuální a jedna je automatizovaná, což vyvolává praktickou otázku, kam která z nich patří. Ruční testování umístí člověka před obrazovku, takže zachytí nešikovné pracovní postupy, neohrabané formulace a animace, které působí nesprávně – úsudky, které žádný scénář nedokáže vynést.

Automatizované testování přehrává stejné interakce tisíckrát bez únavy, což z něj dělá správnou odpověď pro stabilní regresní cesty a pro opakování jedné sady napříč mnoha prohlížeči. Kompromisem je údržba: automatizované skripty grafického uživatelského rozhraní selhávají při každé změně lokátoru nebo rozvržení. Většina vyspělých týmů proto používá hybrid, automatizuje opakovatelné procesy a rezervuje lidi pro zážitkové procesy.

Faktor	Manuální testování grafického uživatelského rozhraní	Automatizované testování grafického uživatelského rozhraní
Nejlepší pro	Nové obrazovky, průzkumné kontroly, vzhled a dojem	Stabilní regresní sady, běh napříč prohlížeči
Rychlost na cyklus	Pomalé, omezené počtem hodin testování	Rychlý, běží bez obsluhy přes noc
Počáteční náklady	Nízké	Vysoká (skriptování a nastavení frameworku)
Údržba	Žádné kromě aktualizace kontrolního seznamu	Významné při změně rozhraní
Zachycuje subjektivní problémy	Ano	Ne

Příklad testovacích případů GUI

Testování GUI v podstatě zahrnuje

1. Testování velikosti, polohy, šířky, výšky prvků.
2. Testování chybových zpráv, které se zobrazují.
3. Testování různých částí obrazovky.
4. Testování písma, zda je čitelné nebo ne.
5. Testování obrazovky v různých rozlišeních pomocí přiblížení a oddálení jako 640 x 480, 600 × 800 atd.
6. Testování zarovnání textů a dalších prvků, jako jsou ikony, tlačítka atd., jsou nebo nejsou na správném místě.
7. Testování barev písma.
8. Testování barev chybových hlášení, varovných hlášení.
9. Testování, zda má obrázek dobrou čistotu nebo ne.
10. Testování zarovnání obrázků.
11. Testování pravopisu.
12. Uživatel nesmí být frustrovaný při používání systémového rozhraní.
13. Testování, zda je rozhraní natracaktivní nebo ne.
14. Testování posuvníků podle velikosti stránky, pokud existuje.
15. Testování zakázaných polí, pokud existují.
16. Testování velikosti obrázků.
17. Testování nadpisů, zda jsou správně zarovnány nebo ne.
18. Testování barvy hypertextového odkazu.

Demo: Jak provést test GUI

Výše uvedený seznam se stane mnohem jasnějším, když se aplikuje na skutečnou obrazovku, takže zde pro následující dialog použijeme několik ukázkových testovacích případů.

Níže je uveden příklad testovacích případů, který se skládá ze scénářů testování uživatelského rozhraní a použitelnosti. Pokud s jejich psaním začínáte, podívejte se na jak psát testovací případy .

Testovací případ 01 – Ověřte, zda textové pole s popiskem „Zdrojová složka“ je správně zarovnán.

Testovací případ 02 – Ověřte, zda textové pole s popiskem „Balíček“ je správně zarovnán.

Testovací případ 03 – Ověřte, zda štítek s názvem „Procházet” je tlačítko, které se nachází na konci textuBox se jménem"Zdrojová složka. "

Testovací případ 04 – Ověřte, zda štítek s názvem „Procházet” je tlačítko, které se nachází na konci textuBox se jménem"Balíček. "

Testovací případ 05 – Ověřte, zda textové pole s popiskem „Jméno“ je správně zarovnán.

Testovací případ 06 – Ověřte, zda je štítek „Modifikátory“ se skládá ze 4 přepínačů s názvem public, default, private, protected.

Testovací případ 07 – Ověřte, zda je štítek „Modifikátory“ se skládá ze 4 přepínačů, které jsou správně zarovnány v řadě.

Testovací případ 08 – Ověřte, zda je štítek „Nadtřída“ pod štítkem “Modifikátory” sestává z rozevíracího seznamu, který musí být správně zarovnán.

Testovací případ 09 – Ověřte, zda je štítek „Nadtřída“ se skládá z tlačítka se štítkem “Procházet“, který musí být správně zarovnán.

Testovací případ 10 – Ověřte, že kliknutím na libovolné přepínač se výchozí ukazatel myši musí změnit na ukazatel myši ve tvaru ruky.

Testovací případ 11 – Ověřte, že uživatel nesmí být schopen zadat text do rozbalovací nabídky „Nadtřída. "

Testovací případ 12 – Ověřte, že v případě chybného výběru musí být vygenerována správná chyba.

Testovací případ 13 – Ověřte, že chyba musí být všude, kde je to nutné, vygenerována ČERVENOU barvou.

Testovací případ 14 – Ověřte, zda v chybových hlášeních musí být použity správné popisky.

Testovací případ 15 – Ověřte, zda musí být jednotlivá přepínací tlačítka vždy ve výchozím nastavení vybrána.

Testovací případ 16 – Ověřte, zda tlačítko TAB při skoku funguje správně.ping na jiném poli vedle předchozího.

Testovací případ 17 – Ověřte, zda všechny stránky musí obsahovat správný název.

Testovací případ 18 – Ověřte, zda je text na stránce správně zarovnán.

Testovací případ 19 – Ověřte, zda se po aktualizaci libovolného pole musí zobrazit správná potvrzovací zpráva.

Testovací případ 20 – Ověřte, že musí být vybrán pouze jeden přepínač a že lze zaškrtnout více než jedno zaškrtávací políčko.

Výzvy v testování GUI

Psaní těchto případů je jednoduché; udržujteping jejich živé po několik vydání není. V softwarovém inženýrství je nejčastějším problémem při dělání Regresní testování je, že se GUI aplikace často mění. Je velmi obtížné testovat a identifikovat, zda se jedná o problém nebo vylepšení. Problém se projevuje, když nemáte žádné dokumenty týkající se změn GUI.

Warning️ Varování: Skripty, které vyhledávají prvky podle souřadnic obrazovky nebo automaticky generovaných ID, selžou při dalším sestavení. Strategii vyhledávání berte jako součást návrhu, ne jako dodatečnou myšlenku.

Nástroje pro testování GUI

Správné nástroje absorbují velkou část tohoto chaosu. Následuje seznam oblíbených Nástroje pro testování GUI :

1. Selenium
2. QTP
3. Cucumber
4. SilkTest
5. TestComplete
6. Squish GUI Tester

Klepnutím sem se dozvíte Selenium, QTP & Cucumber.

Následují nástroje s otevřeným zdrojovým kódem, které jsou k dispozici pro provádění automatizovaného testu uživatelského rozhraní.

Produktový vývoj	Licencováno pod
AutoHotkey	LPG
Selenium	Apache
Sikuli	MIT
Robot Framework	Apache
voda	BSD
Sada nástrojů Dojo	BSD

Sikuli je založen na obrázku, užitečný, když ovládací prvek nemá spolehlivý lokátor; Selenium zůstává výchozím nastavením pro testování webových aplikací.

Nejčastější dotazy