GUI Testing Tutorial: A Complete User Interface (UI) Testing Guide

A Complete Guide to GUI Testing: User Interface Testing Tutorial

Che cosa è GUI Testing?

GUI Testing è un processo di testare l’interfaccia utente grafica dell’applicazione per garantire la corretta funzionalità secondo le specifiche. Si tratta di controllare i componenti dell’applicazione come pulsanti, icone, caselle di controllo, colore, menu, finestre ecc.

Le dinamiche visive di un’applicazione web svolgono un ruolo fondamentale nell’accettazione di un’applicazione con l’utente.

Di conseguenza, questa accettazione produce nel portare una lunga schiavitù dei clienti con l’applicazione del cliente. In questa era di digitalizzazione, l’interfaccia utente è in rapida evoluzione e detiene una fortezza chiave per attirare la nuova folla di possibili clienti.

Interfaccia utente Testing

Per garantire estetica visiva di applicazione web è ben accettato, UI e test di usabilità diventano un aspetto chiave della pratica QA complessiva. 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 utilizzato dall’utente finale.

Ogni browser visualizza le pagine web in modo diverso, quindi è importante che la pagina dovrebbe avere 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.

Test del browser comprende di seguito due tipi:

Test di funzionalità

Test di diverse funzioni in tutta l’applicazione. Si tratta di convalidare tutte le navigazioni e tutti i valori di campo presenti nelle pagine front-end utilizzando tutti gli scenari positivi e negativi.

Test dell’interfaccia utente

Test del fattore aspetto grafico della pagina web. Look and feel factor include tipo di display, font,allineamento, pulsante di opzione, casella di controllo ecc.

• Le aree coperte nel test dell’interfaccia utente sono Usabilità, Aspetto & feel, controlli di navigazione/barre di navigazione, istruzioni e stile di informazioni tecniche, immagini, tabelle, accessibilità ecc.
• Per i test di accessibilità, dobbiamo verificare con W3C-Web content accessibility guidelines.

Clicca qui per ottenere le linee guida del W3C.

Approccio per il test dell’interfaccia utente

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

Il secondo passo è quello di modificare i casi di test in base ai requisiti di test dell’interfaccia utente.

Il prossimo passo sarà l’esecuzione di quei casi di test; confrontando il risultato con i risultati attesi e, se c’è qualche differenza, sollevando il problema per lo stesso. Non è fattibile testare in tutti i browser. Normalmente il client decide in quale browser c’è l’obbligo di testare.

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

Ad esempio, il menu a discesa in Windows-firefox sarà diverso da mac-firefox. Tali problemi sono accettabili, in quanto 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 il browser di base.

che si Verificano Comunemente UI Difetti

• Pulsante di problemi di allineamento
• Incoerente spazio tra le etichette o le caselle di testo
• Rotto le etichette cioè a linea singola etichetta sempre visualizzati in due righe
• Disallineamento tra le caselle di testo, info, icone, etichette o dropdown
• Sovrapposizione di campi
• campi Incompleti
• Dati della pagina non è allineato; qualche tempo-spostato verso l’alto o verso il basso
• In qualsiasi browser, mentre la selezione di un po ‘ di azione, l’azione corrispondente, non accade
• Ridimensionamento non funziona come previsto
• Sessione di scadenza molto breve o molto lungo per alcuni browser
• Browser specifici problemi – Alcuni campi non sono modificabili dopo l’immissione di dati in un browser, ma modificabile in un altro browser

Chiave UI e Test di Usabilità Requisiti

Il tasto di test dell’interfaccia utente di requisiti dell’applicazione web sono:

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

Componente:

Un componente è un elemento costitutivo, che può essere utilizzato con la combinazione di diversi altri componenti per formare un’applicazione. I componenti possono essere riutilizzati in tutta l’applicazione.

Esempi di un componente includono Pulsante, Campo di testo, Autosuggest,Casella di controllo, menu a discesa ecc.

Alcuni componenti di base

Casella di controllo: è possibile selezionare una o più opzioni dalla casella di controllo componente

Pulsanti di opzione: 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 visualizzare il contenuto in esso. Più di un elemento può essere espanso troppo.

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

3. Carosello: Più set di elementi informativi possono essere incorporati in un componente carosello. I cercatori di modi in basso indicano che sono presenti più elementi. Le frecce aiutano nella navigazione all’interno della giostra. Di solito, la navigazione a carosello è configurata come un ciclo continuo.

Fare clic qui per ottenere ulteriori informazioni utili sui componenti dell’interfaccia utente

Stati dei componenti dell’interfaccia utente

La disponibilità dei componenti si basa esclusivamente sulle linee guida sui requisiti del progetto. Varierà da un progetto all’altro.

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

1. Stato vuoto
2. Stato pieno e a fuoco
3. Stato normale e stato predefinito
4. Stato Hover
5. Stato disabilitato
6. Stato mascherato

Stato vuoto:

Prima digitando qualsiasi valore in un componente, si dice che sia uno stato vacante. Lo stato Vuoto visualizza l’eventuale testo segnaposto. Il seguente è un componente di campo di testo.

Stato riempito:

Un componente con un valore digitato dall’utente è stato riempito.

Stato di messa a fuoco:

L’utente rivisita un componente già riempito. Il componente deve visualizzare il cursore, indicando che il componente specifico in essere messa a fuoco

Stato normale:

La visualizzazione di un componente con il valore già inserito dall’utente nella schermata è descritto lo stato normale.

Stato predefinito:

Un componente che visualizza il valore auto-popolato dal server/backend. Questo valore può anche essere modificato dall’utente in alcuni scenari.

Stato Hover:

Il passaggio del mouse sopra il componente evidenzia il componente che indica l’azione hover.

Prima del passaggio del mouse:

Al passaggio del mouse:

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 principali requisiti di test di USABILITÀ dell’applicazione web sono:

1. Font
2. Dimensione Carattere
3. Colore
4. spaziatura
5. altezza
6. Sfondo di convalida
7. Riempimento/Opacità
8. Misurazioni di componenti come la lunghezza, la larghezza, l’ e larghezza
9. Posizione/Spaziatura tra i componenti di uno schermo

L’caratteristiche di Usabilità può essere testato in codice o utilizzando l’ispeziona elemento nell’applicazione. Un altro modo più semplice è usare 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 dei componenti aggiuntivi:

• Consente di risparmiare tempo
• Facile da usare
• È conveniente

Limitazione di componenti aggiuntivi:

• errore di Parallasse, mentre usando la misurazione
• Compatibile attraverso applicazioni
• Compatibile con tutti i browser

Riferimenti per gli Add-On:

• il Web Inspector: Apple Dev Tools
• Firebug: Firebug Wiki
• Misura
• Colorzilla

GUI Strumenti di verifica

sono disponibili Diversi strumenti nel mondo della tecnologia che potrebbe aiutare tester nel test dell’interfaccia utente.

• Selenio
• HP Unified Functional Testing
• Cucumber
• Coded UI
• Sahi

Un elenco dettagliato di strumenti GUI è disponibile in softwaretestinghelp.com se stesso! Clicca qui.

Esempio di GUI Casi di Test

1) Verificare il funzionamento della giostra frecce e modo finders
2) Verificare che il campo password è accettare solo valori in un mascherato stato
3) Verificare che il pulsante ‘salva’ rimane inattivo fino a quando tutti i campi richiesti sono entrati
4) Verificare che l’utente è autorizzato a visualizzare la parte superiore della pagina con ‘Top’ bar
5) Verificare che il corretto messaggio viene visualizzato quando i filtri applicati non recuperare tutti i risultati
6) Verificare la navigazione dal link disponibile in Intestazioni e piè di pagina
7) Verificare l’allineamento dei pulsanti di opzione è accurate
8) Verificare che più opzioni nelle caselle di controllo possono essere selezionati in un momento
9) Verificare che il titolo di ogni sezione è in grassetto
10) Verificare il cambiamento di colore dei collegamenti ipertestuali cliccando

Conclusione

Un sito web è l’anima di molte aziende. È molto necessario assicurarsi che appaia bene e funzioni in modo simile su diverse piattaforme di browser &. Pertanto, il test dell’interfaccia utente è molto importante e garantirà una vasta base di clienti e un’aggiunta di valore aziendale.