Creazione di test automatizzati con TestNG

1 Introduzione

I test automatizzati possono essere creati con diversi strumenti, a seconda del tipo di test. I test di integrazione possono essere creati con soapUI, unit test con il modulo Unit Testing e UI test con Selenium IDE. Con Selenium IDE è possibile creare script per aiutare nei test esplorativi automatizzati. Se stai cercando di creare test robusti e basati su browser, dovresti esaminare l’utilizzo di un framework di test con Selenium.

TestNG è un framework di test Java che può essere utilizzato per guidare il Selenio. In questo how-to imparerai come creare un test automatico con TestNG.

Questa guida vi insegnerà come eseguire le operazioni seguenti:

• Creare TestNG file di prova
• Eseguire test automatizzati con TestNG
• Generare report con TestNG

2 Prerequisiti

Prima di iniziare questa procedura, assicurarsi di aver completato le seguenti prerequisiti:

• Scarica e installa Eclipse
• Scarica il client Selenium & WebDriver per Java

3 Creazione di un progetto Java

In questo capitolo verrà installato il plug-in TestNG e verrà creato un progetto Java in Eclipse incluse le librerie TestNG e Selenium:

1. Apri Eclipse.
2. Segui le istruzioni nel plug-in Eclipse > Installa dalla sezione Aggiorna sito in Download TestNG.
3. Riavvia Eclipse affinché le modifiche abbiano effetto.
4. Seleziona File > Nuovo > Progetto Java.
5. Immettere MyFirstTestNGProject per il nome del progetto e fare clic su Avanti.
6. Selezionare la scheda Librerie e fare clic su Aggiungi libreria.
7. Selezionare TestNG e fare clic su Avanti.
8. Fare clic su Fine per impostare la libreria TestNG predefinita per questo progetto.
9. Fai clic su Aggiungi JAR esterni… e vai al punto in cui hai salvato i file JAR Selenium.

10. Aggiungi tutti i file JAR all’interno delle cartelle selenium – e libs:

    

11. Fare clic su Fine per creare il progetto Java. MyFirstTestNGProject verrà mostrato in Esplora pacchetti:

    

Ora hai finito di impostare il tuo progetto!

4 Creare un TestNG File

Per creare un nuovo TestNG file, attenersi alla seguente procedura:

1. fare clic con il src cartella e selezionare Nuovo > Altri…:

2. Selezionare TestNG classe e quindi fare clic su Avanti:

   

3. fare Clic su Sfoglia… per selezionare una cartella di origine, selezionare MyFirstTestNGProject > src, e fare clic su OK.

4. Immettere le seguenti informazioni:

   • nome del Pacchetto: myfirsttestngpackage
   • nome della Classe: MyFirstTestNGFile
   • @BeforeTest: true
   • @AfterTest: vero

   

5. Fare clic su Fine. Il modello per il tuo primo file TestNG verrà creato automaticamente:

   

   L’annotazione @Test viene utilizzata per affermare che il metodo sotto di esso è un caso di test. In questo caso, il metodo f è un caso di test. L’annotazione @BeforeTest viene utilizzata per indicare che il metodo sotto di esso verrà eseguito prima del primo caso di test. L’annotazione @AfterTest viene utilizzata per indicare che il metodo sotto di esso verrà eseguito dopo l’ultimo caso di test.

5 Creazione di un test Case

Codifichiamo ora il tuo test case.

5.1 Aggiungere un WebDriver

Per creare una variabile da utilizzare per il WebDriver, attenersi alla seguente procedura:

1. Cerca quanto segue:

   public class MyFirstTestNGFile {

2. Aggiungi il codice qui sotto nella riga successiva. Questo creerà una variabile driver del tipo WebDriver:

   public WebDriver driver;

3. Premere Ctrl + Maiusc + O per organizzare le importazioni. Ciò importerà le istruzioni mancanti e rimuoverà le istruzioni di importazione non utilizzate. Verrà importata la seguente istruzione:

   import org.openqa.selenium.WebDriver;

5.2 Aggiungi un metodo BeforeTest

L’annotazione @BeforeTest viene utilizzata per indicare che il metodo sotto di esso verrà eseguito prima del primo caso di test. Prima del primo caso di test, aprire il browser Firefox seguendo questi passaggi:

1. Modificare il seguente codice:

   @BeforeTestpublic void beforeTest() {}

   in:

   @BeforeTestpublic void beforeTest() { driver = new FirefoxDriver();}

   Questo crea una nuova istanza del driver di Firefox e apre il browser Firefox.

2. Premere CTRL + MAIUSC + O. Verrà importata la seguente istruzione:

   import org.openqa.selenium.firefox.FirefoxDriver;

5.3 Aggiungere un metodo AfterTest

L’annotazione @AfterTest viene utilizzata per indicare che il metodo sotto di esso verrà eseguito dopo l’ultimo caso di test. Dopo l’ultimo caso di test, chiudere il browser modificando il seguente codice:

@AfterTestpublic void afterTest() {}

in:

@AfterTestpublic void afterTest() {driver.close();}

Questo chiuderà il browser Firefox.

5.4 Aggiungere il primo metodo di prova

Per aggiungere il primo metodo di prova, aprire un URL nel browser, e quindi modificare il seguente codice:

@Testpublic void f() {}

in:

@Test(priority=1)public void openApp() {driver.get("http://localhost:8080/index.html");}

Questo metodo di test aprirà l’URL http://localhost:8080/index.html nel browser Firefox. Per impostazione predefinita, i metodi annotati da @Test vengono eseguiti in ordine alfabetico. È possibile utilizzare i parametri per modificare la funzione dell’annotazione. Il parametro priority può essere utilizzato per eseguire i metodi in un ordine diverso. TestNG eseguirà l’annotazione @Test con il valore di priorità più basso fino al più grande.

5.5 Aggiungi il secondo metodo di prova

Ora che sei nella finestra di accesso, vorrai accedere. Per aggiungere il secondo metodo di prova, attenersi alla seguente procedura:

1. Apri Firefox e vai a http://localhost:8080/index.html.
2. Utilizzare gli strumenti di sviluppo per ispezionare l’elemento.

3. Fare clic sul campo di immissione Nome utente. L’ID di questo campo è usernameInput. Il selettore CSS di un ID è un hashtag (#) + il nome dell’ID. Per il campo Nome utente, questo sarà # usernameInput. Lo stesso principio viene utilizzato per gli altri passaggi. Il selettore CSS # usernameInput è unico. C’è un nodo corrispondente:

   

4. Ripetere i passaggi 5-6 per il campo di immissione della password e il pulsante di accesso:

   l’Elemento	Selettore CSS
   campo di immissione della Password	#passwordInput
   pulsante accedi	#loginButton

5. Aggiungi un nuovo metodo di prova chiamato login. Utilizzare il seguente codice:

   @Test(priority=2)public void login() { driver.findElement(By.cssSelector("#usernameInput")).sendKeys("MxAdmin"); driver.findElement(By.cssSelector("#passwordInput")).sendKeys("1"); driver.findElement(By.cssSelector("#loginButton")).click();}

Questo metodo di prova contiene le seguenti fasi di prova:

1. Immettere MxAdmin come nome utente.
2. Inserisci 1 come password.
3. Fare clic sul pulsante login.

5.6 Aggiungere il terzo metodo di prova

Per aggiungere il terzo metodo di prova, attenersi alla seguente procedura:

1. Apri la tua app e in Esplora app, apri la pagina ProgramDetail.

2. Seleziona la scheda Spese:

   

   Il nome della scheda Spese è tabPage4. Ogni elemento otterrà automaticamente la classe CSS mx-name-, quindi la scheda spese otterrà la classe CSS mx-name-tabPage4 quando l’app è in esecuzione.

   

3. Torna a Eclipse.

4. Aggiungere un nuovo metodo di prova denominato openExpensesTab. Utilizzare il seguente codice:

   @Test(priority=3)public void openExpensesTab() { WebDriverWait wait = new WebDriverWait(driver, 10); wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(".mx-name-tabPage4"))).click();}

   Questo metodo di test chiama ExpectedCondition ogni 500 millisecondi fino a quando non ritorna correttamente o sono trascorsi 10 secondi. Quando sono passati 10 secondi e l’elemento non si trova, verrà generata una TimeoutException. Se l’elemento si trova entro 10 secondi, il metodo farà clic sull’elemento con il nome della classe mx-name-tabPage4. La classe della scheda spese è mx-name-tabPage4. Il selettore CSS di una classe è un punto (.) + il nome della classe, quindi per la scheda spese, sarà .mx-name-tabPage4.

5.7 Aggiungere il quarto metodo di prova

Ora che si è nella scheda Spese, si desidera creare una nuova spesa. Per aggiungere il quarto metodo di prova, attenersi alla seguente procedura:

1. Aprire Studio Pro e quindi aprire la pagina Desktop_AdminMenu.

2. Seleziona il pulsante Nuova spesa:

   

   Il nome del nuovo pulsante di spesa è newButton3 , quindi il pulsante avrà la classe CSS mx-name-newButton3 :

   

3. Aprire la pagina Desktop_Expense_NewEdit_Admin.

4. Trova i nomi dei seguenti elementi (come hai fatto nel passaggio 3):

   l’Elemento	Nome
   campo Quantità	textBox6
   Descrizione a discesa	referenceSelector1
   pulsante Salva	saveButton1

   The name of an element in your app may be different than the name shown in the Name column. In step 7, use the name of the element of your app.

5. tornare a Eclipse.

6. Aggiungere un nuovo metodo di prova denominato createExpense. Utilizzare il seguente codice:

   @Test(priority=4)public void createExpense() { driver.findElement(By.cssSelector(".mx-name-newButton3")).click(); driver.findElement(By.cssSelector(".mx-window-active .mx-name-textBox6 input")).clear(); driver.findElement(By.cssSelector(".mx-window-active .mx-name-textBox6 input")).sendKeys("15.00"); driver.findElement(By.cssSelector(".mx-window-active .mx-name-referenceSelector1 option:nth-child(2)")).click(); driver.findElement(By.cssSelector(".mx-window-active .mx-name-saveButton1")).click();}

   Questo metodo di prova contiene le seguenti fasi di prova:

   1. Fare clic su Nuova spesa.
   2. Cancella il campo Importo.
   3. Inserire 15.00 nel campo Importo.
   4. Selezionare la seconda opzione dal menu a discesa Descrizione.
   5. Fare clic su Salva.

   Una finestra pop-up verrà visualizzata dopo aver fatto clic su Nuova spesa (.mx-name-newButton3). Per essere sicuri che l’elemento della pagina attiva venga recuperato (che in questo caso è il pop-up), è necessario aggiungere .mx-window-active al selettore CSS degli elementi nel pop-up.

   Per ogni campo di input, è necessario aggiungere input alla fine del selettore CSS.

   Il valore predefinito del campo importo è 0,00. Per immettere un nuovo valore, è necessario prima cancellare il campo.

   Il selettore di riferimento ha sei opzioni; vuoto, Alloggio, Pasto, Altro, Forniture, Trasporto. Per selezionare Accomodation (la seconda opzione), è necessario aggiungere option:nth-child(2) alla fine del selettore CSS.

5.8 Aggiungere il quinto metodo di prova

Dopo aver creato una spesa, si desidera uscire. Per aggiungere il quinto metodo di prova, attenersi alla seguente procedura:

1. Aprire Studio Pro e quindi aprire lo snippet Desktop_MyInfo.

2. Trova il nome del seguente elemento:

   Elemento	Nome
   Pulsante Esci	signOutButton1

3. Aggiungere un nuovo metodo di prova denominato signOut. Utilizzare il seguente codice:

   @Test(priority=5)public void signOut() { driver.findElement(By.cssSelector(".mx-name-signOutButton1")).click();}

   Questo metodo di test farà clic sull’elemento con il nome della classe mx-name-signOutButton1.

6 Esegui il test

Ora sei pronto per eseguire il test. Per eseguire il test, attenersi alla seguente procedura:

1. Fare clic con il pulsante destro del mouse sulla cartella MyFirstTestNGProject.

2. Selezionare Esegui come > TestNG Test:

   

   I risultati del test verranno visualizzati nella finestra console e nella finestra Risultati TestNG:

   

   

7 Test Report

TestNG genera report in formato HTML. Per testare il report, attenersi alla seguente procedura:

1. Fare clic con il pulsante destro del mouse sulla cartella MyFirstTestNGProject e selezionare Aggiorna. Verrà creata una cartella di output di test:

   

2. Aprire la cartella test-output.

3. Fare clic destro sull’indice.file html.

4. Selezionare Apri con > Browser Web. Il rapporto sarà simile a questo:

   

5. Fare clic su (mostra). I metodi di prova sono indicati in ordine alfabetico:

   

6. Fare clic sulla vista cronologica. Verrà mostrata una panoramica con i metodi in ordine cronologico:

   

8 Creazione di una suite di test

Quando si esegue il test come è stato eseguito in Esegui il test, viene creata automaticamente una suite di test. Questa suite di test contiene tutti i file testNG che possono essere trovati nel progetto. Ma cosa succede se si desidera eseguire solo test specifici? Di quanto sia necessario creare una suite di test da soli.

1. Fare clic con il pulsante destro del mouse sulla cartella src e selezionare Nuovo > Altro.

2. Aprire la cartella XML e selezionare il file XML:

   

3. Fare clic su Avanti.

4. Modificare il nome del file in MyFirstTestSuite.XML.

5. Fare clic su Fine per creare il file XML:

   

6. Fare clic sulla scheda Origine:

   

7. Modificare il seguente codice:

   <?xml version="1.0" encoding="UTF-8"?>

   in

   <?xml version="1.0" encoding="UTF-8"?><suite name="MyFirstTestSuite"> <test name="Test1"> <classes> <class name="myfirsttestngpackage.MyFirstTestNGFile" /> </classes> </test></suite>

   Questo creerà la nuova suite di test MyFirstTestSuite. La suite di test contiene un test: Test1. Il test contiene un file testNG, myfirsttestngpackage.MyFirstTestNGFile.

8. Fare clic destro sul MyFirstTestSuite.file xml e selezionare Esegui come > 1 TestNG Suite.

Ben fatto! Hai creato la tua prima suite di TestNG!

9 Esegui la tua suite di test su più browser Utilizzando @Parameters

Il test creato ora viene eseguito solo su Firefox. Se si desidera assicurarsi che la funzionalità funzioni come previsto in altri browser, è necessario eseguire test multi-browser. Con TestNG è molto facile eseguire lo stesso test su browser diversi.

1. Scarica il ChromeDriver qui: https://sites.google.com/a/chromium.org/chromedriver/downloads.
2. Scarica lo IEDriver qui: http://selenium-release.storage.googleapis.com/index.html.

3. In Eclipse, apri MyFirstTestNGFile e modifica il seguente codice:

   @BeforeTestpublic void beforeTest() { driver = new FirefoxDriver();}

   in:

   @Parameters("browser")@BeforeTestpublic void beforeTest(String browser) { if(browser.equalsIgnoreCase("chrome")){ System.setProperty("webdriver.chrome.driver", "C://Selenium/chromedriver.exe"); driver = new ChromeDriver(); } else if(browser.equalsIgnoreCase("ie")){ System.setProperty("webdriver.ie.driver", "C://Selenium/IEDriverServer.exe"); driver = new InternetExplorerDriver(); } else{ driver = new FirefoxDriver(); }}

   @Parameters viene utilizzato per inserire un parametro (in questo caso browser) dalla suite di test XML. Se il parametro del browser è chrome, verrà avviato un driver Chrome.

   In questa sezione, chromedriver.exe è memorizzato nel C://Selenium cartella. Assicurati di utilizzare il percorso giusto in questo codice.

4. Premere Ctrl+Maiusc+O, e le seguenti dichiarazioni saranno importati:

   import org.openqa.selenium.chrome.ChromeDriver;import org.openqa.selenium.ie.InternetExplorerDriver;import org.testng.annotations.Parameters;

5. Aprire MyFirstTestSuite e modificare il seguente codice

   <?xml version="1.0" encoding="UTF-8"?><suite name="MyFirstTestSuite"> <test name="Test1"> <classes> <class name="myfirsttestngpackage.MyFirstTestNGFile" /> </classes> </test></suite>

   in:

   <?xml version="1.0" encoding="UTF-8"?><suite name="MyFirstTestSuite"> <test name="ChromeTest"> <parameter name="browser" value="chrome" /> <classes> <class name="myfirsttestngpackage.MyFirstTestNGFile" /> </classes> </test> <test name="IETest"> <parameter name="browser" value="ie" /> <classes> <class name="myfirsttestngpackage.MyFirstTestNGFile" /> </classes> </test> <test name="FirefoxTest"> <parameter name="browser" value="firefox" /> <classes> <class name="myfirsttestngpackage.MyFirstTestNGFile" /> </classes> </test></suite>

   Il primo test (chiamato ChromeTest) è il browser parametro chrome. Questo parametro verrà utilizzato nel metodo @BeforeTest in MyFirstTestNGFile.

6. Fare clic destro sul MyFirstTestSuite.file xml e selezionare Esegui come > TestNG Suite:

   

Ben fatto! Hai creato il tuo primo test cross-browser automatizzato con TestNG!

Ora sai come creare un file di test TestNG, come creare una suite di test e come eseguire i test automatici su più browser.

Buon test!

10 Per saperne di più

• Testare le applicazioni Mendix utilizzando Selenium IDE
• Testare i microflussi utilizzando il modulo Unit Testing