GUI tesztelés: UI tesztesetek és példák

A grafikus felhasználói felület (GUI) tesztelésének megértéséhez először nézzük meg, mi is az a grafikus felhasználói felület (GUI).

Mi az a GUI?

A számítógépes alkalmazásokhoz kétféle interfész létezik. A parancssori felületen szöveget kell beírni, és a számítógép válaszol a parancsra. A GUI a grafikus felhasználói felület rövidítése, ahol szöveg helyett képek használatával kommunikálhat a számítógéppel.

Az alábbiakban felsoroljuk azokat a GUI-elemeket, amelyek a felhasználó és az alkalmazás közötti interakcióhoz használhatók:

A GUI tesztelése a fenti elemek érvényesítése.

Mi az a GUI tesztelés?

GUI tesztelés egy szoftvertesztelési típus, amely ellenőrzi a szoftver grafikus felhasználói felületét. A grafikus felhasználói felület (GUI) tesztelésének célja, hogy biztosítsa a szoftveralkalmazások specifikációinak megfelelő működését a képernyők és vezérlők, például menük, gombok, ikonok stb.

A grafikus felhasználói felület (GUI) az, amit a felhasználó lát. Látogasson el a guru99.com weboldalra, és a megjelenő kezdőlap a webhely grafikus felhasználói felülete. A forráskód rejtve marad; csak a felület látható. A grafikus felhasználói felület tesztelése ezért a tervezési struktúrára és arra összpontosít, hogy a képek megfelelően jelennek-e meg.

A fenti képernyőképen a grafikus felhasználói felület tesztelése azzal kezdődik, hogy minden kép teljes egészében látható-e a különböző böngészőkben. Az ugyanazon az oldalon végzett további ellenőrzések a következők:

• A linkek elérhetők, és minden gomb működik, ha rákattintunk.
• A képernyő átméretezése soha nem okozza a képek vagy a szöveg összezsugorodását, levágását vagy átfedését.
• Az elrendezésben semmi sem omlik össze, ha a böngészőablak szűkebb lesz.

💡 Tipp: Futtassa ugyanazt az oldalt 1920×1080, 1366×768 és 375×812 felbontásban, mielőtt bármilyen hibát naplózna. Sok „hibás elrendezésről” szóló jelentés egyszerűen nem tesztelt töréspont.

GUI tesztelés szükséges

Most már világos a grafikus tesztelés alapkoncepciója. Néhány kérdés, ami biztosan eszedbe jut:

• Miért végezzünk GUI tesztelést?
• Valóban szükség van rá?
• Nem elég önmagában egy alkalmazás funkcionalitásának és logikájának tesztelése, és miért kellene plusz időt tölteni a felülettel?

A válasz megszerzéséhez felhasználóként, ne tesztelőként kell gondolkodni. A felhasználónak fogalma sincs arról, hogyan épült fel az alkalmazás. A felhasználói felület dönti el, hogy a felhasználó folytatja-e az alkalmazás használatát, vagy elhagyja.

Egy átlagos felhasználó először az alkalmazás dizájnját és kinézetét figyeli meg, és azt, hogy milyen könnyű megérteni a kezelőfelületet. Ha egy felhasználó nem érzi jól magát a kezelőfelülettel, vagy bonyolultnak találja az alkalmazás megértését, akkor soha többé nem fog visszatérni. A grafikus felhasználói felület ezért fontos szempont, és megfelelő tesztelést kell végezni annak érdekében, hogy a kezelőfelület mentes legyen a hibáktól.

GUI tesztelés típusai

A felhasználói felület fontosságának ismerete csupán a kép fele. A grafikus felhasználói felület tesztelése öt típusból álló család, és mindegyik más kérdésre ad választ ugyanazzal a képernyővel kapcsolatban.

• Funkcionális grafikus felhasználói felület tesztelése: Megerősíti, hogy minden vezérlő azt teszi, amit ígér. Szorosan kapcsolódik a következőkhöz: funkcionális tesztelés, rákérdez, hogy egy gomb elküldi-e a feltételt, egy legördülő menü szűr, és egy mező érvényes bemenetet fogad-e el.
• Használhatósági tesztelés: Azt méri, hogy egy valós személy milyen könnyen végez el egy feladatot. Használhatóság tesztelése a navigáció mélységét, az olvashatóságot és azt vizsgálja, hogy a hibaüzenetek valóban segítenek-e.
• Kompatibilitási teszt: Ugyanazokat a képernyőket ismétli meg különböző böngészőkben, operációs rendszereken és eszközméretekben. Keresztböngésző tesztelése olyan hibákat jelez, amelyek csak az egyik motorban jelentkeznek.
• Akadálymentesítési tesztelés: Ellenőrzi a billentyűzetnavigációt, a képernyőolvasó feliratait és a színkontrasztot a WCAG szerint. Akadálymentesítési tesztelés ma már számos piacon megfelelési követelmény, nem pedig opcionális extra.
• Vizuális és teljesítménytesztelés: Összehasonlítja a renderelt képernyőképeket egy alapvonallal, és méri, hogy a felület milyen gyorsan rajzolódik ki, reagál, átfedésbe kerül.ping ahol Teljesítményfelmérés.

A legtöbb csapat mind az öt funkciót futtatja, de eltérő súlyozással kezeli őket: egy nyilvános weboldal a kompatibilitásra és az akadálymentesítésre, egy belső irányítópult a funkcionális ellenőrzésekre támaszkodik.

Mit ellenőriznek a GUI tesztelés során?

A következő ellenőrzőlista biztosítja a részletes grafikus felhasználói felület tesztelését a szoftvertesztelés során.

• Ellenőrizze az összes grafikus felhasználói felület elem méretét, helyzetét, szélességét, hosszát, valamint a karakterek és számok elfogadását. Például képesnek kell lennie a beviteli mezők megadására.
• Ellenőrizze, hogy végrehajthatja-e az alkalmazás tervezett funkcióit a grafikus felhasználói felület segítségével
• Ellenőrizze, hogy a hibaüzenetek megfelelően jelennek-e meg
• Ellenőrizze a képernyőn a különböző szakaszok egyértelmű elhatárolását
• Az alkalmazásban használt betűtípus ellenőrzése olvasható
• Ellenőrizze a szöveg igazítását
• Ellenőrizze, hogy a betűtípus színe és a figyelmeztető üzenetek esztétikusak-e
• Ellenőrizze, hogy a képek tisztaak-e
• Ellenőrizze, hogy a képek megfelelően vannak-e igazítva
• Ellenőrizze a GUI-elemek elhelyezését a különböző képernyőfelbontásokhoz.

GUI tesztelési technikák

Miután az ellenőrzőlista elkészült, a következő döntés a végrehajtásának módja. GUI tesztelési technikák három részre osztható:

Kézi alapú tesztelés

Ebben a megközelítésben a grafikus képernyőket a tesztelők manuálisan ellenőrzik az üzleti követelmények dokumentumában meghatározott követelményeknek megfelelően.

Felvétel és újrajátszás

A grafikus felhasználói felület tesztelése automatizálási eszközökkel végezhető el. Ez két részben történik. Felvétel során a tesztlépéseket az automatizálási eszköz rögzíti. Visszajátszás során a rögzített tesztlépések a tesztelt alkalmazáson futnak. Példa ilyen eszközökre – QTP.

Modell alapú tesztelés

A modell a rendszer viselkedésének grafikus leírása. Segít megérteni és megjósolni a rendszer viselkedését. A modellek segítenek hatékony tesztesetek generálásában a rendszerkövetelmények felhasználásával. Az alábbi ábra bemutatja, hogyan vezérli a modell a tesztgenerálást:

A modell alapú tesztelésnél a következőket kell figyelembe venni:

• Építsd meg a modellt
• Határozza meg a modell bemeneteit
• Számítsa ki a modell várható kimenetét
• Futtassa le a teszteket
• Hasonlítsa össze a tényleges kimenetet a várt kimenettel
• Döntés a modell további lépéseiről

Néhány modellezési technika, amelyből tesztesetek származtathatók:

• Diagramok – A rendszer állapotát ábrázolja, és bizonyos bevitel után ellenőrzi az állapotot.
• Döntési táblázatok – Az egyes alkalmazott bemenetek eredményeinek meghatározására szolgáló táblázatok

A modell alapú tesztelés egy fejlődő technika a tesztesetek előállítására a követelményekből. Fő előnye a fenti két módszerhez képest, hogy képes meghatározni azokat a nemkívánatos állapotokat, amelyeket a grafikus felhasználói felület elérhet.

Manuális vs. automatizált GUI tesztelés

E három technika közül kettő manuális, egy pedig automatizált, ami felveti a gyakorlati kérdést, hogy melyik hova tartozik. Kézi tesztelés egy embert helyez a képernyő elé, így képes érzékelni a kínos munkafolyamatokat, a nehézkes fogalmazást és a helytelennek érződő animációkat – olyan ítéleteket, amelyeket egyetlen forgatókönyv sem tud meghozni.

Automatizált tesztelés ugyanazokat az interakciókat több ezerszer játssza le fáradtság nélkül, ami a helyes megoldássá teszi a stabil regressziós útvonalak és egy programcsomag több böngészőn való ismétlésére. A kompromisszum a karbantartás: az automatizált grafikus felhasználói felület szkriptek megszakadnak, valahányszor egy lokátor vagy elrendezés megváltozik. A legtöbb érett csapat ezért hibrid megoldást futtat, automatizálva az ismételhetőt, és az embereket a tapasztalati részre tartva fenn.

Tényező	Kézi grafikus felhasználói felület tesztelése	Automatizált grafikus felhasználói felület tesztelése
A legjobb	Új képernyők, felfedező ellenőrzések, megjelenés és érzet	Stabil regressziós csomagok, böngészőfüggetlen futtatások
Sebesség ciklusonként	Lassú, a tesztelők órái által korlátozott	Gyors, felügyelet nélkül fut egy éjszaka alatt
Előzetes költség	Alacsony	Magas (szkriptelés és keretrendszer beállítása)
Karbantartás	A lista frissítésén túl semmi más	Jelentős, amikor a felület megváltozik
Szubjektív problémákat tár fel	Igen	Nem

Példa GUI tesztelési tesztesetek

A GUI tesztelése alapvetően magában foglalja

1. Az elemek méretének, helyzetének, szélességének, magasságának tesztelése.
2. A megjelenő hibaüzenetek tesztelése.
3. A képernyő különböző részeinek tesztelése.
4. A betűtípus tesztelése, hogy olvasható-e vagy sem.
5. A képernyő tesztelése különböző felbontásokban nagyítás és kicsinyítés segítségével, mint 640 x 480, 600×800 stb.
6. A szövegek és egyéb elemek, például ikonok, gombok, stb. igazításának tesztelése, hogy a megfelelő helyen vannak-e vagy sem.
7. A betűtípusok színeinek tesztelése.
8. Hibaüzenetek, figyelmeztető üzenetek színeinek tesztelése.
9. Annak tesztelése, hogy a kép tiszta-e vagy sem.
10. A képek igazításának tesztelése.
11. A helyesírás tesztelése.
12. A felhasználónak nem szabad csalódnia a rendszerfelület használata közben.
13. Az interfész megfelelőségének tesztelésetractív vagy sem.
14. A görgetősávok tesztelése az oldal méretének megfelelően, ha van ilyen.
15. A letiltott mezők tesztelése, ha vannak ilyenek.
16. A képek méretének tesztelése.
17. A címsorok tesztelése, hogy megfelelően vannak-e igazítva vagy sem.
18. A hiperhivatkozás színének tesztelése.

Demo: A GUI-teszt elvégzése

A fenti lista sokkal érthetőbbé válik, ha egy valós képernyőre alkalmazzuk, ezért itt néhány minta tesztesetet fogunk használni a következő párbeszédpanelhez.

Az alábbiakban a tesztesetek példája látható, amelyek felhasználói felület és használhatósági tesztelési forgatókönyvekből állnak. Ha még nem ismeri őket, lásd: hogyan kell teszteseteket írni először.

01. teszteset – Ellenőrizze, hogy a „Forrás mappa” megfelelően van beállítva.

02. teszteset – Ellenőrizze, hogy a „Csomag” megfelelően van beállítva.

03. teszteset – Ellenőrizze, hogy a címkén szerepel-e a „Tallózás” egy gomb, amely a szöveg végén találhatóBox névvelForrás mappa. "

04. teszteset – Ellenőrizze, hogy a címkén szerepel-e a „Tallózás” egy gomb, amely a szöveg végén találhatóBox névvelCsomag. "

05. teszteset – Ellenőrizze, hogy a „Név” megfelelően van beállítva.

06. teszteset – Ellenőrizze, hogy a címke „Módosítók” 4 rádiógombból áll, amelyek neve nyilvános, alapértelmezett, privát, védett.

07. teszteset – Ellenőrizze, hogy a címke „Módosítók” 4 rádiógombból áll, amelyek egymás után megfelelően vannak elrendezve.

08. teszteset – Ellenőrizze, hogy a címke „Szuperosztály" címke alatt "Módosítók” egy legördülő menüből áll, amelyet megfelelően be kell állítani.

09. teszteset – Ellenőrizze, hogy a címke „Szuperosztály"" feliratú gombból állTallózás” van rajta, amelyet megfelelően be kell állítani.

10. teszteset – Ellenőrizze, hogy bármelyik választógombra kattintva az alapértelmezett egérmutató kéz egérmutatóra változik-e.

11. teszteset – Ellenőrizze, hogy a felhasználó nem tud-e gépelni a „Szuperosztály. "

12. teszteset – Ellenőrizze, hogy megfelelően generálódott-e hibaüzenet, ha valamit tévesen választottak ki.

13. teszteset – Ellenőrizze, hogy a hiba minden szükséges esetben PIROS színnel jelenik-e meg.

14. teszteset – Ellenőrizze, hogy a hibaüzenetekben a megfelelő címkéket kell-e használni.

15. teszteset – Ellenőrizze, hogy az egyes választógomboknak minden alkalommal alapértelmezés szerint ki kell-e választaniuk.

16. teszteset – Ellenőrizze, hogy a TAB gomb megfelelően működik-e ugrás közben.ping egy másik mezőn az előző mellett.

17. teszteset – Ellenőrizze, hogy minden oldalon szerepel-e a megfelelő cím.

18. teszteset – Ellenőrizze, hogy az oldalon található szöveg megfelelően van-e igazítva.

19. teszteset – Ellenőrizze, hogy bármely mező frissítése után megjelenik-e egy megfelelő megerősítő üzenet.

20. teszteset – Győződjön meg arról, hogy csak egy választógombot kell kiválasztani, és egynél több jelölőnégyzetet is be lehet jelölni.

Kihívások a grafikus felhasználói felület tesztelésében

Az ilyen esetek megírása egyszerű; keeping hogy több kiadáson keresztül is életben maradjanak. A szoftverfejlesztésben a leggyakoribb probléma a Regressziós teszt Az alkalmazás grafikus felhasználói felülete gyakran változik. Nagyon nehéz tesztelni és azonosítani, hogy ez probléma vagy fejlesztés. A probléma akkor jelentkezik, ha nem rendelkezik a grafikus felhasználói felület változásaival kapcsolatos dokumentumokkal.

⚠️ Figyelmeztetés: Az elemeket képernyő-koordináták vagy automatikusan generált azonosítók alapján megkereső szkriptek a következő build során hibát fognak lefutni. A helymeghatározó stratégiát a tervezés részeként kezeld, ne utólagos gondolatként.

GUI tesztelési eszközök

A megfelelő szerszámozás elnyeli ennek a lemorzsolódásnak a nagy részét. Az alábbiakban a népszerű GUI tesztelési eszközök :

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

Kattintson ide a tanuláshoz Selenium, QTP & Cucumber.

Az alábbiakban nyílt forráskódú eszközök állnak rendelkezésre az automatizált felhasználói felület teszteléséhez.

Termékek	Licenc alatt
AutoHotkey	GPL
Selenium	Apache
Sikuli	MIT
Robot keretrendszer	Apache
Víz - Water	BSD
Dojo Toolkit	BSD

Sikuli képalapú, ami akkor hasznos, ha egy vezérlőelemnek nincs megbízható helymeghatározója; Selenium továbbra is az alapértelmezett webes alkalmazás tesztelés.

GYIK