Test dell'interfaccia utente: casi di test ed esempi
Tommaso Hamilton
⚡ Riepilogo intelligente
Il test dell'interfaccia utente (GUI) convalida ogni elemento visibile di un'applicazione (pulsanti, menu, icone, caselle di testo e layout) in modo che le schermate si comportino e appaiano esattamente come specificato su diversi browser, dispositivi e risoluzioni dello schermo, prima ancora che vengano utilizzate da utenti reali.
Per comprendere il test delle interfacce grafiche (GUI), dobbiamo prima capire cos'è una GUI.
Cos'è la GUI?
Esistono due tipi di interfacce per un'applicazione informatica. L'interfaccia della riga di comando è il luogo in cui digiti il testo e il computer risponde a quel comando. GUI sta per Graphical User Interface in cui interagisci con il computer utilizzando immagini anziché testo.
Di seguito sono riportati gli elementi GUI che possono essere utilizzati per l'interazione tra l'utente e l'applicazione:
Il test della GUI è una convalida degli elementi di cui sopra.
Cos'è il test della GUI?
Test della GUI è un tipo di test del software che controlla l'interfaccia utente grafica del software. Lo scopo del test dell'interfaccia utente grafica (GUI) è garantire che le funzionalità dell'applicazione software funzionino secondo le specifiche controllando schermate e controlli come menu, pulsanti, icone, ecc.
L'interfaccia grafica utente (GUI) è ciò che l'utente vede. Visitando guru99.com, la homepage che appare è l'interfaccia grafica del sito. Il codice sorgente rimane nascosto; è visibile solo l'interfaccia. Il test dell'interfaccia grafica si concentra quindi sulla struttura del design e sulla corretta visualizzazione delle immagini.
Nella schermata qui sopra, il test dell'interfaccia grafica inizia verificando che ogni immagine sia completamente visibile nei diversi browser. I controlli rimanenti sulla stessa pagina sono:
- I link sono disponibili e ogni pulsante funziona quando viene cliccato.
- Ridimensionando lo schermo, immagini e testo non si riducono, non si ritagliano né si sovrappongono mai.
- Nessun elemento del layout scompare quando la finestra del browser viene ridotta.
Suggerimento: Prima di segnalare un difetto, esegui la stessa pagina alle risoluzioni 1920×1080, 1366×768 e 375×812. Molte segnalazioni di "layout non corretto" sono dovute semplicemente a breakpoint non testati.
Necessità di test della GUI
Ora che il concetto base del test dell'interfaccia grafica è chiaro, le prime domande che vi verranno in mente saranno:
- Perché eseguire i test della GUI?
- È davvero necessario?
- Testare la funzionalità e la logica di un'applicazione non è sufficiente di per sé, e perché dedicare ulteriore tempo all'interfaccia?
Per trovare la risposta, pensa come un utente e non come un tester. Un utente non ha alcuna conoscenza di come sia stata realizzata l'applicazione. È l'interfaccia che decide se l'utente continuerà a utilizzare l'applicazione o la abbandonerà.
Un utente medio osserva innanzitutto il design e l'aspetto dell'applicazione, e la facilità d'uso dell'interfaccia. Se un utente non si sente a suo agio con l'interfaccia o trova l'applicazione complessa da comprendere, non tornerà più. L'interfaccia grafica è quindi un aspetto fondamentale e occorre effettuare test approfonditi per assicurarsi che sia priva di bug.
Tipi di test dell'interfaccia utente
Capire perché l'interfaccia è importante è solo metà del quadro. Il test dell'interfaccia utente (GUI) si articola in cinque tipologie, ognuna delle quali risponde a una domanda diversa sulla stessa schermata.
- Test funzionali dell'interfaccia utente: Conferma che ogni controllo fa ciò che promette. Strettamente correlato a test funzionali, chiede se un pulsante invia, un menu a tendina filtra e un campo accetta input validi.
- Test di usabilità: Misura la facilità con cui una persona reale porta a termine un compito. Test di usabilità analizza la profondità della navigazione, la leggibilità e se i messaggi di errore siano effettivamente utili.
- Test di compatibilità: Ripete le stesse schermate su diversi browser, sistemi operativi e dimensioni dello schermo. Test su browser incrociati individua gli errori di rendering che si verificano solo in un motore grafico.
- Test di accessibilità: Verifica la conformità della navigazione da tastiera, delle etichette per i lettori di schermo e del contrasto cromatico alle linee guida WCAG. Test di accessibilità In molti mercati è ormai un requisito di conformità, non un'opzione facoltativa.
- Test visivi e prestazionali: Confronta gli screenshot renderizzati con una linea di base e misura la velocità con cui l'interfaccia disegna e risponde, sovrapposizioneping con test delle prestazioni.
La maggior parte dei team utilizza tutti e cinque i criteri, ma attribuisce loro un peso diverso: un sito web pubblico si concentra su compatibilità e accessibilità, mentre una dashboard interna sui controlli funzionali.
Cosa si verifica durante il test dell'interfaccia utente grafica (GUI)?
La seguente checklist garantirà test GUI dettagliati nei test del software.
- Controlla tutti gli elementi della GUI per dimensioni, posizione, larghezza, lunghezza e accettazione di caratteri o numeri. Ad esempio, devi essere in grado di fornire input nei campi di input.
- Verifica di poter eseguire la funzionalità prevista dell'applicazione utilizzando la GUI
- Controllare che i messaggi di errore siano visualizzati correttamente
- Verificare la chiara demarcazione delle diverse sezioni sullo schermo
- Verificare che il carattere utilizzato in un'applicazione sia leggibile
- Verificare che l'allineamento del testo sia corretto
- Controlla che il colore del carattere e dei messaggi di avviso sia esteticamente gradevole
- Verificare che le immagini abbiano una buona nitidezza
- Controlla che le immagini siano allineate correttamente
- Controlla il posizionamento degli elementi della GUI per diverse risoluzioni dello schermo.
Tecniche di test della GUI
Una volta creata la lista di controllo, la decisione successiva riguarda come metterla in pratica. Tecniche di test della GUI possono essere classificati in tre parti:
Test basati su manuale
Con questo approccio, le schermate grafiche vengono controllate manualmente dai tester in conformità con i requisiti indicati nel documento dei requisiti aziendali.
Registra e riproduci
Il test dell'interfaccia utente (GUI) può essere eseguito utilizzando strumenti di automazione. Questo processo si articola in due fasi. Durante la registrazione, i passaggi del test vengono acquisiti dallo strumento di automazione. Durante la riproduzione, i passaggi del test registrati vengono eseguiti sull'applicazione in fase di test. Esempi di tali strumenti: QTP.
Test basati su modelli
Un modello è una descrizione grafica del comportamento di un sistema. Ci aiuta a comprendere e prevedere il comportamento del sistema. I modelli contribuiscono alla generazione di casi di test efficienti utilizzando i requisiti di sistema. Il diagramma seguente mostra come un modello influenza la generazione dei test:
Per questo tipo di test basato su modello, è necessario tenere in considerazione i seguenti aspetti:
- Costruisci il modello
- Determinare gli input per il modello
- Calcolare l'output atteso per il modello
- Esegui i test
- Confrontare il risultato effettivo con quello atteso
- Una decisione su ulteriori azioni sul modello
Alcune delle tecniche di modellazione da cui possono essere derivati casi di test:
- Grafici: illustra lo stato di un sistema e controlla lo stato dopo alcuni input.
- Tabelle decisionali: tabelle utilizzate per determinare i risultati per ciascun input applicato
Il test basato su modello è una tecnica in evoluzione per generare casi di test dai requisiti. Il suo vantaggio principale, rispetto ai due metodi precedenti, è che può determinare stati indesiderati che la tua GUI può raggiungere.
Test manuali vs. test automatizzati dell'interfaccia utente
Due di queste tre tecniche sono manuali e una è automatizzata, il che solleva la questione pratica di dove ciascuna debba essere collocata. Test manuale Mette una persona davanti allo schermo, in modo da individuare flussi di lavoro goffi, formulazioni imprecise e animazioni che risultano forzate: giudizi che nessuna sceneggiatura può formulare.
Test automatizzato Ripete le stesse interazioni migliaia di volte senza affaticamento, il che lo rende la soluzione ideale per percorsi di regressione stabili e per replicare una suite su diversi browser. Il compromesso è la manutenzione: gli script GUI automatizzati si interrompono ogni volta che cambia un localizzatore o il layout. La maggior parte dei team più esperti adotta quindi un approccio ibrido, automatizzando le attività ripetibili e riservando il personale alle attività esperienziali.
| Fattore | Test manuale dell'interfaccia utente | Test automatizzati dell'interfaccia utente |
|---|---|---|
| migliori per | Nuove schermate, verifiche esplorative, aspetto e sensazione | Suite di regressione stabili, test cross-browser |
| Velocità per ciclo | Lento, limitato dalle ore di test. | Veloce, funziona senza supervisione durante la notte |
| Costo iniziale | Basso | Livello elevato (scripting e configurazione del framework) |
| Manutenzione | Niente di più che aggiornare la lista di controllo. | Significativo quando l'interfaccia cambia |
| Coglie le questioni soggettive | Si | Non |
Esempi di casi di test di test della GUI
Il test della GUI implica fondamentalmente
- Testare la dimensione, posizione, larghezza, altezza degli elementi.
- Test dei messaggi di errore che vengono visualizzati.
- Testare le diverse sezioni dello schermo.
- Testare il carattere se è leggibile o meno.
- Test dello schermo a diverse risoluzioni con l'ausilio dello zoom avanti e indietro, ad esempio 640 x 480, 600×800, ecc.
- Testare l'allineamento dei testi e altri elementi come icone, pulsanti, ecc. se sono nella posizione corretta o meno.
- Testare i colori dei caratteri.
- Testare i colori dei messaggi di errore, messaggi di avviso.
- Testare se l'immagine ha una buona chiarezza o meno.
- Testare l'allineamento delle immagini.
- Prova dell'ortografia.
- L'utente non deve sentirsi frustrato durante l'utilizzo dell'interfaccia del sistema.
- Verifica se l'interfaccia è atracattivo o meno.
- Test delle barre di scorrimento in base alla dimensione della pagina, se presente.
- Test dei campi disabilitati, se presenti.
- Test della dimensione delle immagini.
- Verifica dei titoli se sono correttamente allineati o meno.
- Test del colore del collegamento ipertestuale.
Demo: come eseguire il test della GUI
L'elenco di cui sopra risulta molto più chiaro se applicato a una schermata reale, quindi qui utilizzeremo alcuni casi di test di esempio per la seguente finestra di dialogo.
Di seguito è riportato un esempio di casi di test, che consiste in scenari di test dell'interfaccia utente e dell'usabilità. Se non hai familiarità con la loro scrittura, consulta come scrivere casi di test prima.
Caso di test 01 – Verificare che la casella di testo con l'etichetta “Cartella di origine" sia allineato correttamente.
Caso di test 02 – Verificare che la casella di testo con l'etichetta “CONFEZIONE" sia allineato correttamente.
Caso di test 03 – Verificare che l'etichetta abbia il nome “Scopri la nostra gamma di prodotti" è un pulsante che si trova alla fine del testoBox con il nome "Cartella di origine. "
Caso di test 04 – Verificare che l'etichetta abbia il nome “Scopri la nostra gamma di prodotti" è un pulsante che si trova alla fine del testoBox con il nome "CONFEZIONE. "
Caso di test 05 – Verificare che la casella di testo con l'etichetta “Nome" sia allineato correttamente.
Caso di test 06 – Verificare che l'etichetta “modificatori” è composto da 4 pulsanti di opzione con il nome public, default, private, protected.
Caso di test 07 – Verificare che l'etichetta “modificatori" è composto da 4 pulsanti di opzione allineati correttamente in fila.
Caso di test 08 – Verificare che l'etichetta “Superclasse"sotto l'etichetta"modificatori" è costituito da un menu a discesa che deve essere correttamente allineato.
Caso di test 09 – Verificare che l'etichetta “Superclasse" è costituito da un pulsante con l'etichetta "Scopri la nostra gamma di prodotti” su di esso che deve essere correttamente allineato.
Caso di test 10 – Verificare che, cliccando su un qualsiasi pulsante di opzione, il puntatore del mouse predefinito venga modificato in un puntatore a forma di mano.
Caso di test 11 – Verificare che l'utente non sia in grado di digitare nel menu a tendina “Superclasse. "
Caso di test 12 – Verificare che venga generato un messaggio di errore appropriato qualora venga effettuata una scelta errata.
Caso di test 13 – Verificare che l'errore venga generato in ROSSO ovunque sia necessario.
Caso di test 14 – Verificare che nei messaggi di errore vengano utilizzate etichette appropriate.
Caso di test 15 – Verificare che i singoli pulsanti di opzione siano selezionati di default ogni volta.
Caso di test 16 – Verificare che il pulsante TAB funzioni correttamente durante il saltoping su un altro campo accanto al precedente.
Caso di test 17 – Verificare che tutte le pagine contengano il titolo corretto.
Caso di test 18 – Verificare che il testo della pagina sia correttamente allineato.
Caso di test 19 – Verificare che, dopo l'aggiornamento di qualsiasi campo, venga visualizzato un messaggio di conferma appropriato.
Caso di test 20 – Verificare che sia necessario selezionare un solo pulsante di opzione e che sia possibile selezionare più di una casella di controllo.
Sfide nel test della GUI
Scrivere quei casi è semplice; mantieniping mantenerli in vita per diverse versioni non lo è. Nell'ingegneria del software, il problema più comune durante il processo Test di regressione è che la GUI dell'applicazione cambia frequentemente. È molto difficile testare e identificare se si tratta di un problema o di un miglioramento. Il problema si manifesta quando non si dispone di documenti relativi alle modifiche alla GUI.
⚠️ Attenzione: Gli script che individuano gli elementi tramite coordinate dello schermo o ID generati automaticamente non funzioneranno nella build successiva. Considera la strategia di localizzazione come parte integrante della progettazione, non come un'aggiunta successiva.
Strumenti di test della GUI
Gli strumenti giusti assorbono gran parte di questo rimescolamento. Di seguito è riportato un elenco dei più popolari Strumenti di test della GUI :
- Selenium
- QTP
- Cucumber
- SilkTest
- TestComplete
- Tester della GUI Squish
Clicca qui per imparare Selenium, QTP & Cucumber.
Di seguito sono elencati gli strumenti open source disponibili per eseguire test automatizzati dell'interfaccia utente.
| Prodotto | Concesso in licenza |
|---|---|
| AutoHotkey | GPL |
| Selenium | Apache |
| Siculi | CON |
| Struttura del robot | Apache |
| Acqua - Water | BSD |
| Kit di strumenti per il Dojo | BSD |
Siculi è basato su immagini, utile quando un elemento di controllo non ha un localizzatore affidabile; Selenium rimane l'impostazione predefinita per test di applicazioni web.
