gui testing tutorial
Una guia completa de proves GUI: tutorial de proves de la interfície d'usuari
Què és la prova GUI?
La prova GUI és un procés de prova de la interfície gràfica d’usuari de l’aplicació per garantir una funcionalitat adequada segons les especificacions. Es tracta de comprovar els components de l'aplicació com botons, icones, caselles de selecció, color, menú, finestres, etc.
com es crea una llista a Java
La dinàmica visual d’una aplicació web té un paper fonamental en l’acceptació d’una aplicació amb l’usuari.
En conseqüència, aquesta acceptació suposa un comportament de llarga durada dels clients amb l’aplicació del client. En aquesta era de la digitalització, la interfície d’usuari canvia ràpidament i és una fortalesa clau per atreure la nova multitud de possibles clients.
Què aprendreu:
- Prova de la interfície d'usuari
- Enfocament de les proves d’interfície d’usuari
- Defectes d’interfície d’usuari freqüents
- Requisits clau de la prova d’usabilitat i d’interfície d’usuari
- Alguns components bàsics
- Alguns components avançats
- Estats dels components de la IU
- Eines de prova GUI
- Exemples de casos de prova de la GUI
- Conclusió
- Lectura recomanada
Prova de la interfície d'usuari
Per garantir que l'estètica visual de l'aplicació web sigui ben acceptada, les proves d'interfície d'usuari i d'usabilitat es converteixen en un aspecte clau de la pràctica general de control de qualitat. Qualsevol aplicació a la qual es pugui accedir mitjançant un URL és una aplicació basada en web. En aquestes aplicacions, principalment provem la part frontal de l'aplicació que l'usuari final utilitzarà.
Cada navegador mostra les pàgines web de manera diferent, de manera que és important que la pàgina tingui el mateix aspecte en diferents navegadors. Si es mostra una pàgina web distorsionada i no gestionada, els espectadors sortiran de la pàgina web. Per tant, un lloc web s’ha de sotmetre a proves d’interfície d’usuari per obtenir millors resultats.
Les proves del navegador inclouen dos tipus següents:
Proves de funcionalitat
Proves de diferents funcions al llarg de l'aplicació. Implica la validació de totes les navegacions i de tots els valors de camp presents a les pàgines finals utilitzant tots els escenaris positius i negatius.
Proves d’interfície d’usuari
Comprovació de l’aspecte de la pàgina web. El factor d'aspecte inclou el tipus de pantalla, tipus de lletra, alineació, botó d'opció, casella de selecció, etc.
- Les àrees cobertes en les proves de la interfície d’usuari són Usabilitat, Aspecte, controls de navegació / barres de navegació, instruccions i estil d’informació tècnica, imatges, taules, accessibilitat, etc.
- Per fer proves d’accessibilitat, hem de comprovar les directrius d’accessibilitat al contingut del W3C-Web.
Feu clic a aquí per obtenir la directriu del W3C.
Enfocament de les proves d’interfície d’usuari
Seleccionem un subconjunt de casos de prova d'entre casos de proves funcionals que cobreix totes les funcionalitats de l'aplicació.
El segon pas consisteix a modificar aquests casos de prova segons els requisits de les proves de la IU.
El següent pas serà executar aquests casos de prova; comparant el resultat amb els resultats esperats, i si hi ha alguna diferència, plantegeu el problema pel mateix. No és factible fer proves en tots els navegadors. Normalment, el client decideix en quin navegador es requereix la prova.
Com sabem que cada navegador mostra la pàgina web de manera diferent, no podem esperar que tots els navegadors mostrin la pàgina web exactament similar.
Per exemple, el menú desplegable de Windows-Firefox serà diferent del de Mac-Firefox. Aquests problemes són acceptables, ja que són utilitats del sistema operatiu i els hem d’acceptar com a tals.
Navegador base: Normalment, l’aplicació es desenvolupa dirigida a un navegador que s’espera que sigui utilitzat principalment per usuaris finals, s’anomena navegador base.
Defectes d’interfície d’usuari freqüents
- Problemes d'alineació de botons
- Espai inconsistent entre etiquetes o quadres de text
- Etiquetes trencades, és a dir, una sola línia que es mostra en dues línies
- Desalineació entre quadres de text, icones d'informació, etiquetes o desplegables
- Superposició de camps
- Camps incomplets
- Les dades de la pàgina estan desalineades; alguns desplaçats en el temps cap amunt o cap avall
- En qualsevol navegador, mentre seleccioneu alguna acció, no es produeix l'acció corresponent
- El canvi de mida no funciona com s’esperava
- El temps de caducitat de la sessió és molt curt o molt llarg per a alguns navegadors
- Problemes específics del navegador: pocs camps no es poden editar després d’introduir dades en un navegador, sinó que s’editen en un altre navegador
Requisits clau de la prova d’usabilitat i d’interfície d’usuari
Els requisits clau de les proves d’interfície d’usuari de l’aplicació web són:
- Disponibilitat de diversos components en una interfície d’usuari
- Diversos estats del component de la IU
Component:
Un component és un bloc constructiu, que es pot utilitzar amb la combinació de diversos components per formar una aplicació. Els components es poden reutilitzar a tota l'aplicació.
Els exemples d’un component inclouen el botó, el camp de text, el suggeriment automàtic, la casella de selecció, el menú desplegable, etc.
Alguns components bàsics
Casella de selecció: Es poden seleccionar una o més opcions del component de la casella de selecció
Botons de ràdio: Quan només cal seleccionar una opció, són útils els botons d'opció
Alguns components avançats
1. Acordió: Es poden apilar diversos elements verticalment mitjançant aquest component. Es pot ampliar cada element per veure'n el contingut. També es pot ampliar més d'un element.
2. Pa ratllat: Aquest és un component molt útil que ajuda a la navegació del lloc web. L’usuari pot identificar la seva ubicació actual dins del lloc web a partir d’aquest component.
3. Carrusel: Es poden incorporar diversos conjunts d’elements d’informació a un component carrusel. Els cercadors de camins a la part inferior indiquen que hi ha més elements. Les fletxes ajuden a la navegació pel carrusel. Normalment, la navegació en carrusel es configura com un bucle continu.
Feu clic a aquí per obtenir informació més útil sobre components de la IU
Estats dels components de la IU
La disponibilitat dels components es basa exclusivament en les directrius de requisits del projecte. Variarà d’un projecte a un altre.
Els diversos estats de la IU d'un component bàsic són:
- Estat sense emplenar
- Estat ple i centrat
- Estat normal i estat per defecte
- Estat sobrevolador
- Estat desactivat
- Estat emmascarat
Estat sense emplenar:
Abans d’escriure qualsevol valor d’un component, es diu que és un estat no omplert. L'estat No emplenat mostra el text del marcador de posició si n'hi ha. El següent és un component de camp de text.
Estat emplenat:
Un component amb un valor introduït per l'usuari es troba complet.
Estat de focus:
L'usuari torna a visitar un component que ja està omplert. El component hauria de mostrar el cursor, cosa que indica que el component específic està enfocat
Estat normal:
La visualització d'un component amb el valor que ja ha introduït l'usuari a la pantalla es descriu com a estat normal.
Estat per defecte:
Un component que mostra el valor d’emplenament automàtic del servidor / dorsal. L'usuari també pot editar aquest valor en alguns casos.
Estat del cursor:
El cursor del ratolí sobre el component ressalta el component que indica l'acció del cursor.
Abans de passar el vol:
Sobrevol:
quins són els millors llocs web d'anime
Estat desactivat:
El component està desactivat i l'usuari no pot editar els camps.
Estat habilitat
Estat desactivat
Estat emmascarat:
Amb aquest component es poden amagar dades sensibles com la contrasenya.
Els requisits clau de les proves d’USABILITAT de l’aplicació web són:
- Família de tipus de lletra
- Mida de la font
- color
- Espai entre lletres
- Alçada de la línia
- Validació de fons
- Omplir / Opacitat
- Mesures dels components com ara longitud, amplada i amplada
- Ubicació / espaiat entre els components d’una pantalla
Les funcions d'usabilitat anteriors es poden provar al codi o mitjançant l'element inspect a l'aplicació. Una altra manera més senzilla és fer servir complements. Els complements poden variar en funció del navegador en què s'ha de provar l'aplicació.
Detalls de diversos complements del navegador
Nom | Detalls d’ús | Compatibilitat |
---|---|---|
Regle de pàgina | Aquest complement ajuda a provar l'amplada i l'alçada dels components. També es poden esbrinar les posicions superior, esquerra, dreta i inferior dels components | Chrome i Firefox |
Web Inspector | L'inspector web mostra el tipus de lletra, el color del text i el color de fons del fitxer simplement fent clic a la icona de l'inspector web i passant el cursor per sobre de la secció que es vol provar | Chrome i Safari |
Fire Bug | Firebug és un complement de codi obert per supervisar CSS, HTML, DOM, XHR i JavaScript de la pàgina web. Aquesta és una alternativa d'element inspect, compatible amb Firefox. | Firefox |
ColorZilla | És un complement de selecció de colors que s’utilitza per analitzar el color de la pàgina web | Chrome i Firefox |
Mesura-ho | S'utilitza per provar l'amplada, l'alçada i l'alineació dels elements en píxels. | Chrome, Safari i Firefox |
Avantatges dels complements:
- Estalvia temps
- Fàcil d'usar
- És rendible
Limitació de complements:
- Error de paral·lax en utilitzar la mesura
- Compatible entre totes les aplicacions
- Compatible amb diversos navegadors
Referències per als complements:
- Web Inspector: Eines de desenvolupament d'Apple
- Firebug: Wiki de Firebug
- Mesureu-lo
- Colorzilla
Eines de prova GUI
Hi ha diverses eines disponibles al món tecnològic que ajudarien els verificadors a provar la IU.
- Seleni
- Proves funcionals unificades d'HP
- Cogombre
- IU codificada
- En realitat
Hi ha una llista detallada d’eines GUI al mateix softwaretestinghelp.com. Feu clic a aquí .
Exemples de casos de prova de la GUI
1) Verifiqueu el funcionament de les fletxes del carrusel i els cercadors de camins
2) Verifiqueu que el camp de la contrasenya només accepti valors en estat emmascarat
3) Verifiqueu que el botó 'Desa' romangui inactiu fins que s'introdueixin tots els camps obligatoris
4) Verifiqueu que l'usuari pugui navegar a la part superior de la pàgina mitjançant la barra 'Superior'
5) Verifiqueu que es mostri el missatge adequat quan els filtres aplicats no recuperin cap resultat
6) Verifiqueu la navegació des dels enllaços disponibles a Capçaleres i peus de pàgina
7) Verifiqueu que l’alineació dels botons d’opció sigui exacta
8) Verifiqueu que es puguin seleccionar diverses opcions de les caselles de selecció alhora
9) Verifiqueu que el títol de cada secció estigui en lletra negreta
10) Verifiqueu el canvi de color dels hiperenllaços en fer clic
Conclusió
Un lloc web és l’ànima de moltes empreses. És molt necessari assegurar-se que tingui un bon aspecte i funcioni de manera similar en diferents navegadors i plataformes. Per tant, les proves d’interfície d’usuari són molt importants i asseguraran una gran base de clients i un valor empresarial més gran.
Lectura recomanada
- Les millors eines de prova de programari 2021 [Eines d'automatització de proves de control de qualitat]
- Proves alfa i proves beta (guia completa)
- Prova de descàrrega de llibres electrònics
- Proves funcionals contra proves no funcionals
- Guia completa de proves de verificació de compilació (proves BVT)
- Què és la prova d'interfície? Conegueu els seus tipus, estratègia i eines
- Guia d’externalització de control de qualitat: proves de programari d’externalització d’empreses
- Tipus de proves de programari: diferents tipus de proves amb detalls