Esercitazione sul test della GUI: una guida completa al test dell'interfaccia utente (UI)

gui testing tutorial

Una guida completa al test della GUI: tutorial sul test dell'interfaccia utente

Cos'è il test GUI?

Il test della GUI è un processo di test dell'interfaccia utente grafica dell'applicazione per garantire il corretto funzionamento secondo le specifiche. Implica il controllo dei componenti dell'applicazione come pulsanti, icone, caselle di controllo, colore, menu, finestre ecc.

miglior software gratuito per ottimizzare le prestazioni del PC

Le dinamiche visive di un'applicazione web giocano un ruolo fondamentale nell'accettazione di un'applicazione con l'utente.

Di conseguenza, questa accettazione si traduce nel portare una schiavitù a lungo termine dei clienti con l'applicazione del cliente. In quest'era di digitalizzazione, l'interfaccia utente sta cambiando rapidamente e rappresenta una fortezza chiave nell'attrarre la nuova folla di possibili clienti.

Cosa imparerai:

• Test dell'interfaccia utente
• Approccio per il test dell'interfaccia utente
• Difetti dell'interfaccia utente che si verificano comunemente
• Requisiti chiave dell'interfaccia utente e del test di usabilità
• Alcuni componenti di base
• Alcuni componenti avanzati
• Stati dei componenti dell'interfaccia utente
• Strumenti di test della GUI
• Esempi di casi di test della GUI
• Conclusione
• Lettura consigliata

Test dell'interfaccia utente

Per garantire che l'estetica visiva dell'applicazione web sia ben accettata, i test dell'interfaccia utente e dell'usabilità diventano un aspetto chiave della pratica generale del controllo di qualità. Qualsiasi applicazione a cui è possibile accedere tramite un URL è un'applicazione basata sul Web. In tali applicazioni, testiamo principalmente il front-end dell'applicazione che deve essere utilizzata dall'utente finale.

Ogni browser visualizza le pagine web in modo diverso, quindi è importante che la pagina abbia lo stesso aspetto su browser diversi. Se una pagina web viene visualizzata distorta e non gestita, porterà gli spettatori a uscire dalla pagina web. Quindi un sito web dovrebbe essere sottoposto a test dell'interfaccia utente per ottenere risultati migliori.

Il test del browser comprende i seguenti due tipi:

Test di funzionalità

Test di diverse funzioni in tutta l'applicazione. Implica la convalida di tutte le navigazioni e di tutti i valori dei campi presenti nelle pagine front-end utilizzando tutti gli scenari positivi e negativi.

Test dell'interfaccia utente

Testare l'aspetto grafico della pagina web. Il fattore aspetto grafico include tipo di visualizzazione, carattere, allineamento, pulsante di opzione, casella di controllo ecc.

• Le aree trattate nei test dell'interfaccia utente sono Usabilità, Aspetto, controlli di navigazione / barre di navigazione, istruzioni e stile delle informazioni tecniche, immagini, tabelle, accessibilità ecc.
• Per testare l'accessibilità, dobbiamo verificare con le linee guida per l'accessibilità dei contenuti W3C-Web.

Clic Qui per ottenere le linee guida del W3C.

Approccio per il test dell'interfaccia utente

Selezioniamo un sottoinsieme di casi di test dai casi di test funzionali che copre tutte le funzionalità dell'applicazione.

Il secondo passaggio consiste nel modificare questi casi di test in base ai requisiti di test dell'interfaccia utente.

Il prossimo passo sarà l'esecuzione di questi casi di test; confrontando il risultato con i risultati attesi e, se c'è qualche differenza, sollevare il problema per lo stesso. Non è possibile eseguire il test in tutti i browser. Normalmente il client decide in quale browser è necessario testare.

Poiché sappiamo che ogni browser visualizza la pagina Web in modo diverso, quindi non possiamo aspettarci che tutti i browser visualizzino una pagina Web esattamente simile.

Per esempio, il menu a discesa in windows-firefox sarà diverso da quello in mac-firefox. Tali problemi sono accettabili, poiché si tratta di utilità del sistema operativo e dobbiamo accettarli come tali.

Browser di base: Normalmente l'applicazione è sviluppata per un browser che dovrebbe essere utilizzato principalmente dagli utenti finali, è definito come browser di base.

Difetti dell'interfaccia utente che si verificano comunemente

• Problemi di allineamento dei pulsanti
• Spazio incoerente tra etichette o caselle di testo
• Etichette spezzate, ovvero etichetta a riga singola visualizzata su due righe
• Disallineamento tra caselle di testo, icone informative, etichette o menu a discesa
• Sovrapposizione di campi
• Campi incompleti
• I dati sulla pagina non sono allineati; un po 'di tempo spostato verso l'alto o verso il basso
• In qualsiasi browser, mentre si seleziona un'azione, l'azione corrispondente non viene eseguita
• Il ridimensionamento non funziona come previsto
• Tempo di scadenza della sessione molto breve o molto lungo per alcuni browser
• Problemi specifici del browser: pochi campi non sono modificabili dopo aver immesso i dati in un browser ma modificabili in un altro browser

Requisiti chiave dell'interfaccia utente e del test di usabilità

I requisiti chiave per il test dell'interfaccia utente dell'applicazione Web sono:

1. Disponibilità di vari componenti in un'interfaccia utente
2. Vari stati del componente UI

Componente:

Un componente è un blocco di costruzione, che può essere utilizzato con la combinazione di molti altri componenti per formare un'applicazione. I componenti possono essere riutilizzati nell'applicazione.

Esempi di un componente includono Button, Text Field, Autosuggest, Checkbox, Dropdown ecc.

Alcuni componenti di base

Casella di controllo: Una o più opzioni possono essere selezionate dal componente casella di controllo

Tasti della radio: Quando è necessario selezionare una sola opzione, i pulsanti di opzione sono utili

Alcuni componenti avanzati

1. Fisarmonica: Più elementi possono essere impilati verticalmente utilizzando questo componente. Ogni elemento può essere espanso per visualizzarne il contenuto. È inoltre possibile espandere più di un elemento.

2. Pangrattato: Questo è un componente molto utile che aiuta nella navigazione del sito web. L'utente può identificare la sua posizione corrente all'interno del sito Web da questo componente.

3. Carosello: È possibile incorporare più set di elementi informativi in ​​un componente carosello. I way finder in basso indicano che sono presenti più elementi. Le frecce aiutano nella navigazione all'interno del carosello. Di solito, la navigazione a carosello è configurata come un ciclo continuo.

Clic Qui per ottenere informazioni più utili sui componenti dell'interfaccia utente

Stati dei componenti dell'interfaccia utente

La disponibilità dei componenti si basa esclusivamente sulle linee guida dei requisiti del progetto. Varia da un progetto all'altro.

I vari stati dell'interfaccia utente per un componente di base sono:

1. Stato non riempito
2. Stato pieno e in primo piano
3. Stato normale e stato predefinito
4. Stato al passaggio del mouse
5. Stato disabilitato
6. Stato mascherato

Stato non riempito:

Prima di digitare qualsiasi valore in un componente, si dice che sia uno stato non riempito. Lo stato Non riempito visualizza il testo segnaposto, se presente. Di seguito è riportato un componente del campo di testo.

Stato pieno:

Un componente con un valore digitato dall'utente viene riempito.

Su stato attivo:

L'utente rivisita un componente che è già stato riempito. Il componente dovrebbe visualizzare il cursore, indicando che il componente specifico è focalizzato

Stato normale:

Viene descritto lo stato normale della visualizzazione di un componente con il valore già inserito dall'utente nella schermata.

Stato predefinito:

Un componente che visualizza il valore compilato automaticamente dal server / backend. Questo valore può anche essere modificato dall'utente in alcuni scenari.

Stato al passaggio del mouse:

Il passaggio del mouse sul componente evidenzia il componente che indica l'azione al passaggio del mouse.

Prima del passaggio del mouse:

Al passaggio del mouse:

dfs e bfs c ++

Stato disabilitato:

Il componente è disabilitato e l'utente non può modificare i campi.

Stato abilitato

Stato disabilitato

Stato mascherato:

I dati sensibili come la password possono essere nascosti utilizzando questo componente.

I requisiti chiave del test di USABILITÀ dell'applicazione web sono:

1. Famiglia di font
2. Dimensione del font
3. Colore
4. Spaziatura del carattere
5. Altezza della linea
6. Convalida in background
7. Riempimento / Opacità
8. Misurazioni dei componenti come lunghezza, larghezza e larghezza
9. Posizione / spaziatura tra i componenti in una schermata

Le funzionalità di usabilità di cui sopra possono essere testate nel codice o utilizzando l'elemento inspect nell'applicazione. Un altro modo più semplice è utilizzare i componenti aggiuntivi. I componenti aggiuntivi possono variare in base al browser in cui l'applicazione deve essere testata.

Dettagli di vari componenti aggiuntivi del browser

Vantaggi degli add-on:

• Risparmia tempo
• Facile da usare
• È conveniente

Limitazione degli add-on:

• Errore di parallasse durante l'utilizzo della misurazione
• Compatibile con tutte le applicazioni
• Compatibile con più browser

Riferimenti per i componenti aggiuntivi:

• Web Inspector: Strumenti di sviluppo Apple
• Firebug: Wiki di Firebug
• Misuralo
• Colorzilla

Strumenti di test della GUI

Diversi strumenti sono disponibili nel mondo della tecnologia che aiuterebbero i tester nei test dell'interfaccia utente.

• Selenio
• Test funzionale unificato HP
• Cetriolo
• Interfaccia utente codificata
• In realtà

Un elenco dettagliato degli strumenti GUI è disponibile nello stesso softwaretestinghelp.com! Fare clic su Qui .

Esempi di casi di test della GUI

1) Verifica il funzionamento delle frecce del carosello e dei way finder
2) Verificare che il campo della password accetti valori solo in uno stato mascherato
3) Verificare che il pulsante 'Salva' rimanga inattivo finché non vengono inseriti tutti i campi obbligatori
4) Verifica che l'utente sia autorizzato a navigare nella parte superiore della pagina utilizzando la barra 'Top'
5) Verificare che venga visualizzato il messaggio corretto quando i filtri applicati non recuperano alcun risultato
6) Verificare la navigazione dai collegamenti disponibili in Intestazioni e piè di pagina
7) Verificare che l'allineamento dei pulsanti di opzione sia accurato
8) Verifica che sia possibile selezionare più opzioni contemporaneamente nelle caselle di controllo
9) Verifica che il titolo di ogni sezione sia in grassetto
10) Verificare il cambio di colore dei collegamenti ipertestuali facendo clic

Conclusione

Un sito web è l'anima di molte aziende. È molto necessario assicurarsi che abbia un aspetto corretto e funzioni in modo simile su browser e piattaforme diversi. Pertanto il test dell'interfaccia utente è molto importante e garantirà un'ampia base di clienti e l'aggiunta di valore aziendale.

Lettura consigliata

• Migliori strumenti di test del software 2021 (Strumenti di automazione del test QA)
• Alpha test e beta test (una guida completa)
• Download dell'eBook Testing Primer
• Test funzionale vs test non funzionale
• Guida completa al test di verifica della costruzione (test BVT)
• Che cos'è il test dell'interfaccia? Conosci i suoi tipi, strategia e strumenti
• QA Outsourcing Guide: Software Testing Outsourcing Companies
• Tipi di test del software: diversi tipi di test con dettagli