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 camminando attraverso i test che Amita normalmente esegue manualmente. Eseguono quindi il mapping dei passaggi manuali di Amita ai test case automatizzati.

Eseguire manualmente i test dell'interfaccia utente

Amita sta aspettando che Andy si mostri. Andy aiuterà Amita a scrivere un test dell'interfaccia utente che verrà aggiunto alla fase test della pipeline. Quando arriva, Andy vede Amita scarabocchiare nel suo blocco appunti, incrociando qualcosa, muttering, e poi strappando la pagina.

Andy: Ciao. Non sembri felice.

Amita: Non sono felice. Sto cercando di capire come scrivere un test automatizzato, ma non so dove iniziare. Non ho codice. Mi sento come se fossi obsoleto.

Andy: Wow, non credo che sia così male. Per un aspetto, sarà sempre necessario qualcuno che abbia la prospettiva dell'utente in mente. Non è possibile automatizzare questa operazione. Per un altro, nessuno inizia a sapere come automatizzare i test. Siamo stati tutti principianti a un certo punto. Spero di poter rendere il processo di apprendimento un po' più semplice.

Penso che il modo migliore per iniziare è automatizzare qualcosa che fai regolarmente manualmente. Selezionare un test dell'interfaccia utente. Quindi esaminiamolo e scriviamo i passaggi. Successivamente si apprenderà come automatizzare questi passaggi. Quale test è necessario scegliere?

Amita prende un respiro profondo.

Amita: automatizzare i test delle finestre modali. Quando faccio clic su determinate cose, ad esempio il pulsante Scarica gioco , voglio verificare che venga visualizzata la finestra modale corretta. Quindi, quando si fa clic lontano dalla finestra modale, si vuole verificare che la finestra modale scompare e che la finestra principale sia nuovamente attiva.

Andy: Sembra un ottimo punto di partenza. Si esegue il test. Scriverò la procedura.

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

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. Cosa si verifica di seguito?

Amita: controlla che quando faccio clic sul pulsante Scarica gioco , viene visualizzata la finestra modale corretta.

Amita fa clic sul pulsante Scarica gioco . Verrà visualizzata la finestra modale.

Andy: Grande. Quali finestre modali si selezionano di seguito?

Amita: Successivamente controlla le quattro schermate di gioco. Successivamente, faccio clic sul top player nella classifica. Verificare 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.

Successivamente Amita fa clic sul giocatore più alto nella classifica. Viene visualizzato il profilo del giocatore.

Amita: che copre i test della finestra modale. Io esegua questi test su Windows perché questo è ciò che la maggior parte dei giocatori usa per visitare il nostro sito. I test vengono eseguiti su Chrome e, quando ho tempo, li esegua anche su Firefox e Microsoft Edge.

Se avessi tempo, eseguivo di nuovo tutti i test su macOS e Linux, solo per assicurarti che siamo compatibili con qualsiasi sistema operativo usato dai giocatori per visitare il sito. Ma devo eseguire molti altri test.

Che cosa sono i localizzatori in Selenium?

In un test Selenium, un localizzatore seleziona un elemento HTML dal DOM (Document Object Model) su cui agire. Si pensi al DOM come una rappresentazione ad albero o a grafo di un documento HTML. Ogni nodo nel DOM rappresenta una parte del documento.

In un test Selenium è possibile individuare un elemento HTML in base al relativo:

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

Il localizzatore usato dipende dalla modalità di scrittura del 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. In questo modo l'attributo id è uno dei modi più semplici per eseguire query per gli elementi in un test 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: Posso vedere perché questi test richiedono così tanto tempo e possono essere così frustranti. Ti piacerà automatizzarli. Promesso.

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

Per iniziare, ottenere l'attributo id per il pulsante 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 strumenti di sviluppo. Il codice HTML per il pulsante Scarica gioco è evidenziato.

3. Esaminare il codice evidenziato e prendere nota dell'attributo id . Copiare l'oggetto id per in un secondo momento.

   

4. Selezionare il pulsante Scarica gioco . Ripetere quindi i passaggi 2 e 3 per ottenere l'attributo id per la finestra modale visualizzata.

5. Ripetere il processo per le quattro schermate di gioco e il giocatore superiore nella classifica.

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 mantenere la tabella di base, Amita registra:

• Pulsante Scarica gioco .
• Solo uno degli schermi del gioco.
• Il giocatore più alto nella classifica.

Ecco l'aspetto della tabella di Amita:

Pianificare i test automatizzati

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

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

1. Creare un progetto NUnit che include Selenium. Il progetto verrà archiviato nella directory insieme al codice sorgente dell'app.
2. Scrivere un test case che usa 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 nel metodo del test case. Questa attività crea una sequenza o una 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 e controllare che ogni Web browser venga visualizzato automaticamente.
6. Guardare Selenium viene eseguito automaticamente attraverso la serie di test per ogni browser.
7. Nella finestra della console verificare che tutti i test vengano superati.

Amita: Sarò entusiasta di vedere quanto velocemente vengono eseguiti i test. È ora possibile provare i test?

Andy: Assolutamente. Passiamo al mio portatile. Il codice dell'app è pronto.