Pianificare i test dell'interfaccia utente

Completato

In questa sezione, seguirai Amita e Andy mentre parlano di come incorporare i test dell'interfaccia utente Selenium nella pipeline di rilascio. 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 annotare freneticamente sul suo blocco appunti, cancellare qualcosa, borbottare e poi strappare la pagina.

Andy: Salve. Non sembri molto soddisfatta.

Amita: Non sono felice. 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 selezioni alcune cose, ad esempio il pulsante 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. 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.

Suggerimento

Per seguire i test manuali di Amita, è possibile eseguire una copia locale del sito Web Space Game. Esegui i comandi seguenti nel terminale di Visual Studio Code, quindi seleziona il collegamento simile a Now listening on: http://localhost:5000.

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: Quando si seleziona il pulsante Scarica gioco , viene visualizzata la finestra modale corretta.

Amita seleziona il pulsante Scarica gioco . Viene visualizzata la finestra modale.

Andy: Bene. Quali finestre modali controlli successivamente?

Amita: In seguito controllo le quattro schermate di gioco. In seguito, ho selezionato il giocatore più alto nella classifica. Verifico che venga visualizzato il profilo del giocatore.

Amita seleziona ognuna delle quattro immagini di anteprima per visualizzare le schermate di gioco di esempio.

Successivamente Amita seleziona il primo giocatore nella classifica. 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:

• Attributoid.
• Attributoname.
• 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 segui amita e Andy mentre raccolgono l'ID per ogni pulsante selezionato da Amita e per ogni finestra modale risultante.

Andy: Capisco perché questi test richiedono così tanto tempo e possono essere così frustranti. Ti piacerà moltissimo automatizzarli. Fidati di me.

Ecco cosa faremo. Si otterrà l'attributo id per ogni pulsante selezionato e per la finestra modale visualizzata. I test automatizzati scritti possono usare queste espressioni per sapere quali pulsanti selezionare e quali finestre modali aspettarsi.

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

Nota

È possibile seguire la procedura o continuare a leggere. La sezione successiva fornisce tutti gli attributi id necessari quando si eseguono i test automatizzati.

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:

Funzionalità	Collegamento id	Finestra modale id
Pulsante Download game (Scarica gioco)	download-btn	pretend-modal
Prima schermata di gioco	screen-01	screen-modal
Giocatore in vetta al tabellone punteggi	profile-1	profile-modal-1

Pianificare i test automatizzati

Amita: OK. È disponibile l'attributo id per ogni pulsante selezionato. Abbiamo anche la finestra modale risultante. E adesso?

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 usa l'automazione per selezionare il 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.