Pianificare i test dell'interfaccia utente

• 6 minuti

In questa sezione, Amita e Andy discutono di come incorporare i test dell'interfaccia utente di Selenium nella pipeline di versione. Iniziano esaminando i test che Amita normalmente esegue in modo manuale. Quindi mappano i passaggi manuali di Amita a test case automatizzati.

Eseguire manualmente i test dell'interfaccia utente

Amita sta aspettando che arrivi Andy. Andy aiuterà Amita a scrivere un test dell'interfaccia utente da aggiungere alla fase Test della pipeline. Quando arriva, Andy vede Amita scarabocchiare sul suo blocco appunti, cancellare qualcosa, borbottare e poi strappare la pagina.

Andy: Salve. Non sembri molto soddisfatta.

Amita: Non lo sono affatto. Sto cercando di capire come scrivere un test automatizzato, ma non so da dove iniziare. Non scrivo codice. Mi sento obsoleta.

Andy: Tranquilla, non è una tragedia. Per prima cosa, c'è sempre bisogno di qualcuno che abbia in mente il punto di vista dell'utente. Questo non può essere automatizzato in nessun modo. E poi, all'inizio nessuno sa come automatizzare i test. Siamo tutti principianti a un certo punto. Spero di poter semplificare un po' il processo di apprendimento.

Credo che il modo migliore per iniziare sia automatizzare un'operazione che in genere esegui manualmente. Prendiamo un test dell'interfaccia utente. Quindi analizziamolo in dettaglio e prendiamo nota dei passaggi. Poi, vediamo come automatizzare quei passaggi. Quale test dovremmo scegliere?

Amita prende un bel respiro.

Amita: Automatizziamo i test della finestra modale. Quando faccio clic su determinati elementi, come il pulsante Download game (Scarica gioco), voglio verificare che venga visualizzata la finestra modale corretta. Quindi, quando faccio clic fuori dalla finestra modale, voglio verificare che questa scompaia e che sia di nuovo attiva la finestra principale.

Andy: Sembra un ottimo punto di partenza. Tu esegui il test. Io prendo nota della procedura.

Amita apre un portatile Windows e avvia Google Chrome. Passa all'app Web e verifica che venga aperta la home page.

git fetch upstream selenium
git checkout -B selenium upstream/selenium
dotnet build --configuration Release
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

Andy: OK. Ora che cosa controlli?

Amita: Verifico che venga visualizzata la finestra modale corretta quando faccio clic sul pulsante Download game (Scarica gioco).

Amita fa clic sul pulsante Download game (Scarica gioco). Viene visualizzata la finestra modale.

Andy: Bene. Quali finestre modali controlli successivamente?

Amita: In seguito controllo le quattro schermate di gioco. Successivamente, faccio clic sul giocatore in vetta al tabellone punteggi. Verifico che venga visualizzato il profilo del giocatore.

Amita fa clic su ognuna delle quattro immagini di anteprima per mostrare le schermate di gioco di esempio.

A questo punto, Amita fa clic sul giocatore in vetta al tabellone punteggi. Viene visualizzato il profilo del giocatore.

Amita: Questo è tutto per i test delle finestre modali. Eseguo questi test in Windows perché è piattaforma usata dalla maggior parte dei giocatori per visitare il nostro sito. Eseguo i test in Chrome e, quando ho tempo, li eseguo anche in Firefox e Microsoft Edge.

Se avessi tempo, eseguirei di nuovo tutti i test in macOS e Linux, per verificare la compatibilità con qualsiasi sistema operativo usato dai giocatori per visitare il sito. Però devo eseguire molti altri test.

Che cosa sono i localizzatori in Selenium?

In un test di Selenium, un localizzatore seleziona un elemento HTML dal DOM (Document Object Model) su cui agire. Il modello DOM può essere considerato come una rappresentazione ad albero o grafico di un documento HTML. Ogni nodo nel DOM rappresenta una parte del documento.

In un test di Selenium è possibile localizzare un elemento HTML in base a:

• attributo id.
• attributo name.
• Espressione XPath.
• Testo del collegamento o testo del collegamento parziale.
• Nome tag, ad esempio body o h1.
• Nome della classe CSS.
• Selettore CSS.

Il localizzatore usato dipende dal modo in cui si scrive il codice HTML e dai tipi di query da eseguire.

In un documento HTML l'attributo id specifica un identificatore univoco per un elemento HTML. Verrà usato l'attributo id per eseguire una query sugli elementi nella pagina, in quanto ogni identificatore deve essere univoco. Questo rende l'attributo id uno dei modi più semplici per eseguire query per gli elementi in un test di Selenium.

Ottenere l'ID per ogni elemento HTML

Qui si seguiranno Amita e Andy mentre raccolgono l'ID per ogni pulsante su cui Amita fa clic e per ogni finestra modale risultante.

Andy: Capisco perché questi test richiedono così tanto tempo e possono essere così frustranti. L'automazione sarà una vera svolta. Fidati di me.

Ecco cosa faremo. Otterremo l'attributo id per ogni pulsante selezionato e per la finestra modale che compare. I test automatizzati che scriviamo possono usare queste espressioni per stabilire quali pulsanti selezionare e quali finestre modali aspettarsi.

Prima di tutto otteniamo l'attributo id per il pulsante Download game (Scarica gioco).

1. In Google Chrome passare alla home page di Space Game.

2. Fare clic con il pulsante destro del mouse sul pulsante Download game (Scarica gioco) e quindi selezionare Inspect (Ispeziona).

   Verrà visualizzata la finestra degli strumenti di sviluppo. Il codice HTML per il pulsante Download game (Scarica gioco) è evidenziato.

3. Esaminare il codice evidenziato e prendere nota dell'attributo id. Copiare id da usare in un secondo momento.

   

4. Selezionare il pulsante Download game (Scarica gioco). Ripetere quindi i passaggi 2 e 3 per ottenere l'attributo id per la finestra modale che compare.

5. Ripetere il processo per le quattro schermate di gioco e il giocatore in vetta al tabellone punteggi.

Amita apre Microsoft Word e aggiunge una tabella. La tabella contiene l'attributo id per ogni collegamento e l'attributo id per la finestra modale corrispondente. Per semplicità, Amita registra nella tabella:

• Il pulsante Download game (Scarica gioco).
• Solo una delle schermate di gioco.
• Il giocatore in vetta al tabellone punteggi.

Ecco come appare la tabella di Amita:

Pianificare i test automatizzati

Amita: OK. Abbiamo l'attributo id per ogni pulsante su cui faccio clic. Abbiamo anche la finestra modale risultante. Passaggi successivi

Andy: Credo che siamo pronti a scrivere i nostri test. Ecco cosa faremo:

1. Creare un progetto NUnit che includa Selenium. Il progetto verrà archiviato nella directory insieme al codice sorgente dell'app.
2. Scrivere un test case che usi l'automazione per fare clic sul collegamento specificato. Il test case verifica che venga visualizzata la finestra modale prevista.
3. Usare l'attributo id salvato per specificare i parametri per il metodo del test case. Questa attività crea una sequenza, o serie, di test.
4. Configurare i test da eseguire in Chrome, Firefox e Microsoft Edge. Questa attività crea una matrice di test.
5. Eseguire i test in cui ogni Web browser viene avviato automaticamente.
6. Selenium eseguirà automaticamente la serie di test per ogni browser.
7. Nella finestra della console verificare che tutti i test vengano superati.

Amita: Non vedo l'ora di vedere la velocità con cui vengono eseguiti i test. Possiamo provarli adesso?

Andy: Assolutamente. Passiamo al mio portatile. Ho il codice dell'app pronto.