GUI tesztelés bemutató: a teljes felhasználói felület (UI) tesztelési útmutató

teljes útmutató a GUI teszteléshez: felhasználói felület tesztelése bemutató

mi a GUI tesztelés?

a GUI tesztelés az alkalmazás grafikus felhasználói felületének tesztelése a specifikációk szerinti megfelelő funkcionalitás biztosítása érdekében. Ez magában foglalja az alkalmazás összetevőinek, például gombok, ikonok, jelölőnégyzetek, szín, menü, ablakok stb.

a webes alkalmazások vizuális dinamikája kulcsszerepet játszik az alkalmazások felhasználó általi elfogadásában.

következésképpen ez az elfogadás az ügyfelek hosszú ideig tartó rabságát hozza az ügyfél alkalmazásával. A digitalizálás e korszakában a felhasználói felület gyorsan változik, és kulcsfontosságú erőt jelent a lehetséges ügyfelek új tömegének vonzásában.

GUI tesztelés

felhasználói felület tesztelés

annak érdekében, hogy a webes alkalmazások vizuális esztétikája jól elfogadott legyen, a felhasználói felület és a használhatóság tesztelése az Általános minőségbiztosítási gyakorlat kulcsfontosságú szempontjává válik. Minden olyan alkalmazás, amely URL-en keresztül érhető el, webalapú alkalmazás. Az ilyen alkalmazásokban elsősorban az alkalmazás elülső végét teszteljük, amelyet a végfelhasználó használ.

minden böngésző eltérően jeleníti meg a weboldalakat, ezért fontos, hogy az oldal különböző böngészőkben ugyanúgy nézzen ki. Ha egy weboldal torz és nem felügyelt, akkor a nézők kiléphetnek a weboldalról. Tehát egy weboldalnak felhasználói felület tesztelésen kell átesnie a jobb eredmények érdekében.

a böngésző tesztelése az alábbi két típusból áll:

funkcionalitás tesztelés

különböző funkciók tesztelése az alkalmazás során. Ez magában foglalja az összes navigációt, valamint az összes mezőértéket, amely az elülső oldalakon található, az összes pozitív és negatív forgatókönyv felhasználásával.

felhasználói felület tesztelése

a weboldal megjelenési tényezőjének tesztelése. A Look and feel tényező magában foglalja a kijelző típusát, betűtípusát, igazítását, választógombját, jelölőnégyzetét stb.

  • a felhasználói felület tesztelésének területei a használhatóság, a & megjelenés, a navigációs vezérlők/navigációs sávok, az utasítások és a műszaki információk stílusa, képek, táblázatok, hozzáférhetőség stb.
  • a hozzáférhetőség teszteléséhez ellenőrizni kell a W3C-Web content accessibility guidelines (Web Content accessibility guidelines) irányelveket.

kattintson ide a W3C útmutató megtekintéséhez.

megközelítés a felhasználói felület teszteléséhez

a funkcionális tesztesetek közül a tesztesetek egy részét választjuk ki, amely az alkalmazás összes funkcióját lefedi.

a második lépés a teszt esetek módosítása az UI tesztelési követelményeinek megfelelően.

a következő lépés a tesztesetek végrehajtása lesz; összehasonlítjuk az eredményt a várt eredményekkel, és ha van különbség, akkor felvetjük a kérdést. Nem lehetséges minden böngészőben tesztelni. Általában az ügyfél dönti el, hogy melyik böngészőben van a tesztelési követelmény.

mivel tudjuk, hogy minden böngésző másképp jeleníti meg a weboldalakat, ezért nem várhatjuk el, hogy minden böngésző pontosan hasonlóan jelenítse meg a weboldalakat.

például a Windows-firefox legördülő menüje más lesz, mint a mac-firefox. Az ilyen kérdések elfogadhatók, mivel ezek operációs rendszer segédprogramok, és el kell fogadnunk őket.

Alapböngésző: Általában az alkalmazást olyan böngészőre fejlesztették ki, amelyet várhatóan leginkább a végfelhasználók használnak, alapböngészőnek nevezik.

gyakran előforduló felhasználói felület hibák

  • gombok igazítási problémái
  • inkonzisztens hely a címkék vagy a szövegdobozok között
  • törött címkék, azaz az egysoros címkék két sorban jelennek meg
  • a szövegdobozok, információs ikonok, címkék vagy legördülő listák közötti eltérés
  • mezők átfedése
  • hiányos mezők
  • az oldalon lévő adatok helytelenül vannak beállítva; néhány idő felfelé vagy lefelé tolódik
  • bármely böngészőben, miközben kiválaszt valamilyen műveletet, a megfelelő művelet nem történik meg
  • az átméretezés nem a várt módon működik
  • a munkamenet lejárati ideje vagy nagyon rövid, vagy nagyon hosszú néhány böngésző számára
  • böngésző specifikus problémák-néhány mező nem szerkeszthető az egyik böngészőben az adatok bevitele után, hanem egy másik böngészőben szerkeszthető

kulcs UI

a webes alkalmazás legfontosabb felhasználói felületének tesztelési követelményei a következők:

  1. a felhasználói felület különböző összetevőinek elérhetősége
  2. a felhasználói felület összetevőjének különböző állapotai

komponens:

az összetevő egy építőelem, amely számos más összetevő kombinációjával használható alkalmazás létrehozásához. Az összetevők újrafelhasználhatók az alkalmazás során.

példák az összetevőkre: gomb, Szövegmező, automatikus javaslat, jelölőnégyzet, legördülő menü stb.

néhány alapvető összetevő

jelölőnégyzet: egy vagy több opció választható ki a jelölőnégyzet összetevőjéből

checkbox

rádió gombok: Ha csak egy opciót kell kiválasztani, a rádiógombok hasznosak

radio

néhány speciális összetevő

1. Harmonika: több elem függőlegesen egymásra rakható ezzel az összetevővel. Minden elem kibővíthető a benne lévő tartalom megtekintéséhez. Több elem is bővíthető.

accordion

2. Zsemlemorzsa: ez egy nagyon hasznos összetevő, amely segíti a weboldal navigációját. A felhasználó ebből az összetevőből azonosíthatja jelenlegi tartózkodási helyét a webhelyen.

breadcrump

3. Körhinta: A körhinta komponensbe több információs elem is beépíthető. Az alul található útkeresők azt jelzik, hogy több elem van jelen. A nyilak segítenek a körhinta navigálásában. Általában a körhinta navigáció folyamatos hurokként van konfigurálva.

carousel

kattintson ide, ha további hasznos információkat szeretne kapni a felhasználói felület összetevőiről

a felhasználói felület összetevőinek állapota

az összetevők elérhetősége pusztán a projekt követelményeire vonatkozó irányelveken alapul. Ez projektenként változik.

az alapkomponens Különböző UI állapotai a következők:

  1. kitöltetlen állapot
  2. töltött állapot és fókuszban
  3. normál állapot és alapértelmezett állapot
  4. lebeg állapot
  5. letiltott állapot
  6. maszkos állapot

betöltetlen állapot:

előtte az összetevő bármely értékének beírása, azt mondják, hogy egy kitöltetlen állapot. A betöltetlen állapot megjeleníti a helyőrző szöveget, ha van ilyen. Az alábbiakban egy szövegmező összetevő található.

kitöltött állapot

kitöltött állapot:

a felhasználó által beírt értékkel rendelkező összetevő kitöltött állapot.

kitöltött állapot

Fókuszállapotban:

a felhasználó újra felkeresi a már kitöltött összetevőt. Az összetevőnek meg kell jelenítenie a kurzort, jelezve, hogy a fókuszálásban lévő adott összetevő

fókuszállapotban

normál állapot:

a felhasználó által a képernyőn már megadott értékkel rendelkező összetevő megjelenítése a normál állapot.

normál állapot

alapértelmezett állapot:

olyan összetevő, amely automatikusan kitöltött értéket jelenít meg a kiszolgálóról/háttérprogramról. Ezt az értéket a felhasználó is szerkesztheti bizonyos esetekben.

lebeg állapot:

egérmutató az összetevő fölé kiemeli a lebeg műveletet jelző összetevőt.

lebegés előtt:

részletek megtekintése_nem lebeg

lebeg:

view details_hover

Disabled állapot:

az összetevő le van tiltva, és a felhasználó nem tudja szerkeszteni a mezőket.

engedélyezett állapot

 engedélyezett állapot

letiltott állapot

 letiltott állapot

maszkos állapot:

az érzékeny adatok, például a jelszó elrejthetők ezzel az összetevővel.

 álarcos állapot

a webes alkalmazás legfontosabb használhatósági tesztelési követelményei a következők:

  1. betűtípus család
  2. betűméret
  3. Szín
  4. betűköz
  5. Sormagasság
  6. háttérellenőrzés
  7. kitöltés/átlátszatlanság
  8. az összetevők mérése, mint a hosszúság, szélesség és szélesség
  9. hely/távolság a komponensek között egy képernyőn

a fenti használhatósági funkciók tesztelhetők a kódban vagy az alkalmazás inspect elemével. Egy másik egyszerűbb módszer a kiegészítők használata. A kiegészítők a böngészőtől függően változhatnak, amelyben az alkalmazást tesztelni kell.

különböző böngészőbővítmények részletei

név használati adatok Kompatibilitás
Page Ruler ez a kiegészítő segíti az alkatrészek szélességének és magasságának tesztelését. Az összetevők felső, bal, jobb és alsó pozíciója is kitalálható Chrome és Firefox
Web Inspector Web inspector megjeleníti a betűtípust, a Szöveg színe és a háttér színe a csak kattintson a web inspector ikonra, és lebeg a szakasz felett, amely a tesztelendő Chrome és Safari
tűz Bug Firebug egy nyílt forráskódú add on ellenőrzésére a weboldal CSS, HTML, DOM, XHR és JavaScript. Ez az inspect element alternatívája, kompatibilis a Firefoxszal. Firefox
ColorZilla ez egy színválasztó kiegészítő, amelyet a weboldal színének elemzésére használnak Chrome és Firefox
mérje meg az elemek szélességének, magasságának és igazításának tesztelésére szolgál pixelben. Chrome, Safari és Firefox

a kiegészítők előnyei:

  • időt takarít meg
  • könnyen használható
  • költséghatékony

a kiegészítők korlátozása:

  • parallaxis hiba a measuring használata közben
  • alkalmazások között kompatibilis
  • több böngészővel kompatibilis

kiegészítő hivatkozások:

  • Web Inspector: Apple Dev Tools
  • Firebug: Firebug Wiki
  • mérje meg
  • Colorzilla

GUI tesztelő eszközök

számos eszköz áll rendelkezésre a technológiai világban, amely segít a tesztelőknek a felhasználói felület tesztelésében.

  • Selenium
  • HP egységes funkcionális tesztelés
  • uborka
  • kódolt felhasználói felület
  • Sahi

a GUI eszközök részletes listája elérhető a softwaretestinghelp.com magát! Kérjük, kattintson ide.

GUI teszt esetek mintája

1) Ellenőrizze a körhinta nyilak és az útkeresők működését
2) Ellenőrizze, hogy a jelszó mező csak maszkos állapotban fogad-e el értékeket
3) Ellenőrizze, hogy a ‘Mentés’ gomb inaktív marad-e, amíg az összes szükséges mezőt be nem írja
4) Ellenőrizze, hogy a felhasználó navigálhat-e az oldal tetejére a ‘Top’ sáv
5) Ellenőrizze, hogy a megfelelő üzenet akkor jelenik meg, ha az alkalmazott szűrők nem kapnak eredményt
6) ellenőrizze a navigációt a fejlécekben és a láblécekben elérhető linkekből
7) ellenőrizze, hogy a rádiógombok igazítása pontos
8) ellenőrizze, hogy egyszerre több lehetőség is kiválasztható-e a jelölőnégyzetekben
9) ellenőrizze, hogy az egyes szakaszok címe vastag betűkkel van-e
10) ellenőrizze a hiperhivatkozások színváltozását a kattintással

következtetés

a weboldal sok vállalkozás lelke. Nagyon fontos, hogy megbizonyosodjon arról, hogy jól néz ki, és hasonlóan működik a különböző böngészők & platformokon. Így UI tesztelés nagyon fontos, és ez biztosítja a nagy ügyfélkör és hozzáadott üzleti érték.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.