Tutorial de testare GUI: un ghid complet de testare a interfeței cu utilizatorul (UI)

un ghid complet pentru testarea GUI: Tutorial de testare a interfeței cu utilizatorul

ce este testarea GUI?

testarea GUI este un proces de testare a interfeței grafice a aplicației pentru a asigura funcționalitatea corespunzătoare conform specificațiilor. Aceasta implică verificarea componentelor aplicației, cum ar fi butoanele, pictogramele, casetele de selectare, culoarea, meniul, ferestrele etc.

dinamica vizuală a unei aplicații web joacă un rol esențial în acceptarea unei aplicații cu utilizatorul.

în consecință, această acceptare cedează în aducerea unei robii îndelungate a clienților cu aplicația clientului. În această eră a digitalizării, interfața cu utilizatorul se schimbă rapid și deține o fortăreață cheie în atragerea noii mulțimi de posibili clienți.

testarea interfeței cu utilizatorul

pentru a asigura estetica vizuală a aplicației web este bine acceptată, UI și testarea utilizabilității devin un aspect cheie al practicii generale de asigurare a calității. Orice aplicație care poate fi accesată printr-o adresă URL este o aplicație bazată pe Web. În astfel de aplicații, testăm în principal capătul frontal al aplicației care urmează să fie utilizat de utilizatorul final.

fiecare browser afișează paginile web diferit, deci este important ca pagina să arate la fel pe browsere diferite. Dacă o pagină web este afișată distorsionată și neadministrată, aceasta va determina spectatorii să părăsească pagina web. Deci, un site web ar trebui să fie supus testării UI pentru rezultate mai bune.

testarea browserului cuprinde mai jos două tipuri:

testarea funcționalității

testarea diferitelor funcții în întreaga aplicație. Aceasta implică validarea toate navigațiile, precum și toate valorile de câmp care sunt prezente în paginile front-end folosind toate pozitive, precum și scenarii negative.

UI testarea

testarea aspectului paginii web. Factorul de aspect include tipul de afișare, fontul, alinierea, butonul radio, caseta de selectare etc.

• zonele acoperite în testarea UI sunt utilizabilitatea, aspectul & simt, comenzile de navigare/barele de navigare, instrucțiunile și stilul de informații tehnice, imaginile, tabelele, accesibilitatea etc.
• pentru testarea accesibilității, trebuie să verificăm cu W3C-Web Content accessibility guidelines.

Faceți clic aici pentru a obține ghidul W3C.

abordare pentru testarea UI

selectăm un subset de cazuri de testare din cazuri de testare funcționale care acoperă toate funcționalitățile aplicației.

al doilea pas este de a modifica aceste cazuri de testare în conformitate cu cerințele de testare UI.

următorul pas va fi executarea acelor cazuri de testare; comparând rezultatul cu rezultatele așteptate și, dacă există vreo diferență, ridicând problema pentru același lucru. Nu este posibil să testați în toate browserele. În mod normal, clientul decide în ce browser există cerința de a testa.

după cum știm fiecare pagină web de afișare browser diferit, astfel încât nu ne putem aștepta toate browserele pentru a afișa pagina web exact similare.

de exemplu, drop-down în Windows-firefox va fi diferit de mac-firefox. Astfel de probleme sunt acceptabile, deoarece acestea sunt utilitare ale sistemului de operare și trebuie să le acceptăm ca atare.

Browser De Bază: În mod normal, aplicația este dezvoltată vizând un browser care este de așteptat să fie utilizat mai ales de utilizatorii finali, este denumit browserul de bază.

defecte UI care apar frecvent

• probleme de aliniere a butoanelor
• spațiu Inconsistent între etichete sau casete de text
• etichete rupte, adică etichetă cu o singură linie afișată în două linii
• Nealiniere între casetele de text, pictogramele de informații, etichetele sau dropdowns
• suprapunerea câmpurilor
• câmpuri incomplete
• datele de pe pagină sunt nealiniate; în sus sau în jos
• în orice browser, în timp ce selectați o acțiune, acțiunea corespunzătoare nu se întâmplă
• Redimensionarea nu funcționează conform așteptărilor
• timp de expirare a sesiunii fie foarte scurt, fie foarte lung pentru unele browsere
• probleme specifice browserului-puține câmpuri nu sunt editabile după introducerea datelor într – un browser, ci editabile într-un alt browser

UI cheie și cerințele de testare uzabilitate

cerințele cheie de testare UI ale aplicației web sunt:

1. disponibilitatea diferitelor componente într-o UI
2. diferite stări ale componentei UI

componentă:

o componentă este un bloc de construcție, care poate fi utilizat cu combinația mai multor alte componente pentru a forma o aplicație. Componentele pot fi reutilizate în întreaga aplicație.

Exemple de o componentă includ buton, câmp de Text, Autosuggest, Checkbox, Dropdown etc.

unele componente de bază

casetă de selectare: una sau mai multe opțiuni pot fi selectate din componenta casetă de selectare

butoane Radio: Când trebuie selectată o singură opțiune, butoanele radio sunt utile

unele componente avansate

1. Acordeon: mai multe elemente pot fi stivuite vertical folosind această componentă. Fiecare element poate fi extins pentru a vizualiza conținutul din acesta. Mai mult de un element poate fi extins prea.

2. Pesmet: aceasta este o componentă foarte utilă care ajută la navigarea pe site. Utilizatorul își poate identifica locația curentă în cadrul site-ului web din această componentă.

3. Carusel: Mai multe seturi de elemente de informații pot fi încorporate într-o componentă carusel. Way finders în partea de jos indică mai multe elemente sunt prezente. Săgețile ajută la navigarea în carusel. De obicei, navigarea carusel este configurată ca o buclă continuă.

Faceți clic aici pentru a obține mai multe informații utile despre componentele UI

stările componentelor UI

disponibilitatea componentelor se bazează exclusiv pe liniile directoare privind cerințele proiectului. Acesta va varia de la un proiect la altul.

diferitele stări UI pentru o componentă de bază sunt:

1. stare Neumplută
2. stare umplută și pe focalizare
3. stare normală și stare implicită
4. stare Hover
5. stare dezactivată
6. stare mascată

stare Neumplută:

înainte tastând orice valoare într-o componentă, se spune că este o stare neumplută. Starea necompletată afișează textul substituent, dacă există. Mai jos este o componentă câmp de text.

stare umplută:

o componentă cu o valoare introdusă de utilizator este starea umplută.

pe starea de focalizare:

utilizatorul revizuiește o componentă care este deja umplută. Componenta ar trebui să afișeze cursorul, indicând faptul că componenta specifică în focalizarea

stare normală:

afișarea unei componente cu valoarea deja introdusă de utilizator pe ecran este descrisă starea normală.

stare implicită:

o componentă care afișează valoarea auto-populată de pe server/backend. Această valoare poate fi, de asemenea, editată de utilizator în unele scenarii.

Hover Stat:

mouse-ul hover peste componenta evidențiază componenta care indică acțiunea hover.

înainte de Hover:

pe Hover:

stare dezactivată:

componenta este dezactivată și utilizatorul nu poate edita câmpurile.

stare activată

stare dezactivată

stare mascată:

datele sensibile precum parola pot fi ascunse folosind această componentă.

cerințele cheie de testare a utilizabilității aplicației web sunt:

1. familia de fonturi
2. dimensiunea fontului
3. culoare
4. spațierea literelor
5. înălțimea liniei
6. validarea fundalului
7. umplere/opacitate
8. măsurători ale componentelor precum lungimea, lățimea și lățimea
9. locație/spațiere între componentele dintr-un ecran

caracteristicile de utilizare de mai sus pot fi testate în cod sau folosind elementul Inspect din aplicație. O altă modalitate mai ușoară este utilizarea suplimentelor. Suplimentele pot varia în funcție de browserul în care trebuie testată aplicația.

detalii despre diverse suplimente pentru Browser

avantajele suplimentelor:

• economisește timp
• ușor de utilizat
• este rentabil

limitarea suplimentelor:

• eroare de paralaxă în timpul utilizării măsurării
• compatibil între aplicații
• compatibil cu mai multe browsere

referințe pentru suplimente:

• Inspector Web: Apple Dev Tools
• Firebug: Firebug Wiki
• măsurați-l
• Colorzilla

instrumente de testare GUI

mai multe instrumente sunt disponibile în lumea tehnologiei care ar ajuta testerii în testarea UI.

• seleniu
• HP Unified testarea funcțională
• castravete
• codificate UI
• Sahi

o listă detaliată a instrumentelor GUI este disponibil în softwaretestinghelp.com în sine! Vă rugăm să faceți clic aici.

Exemple de cazuri de testare GUI

1) Verificați funcționarea săgeților carusel și a căutătorilor de căi
2) Verificați dacă câmpul de parolă acceptă valori numai într-o stare mascată
3) Verificați dacă butonul ‘Salvare’ rămâne inactiv până când sunt introduse toate câmpurile obligatorii
4) Verificați dacă utilizatorul are voie să navigheze în partea de sus a paginii folosind bara ‘sus’
5) Verificați dacă este afișat când filtrele aplicate nu prelua nici un rezultat
6) Verificați navigarea din link-uri disponibile în anteturi și subsoluri
7) verificați alinierea butoanelor radio este exact
8) Verificați dacă mai multe opțiuni din casetele de selectare pot fi selectate simultan
9) Verificați dacă titlul fiecărei secțiuni este cu litere aldine
10) Verificați schimbarea culorii hyperlinkurilor făcând clic pe

concluzie

un site web este sufletul multor companii. Este foarte necesar să vă asigurați că arată bine și funcționează în mod similar pe diferite browsere & platforme. Astfel, testarea UI este foarte importantă și va asigura o bază mare de clienți și adăugarea în valoare de afaceri.