Créer des Tests Automatisés avec TestNG

1 Introduction

Les tests automatisés peuvent être créés avec différents outils, en fonction du type de tests. Des tests d’intégration peuvent être créés avec SoapUI, des tests unitaires avec le module de test unitaire et des tests d’interface utilisateur avec l’E Selenium. Avec Selenium ID, vous pouvez créer des scripts pour faciliter les tests exploratoires assistés par l’automatisation. Si vous cherchez à créer des tests robustes basés sur un navigateur, vous devriez envisager d’utiliser un framework de test avec Selenium.

TestNG est un framework de test Java qui peut être utilisé pour piloter le sélénium. Dans ce guide pratique, vous apprendrez à créer un test automatisé avec TestNG.

Ce mode d’emploi vous apprendra à faire ce qui suit:

• Créer des fichiers de test TestNG
• Exécuter des tests automatisés avec TestNG
• Générer des rapports avec TestNG

2 Prérequis

Avant de commencer avec ce mode d’emploi, assurez-vous d’avoir rempli les prérequis suivants:

• Téléchargez et installez Eclipse
• Téléchargez le client Selenium & WebDriver pour Java

3 Création d’un projet Java

Dans ce chapitre, vous allez installer le plug-in TestNG et créer un projet Java dans Eclipse, y compris les bibliothèques TestNG et Selenium:

1. Ouvrez Eclipse.
2. Suivez les instructions de la section Installation du plug-in Eclipse > à partir du site de mise à jour dans le téléchargement de TestNG.
3. Redémarrez Eclipse pour que les modifications prennent effet.
4. Sélectionnez le fichier > Nouveau projet Java >.
5. Entrez MyFirstTestNGProject pour le nom du projet et cliquez sur Suivant.
6. Sélectionnez l’onglet Bibliothèques et cliquez sur Ajouter une bibliothèque.
7. Sélectionnez TestNG et cliquez sur Suivant.
8. Cliquez sur Terminer pour définir la bibliothèque TestNG par défaut sur ce projet.
9. Cliquez sur Ajouter des fichiers JAR externes… et accédez à l’endroit où vous avez enregistré les fichiers JAR de sélénium.

10. Ajoutez tous les fichiers JAR dans les dossiers selenium et libs:

    

11. Cliquez sur Terminer pour créer le projet Java. MyFirstTestNGProject sera affiché dans l’Explorateur de paquets:

    

Vous avez maintenant fini de mettre en place votre projet!

4 Créer un fichier TestNG

Pour créer un nouveau fichier TestNG, procédez comme suit:

1. Cliquez avec le bouton droit sur le dossier src et sélectionnez Nouveau > Autre…:

2. Sélectionnez la classe TestNG, puis cliquez sur Suivant:

   

3. Cliquez sur Parcourir… pour sélectionner un dossier source, sélectionnez MyFirstTestNGProject > src, puis cliquez sur OK.

4. Entrez les informations suivantes:

   • Nom du paquet: myfirsttestngpackage
   • Nom de la classe: MyFirstTestNGFile
   • @BeforeTest: true
   • @AfterTest: vrai

   

5. Cliquez sur Terminer. Le modèle de votre premier fichier TestNG sera créé automatiquement:

   

   L’annotation @Test est utilisée pour indiquer que la méthode sous elle est un cas de test. Dans ce cas, la méthode f est un cas de test. L’annotation @BeforeTest est utilisée pour indiquer que la méthode sous elle sera exécutée avant le premier cas de test. L’annotation @AfterTest est utilisée pour indiquer que la méthode sous elle sera exécutée après le dernier scénario de test.

5 Création d’un scénario de test

Codons maintenant votre scénario de test.

5.1 Ajouter un WebDriver

Pour créer une variable à utiliser pour le WebDriver, procédez comme suit:

1. Recherchez les éléments suivants:

   public class MyFirstTestNGFile {

2. Ajoutez le code ci-dessous sur la ligne suivante. Cela créera une variable driver du type WebDriver:

   public WebDriver driver;

3. Appuyez sur Ctrl + Maj + O pour organiser les importations. Cela importera les instructions manquantes et supprimera les instructions d’importation inutilisées. L’instruction suivante sera importée:

   import org.openqa.selenium.WebDriver;

5.2 Ajouter une méthode BeforeTest

L’annotation @BeforeTest est utilisée pour indiquer que la méthode sous elle sera exécutée avant le premier scénario de test. Avant le premier cas de test, ouvrez le navigateur Firefox en suivant ces étapes:

1. Modifiez le code suivant:

   @BeforeTestpublic void beforeTest() {}

   dans:

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

   Cela crée une nouvelle instance du pilote Firefox et ouvre le navigateur Firefox.

2. Appuyez sur CTRL + MAJ + O. L’instruction suivante sera importée:

   import org.openqa.selenium.firefox.FirefoxDriver;

5.3 Ajouter une méthode d’AfterTest

L’annotation @AfterTest est utilisée pour indiquer que la méthode sous elle sera exécutée après le dernier scénario de test. Après le dernier cas de test, fermez le navigateur en modifiant le code suivant:

@AfterTestpublic void afterTest() {}

dans:

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

Cela fermera le navigateur Firefox.

5.4 Ajouter la première méthode de test

Pour ajouter la première méthode de test, ouvrez une URL dans le navigateur, puis modifiez le code suivant:

@Testpublic void f() {}

dans:

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

Cette méthode de test ouvrira l’URL http://localhost:8080/index.html dans le navigateur Firefox. Par défaut, les méthodes annotées par @Test sont exécutées par ordre alphabétique. Vous pouvez utiliser des paramètres pour modifier la fonction de l’annotation. Le paramètre priority peut être utilisé pour exécuter les méthodes dans un ordre différent. TestNG exécutera l’annotation @Test avec la valeur de priorité la plus basse jusqu’à la plus grande.

5.5 Ajoutez la Deuxième Méthode de test

Maintenant que vous êtes sur la fenêtre de connexion, vous voudrez vous connecter. Pour ajouter la deuxième méthode de test, procédez comme suit:

1. Ouvrez Firefox et accédez à http://localhost:8080/index.html.
2. Utilisez les outils de développement pour inspecter l’élément.

3. Cliquez sur le champ de saisie du nom d’utilisateur. L’ID de ce champ est usernameInput. Le sélecteur CSS d’un ID est un hashtag (#) + le nom de l’ID. Pour le champ Nom d’utilisateur, ce sera #usernameInput. Le même principe est utilisé pour les autres étapes. Le sélecteur CSS #usernameInput est unique. Il y a un nœud correspondant:

   

4. Répétez les étapes 5 à 6 pour le champ de saisie du mot de passe et le bouton de connexion:

   Élément	Sélecteur CSS
   Champ de saisie du mot de passe	#passwordInput
   Bouton de connexion	#loginButton

5. Ajoutez une nouvelle méthode de test appelée login. Utilisez le code suivant:

   @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();}

Cette méthode de test contient les étapes de test suivantes:

1. Entrez MxAdmin comme nom d’utilisateur.
2. Entrez 1 comme mot de passe.
3. Cliquez sur le bouton connexion.

5.6 Ajouter la troisième méthode d’essai

Pour ajouter la troisième méthode d’essai, procédez comme suit:

1. Ouvrez votre application et dans l’Explorateur d’applications, ouvrez la page ProgramDetail.

2. Sélectionnez l’onglet Dépenses:

   

   Le nom de l’onglet Dépenses est tabPage4. Chaque élément obtiendra automatiquement la classe CSS mx-name-, de sorte que l’onglet dépenses obtiendra la classe CSS mx-name-tabPage4 lorsque l’application est en cours d’exécution.

   

3. Retournez à Eclipse.

4. Ajoutez une nouvelle méthode de test appelée openExpensesTab. Utilisez le code suivant:

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

   Cette méthode de test appelle ExpectedCondition toutes les 500 millisecondes jusqu’à ce qu’elle retourne avec succès ou que 10 secondes se soient écoulées. Lorsque 10 secondes se sont écoulées et que l’élément n’est pas localisé, une exception TimeoutException sera levée. Si l’élément est situé dans les 10 secondes, la méthode clique sur l’élément avec le nom de classe mx-name-tabPage4. La catégorie de l’onglet dépenses est mx-name-tabPage4. Le sélecteur CSS d’une classe est un point (.) + le nom de la classe, donc pour l’onglet dépenses, ce sera .mx-name-tabPage4.

5.7 Ajoutez la Quatrième Méthode de test

Maintenant que vous êtes sur l’onglet Dépenses, vous voudrez créer une nouvelle dépense. Pour ajouter la quatrième méthode de test, procédez comme suit:

1. Ouvrez Studio Pro, puis ouvrez la page Desktop_AdminMenu.

2. Sélectionnez le bouton Nouvelle dépense:

   

   Le nom du bouton New Expense est newButton3, donc le bouton aura la classe CSS mx-name-newButton3:

   

3. Ouvrez la page Desktop_Expense_NewEdit_Admin.

4. Trouvez les noms des éléments suivants (comme vous l’avez fait à l’étape 3):

   Élément	Nom
   Champ Montant	textBox6
   Description liste déroulante	referenceSelector1
   Bouton Enregistrer	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. Retournez à Eclipse.

6. Ajoutez une nouvelle méthode de test appelée createExpense. Utilisez le code suivant:

   @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();}

   Cette méthode de test contient les étapes de test suivantes:

   1. Cliquez sur Nouvelle dépense.
   2. Effacez le champ Montant.
   3. Entrez 15.00 dans le champ Montant.
   4. Sélectionnez la deuxième option dans le menu déroulant Description.
   5. Cliquez sur Enregistrer.

   Une fenêtre contextuelle s’affiche après avoir cliqué sur Nouvelle dépense (.mx-name-newButton3). Pour être sûr que l’élément de la page active est récupéré (qui dans ce cas est la fenêtre contextuelle), vous devez ajouter .mx-window-active au sélecteur CSS des éléments de la fenêtre contextuelle.

   Pour chaque champ de saisie, vous devez ajouter input à la fin du sélecteur CSS.

   La valeur par défaut du champ montant est 0,00. Pour entrer une nouvelle valeur, vous devez d’abord effacer le champ.

   Le sélecteur de référence a six options; vide, Hébergement, Repas, Autre, Fournitures, Transport. Pour sélectionner l’hébergement (la deuxième option), vous devez ajouter option:nth-child(2) à la fin du sélecteur CSS.

5.8 Ajoutez la cinquième méthode de test

Après avoir créé une dépense, vous voudrez vous déconnecter. Pour ajouter la cinquième méthode de test, procédez comme suit:

1. Ouvrez Studio Pro, puis ouvrez l’extrait de code Desktop_MyInfo.

2. Trouvez le nom de l’élément suivant:

   Élément	Nom
   Bouton de déconnexion	signOutButton1

3. Ajoutez une nouvelle méthode de test appelée signOut. Utilisez le code suivant:

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

   Cette méthode de test clique sur l’élément avec le nom de classe mx-name-signOutButton1.

6 Exécutez le test

Vous êtes maintenant prêt à exécuter le test. Pour exécuter le test, procédez comme suit:

1. Cliquez avec le bouton droit sur le dossier MyFirstTestNGProject.

2. Sélectionnez Exécuter en tant que > TestNG Test:

   

   Les résultats du test seront affichés dans la fenêtre de la console et dans la fenêtre des résultats du TestNG:

   

   

7 Rapport de test

TestNG génère des rapports au format HTML. Pour tester le rapport, procédez comme suit:

1. Cliquez avec le bouton droit sur le dossier MyFirstTestNGProject et sélectionnez Actualiser. Un dossier de sortie de test sera créé:

   

2. Ouvrez le dossier test-output.

3. Cliquez avec le bouton droit sur l’index.fichier html.

4. Sélectionnez Ouvrir avec le navigateur Web >. Le rapport ressemblera à ceci:

   

5. Cliquez sur (afficher). Les méthodes d’essai sont indiquées par ordre alphabétique:

   

6. Cliquez sur la vue chronologique. Un aperçu avec les méthodes dans l’ordre chronologique sera affiché:

   

8 Création d’une Suite de tests

Lorsque vous exécutez votre test comme vous l’avez fait lors de l’exécution du Test, une suite de tests est créée automatiquement. Cette suite de tests contient tous les fichiers TestNG qui peuvent être trouvés dans le projet. Mais que se passe-t-il si vous souhaitez uniquement exécuter des tests spécifiques? Que vous devez créer vous-même une suite de tests.

1. Cliquez avec le bouton droit sur le dossier src et sélectionnez Nouveau > Autre.

2. Ouvrez le dossier XML et sélectionnez Fichier XML:

   

3. Cliquez sur Suivant.

4. Changez le nom du fichier en MyFirstTestSuite.XML.

5. Cliquez sur Terminer pour créer le fichier XML:

   

6. Cliquez sur l’onglet Source:

   

7. Modifiez le code suivant:

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

   dans

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

   Cela créera la nouvelle suite de tests MyFirstTestSuite. La suite de tests contient un test : Test1. Le test contient un fichier TestNG, myfirsttestngpackage.MyFirstTestNGFile.

8. Cliquez avec le bouton droit sur la suite Myfirsttest.fichier xml et sélectionnez Exécuter en tant que > 1 Suite de tests.

Bravo ! Vous avez créé votre première suite TestNG !

9 Exécutez votre Suite de tests sur plusieurs Navigateurs En utilisant @Parameters

Le test que vous avez créé est désormais exécuté uniquement sur Firefox. Si vous souhaitez vous assurer que la fonctionnalité fonctionne comme prévu dans les autres navigateurs, vous devez effectuer des tests multi-navigateurs. Avec TestNG, il est très facile d’effectuer le même test sur différents navigateurs.

1. Téléchargez le ChromeDriver ici: https://sites.google.com/a/chromium.org/chromedriver/downloads.
2. Téléchargez l’IEDriver ici: http://selenium-release.storage.googleapis.com/index.html.

3. Dans Eclipse, ouvrez MyFirstTestNGFile et modifiez le code suivant:

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

   dans:

   @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 est utilisé pour insérer un paramètre (dans ce cas browser) à partir de la suite de tests XML. Si le paramètre du navigateur est chrome, un pilote Chrome démarre.

   Dans cette section, chromedriver.exe est stocké dans le C://Selenium dossier. Assurez-vous d’utiliser le bon chemin dans ce code.

4. Appuyez sur Ctrl + Maj + O et les instructions suivantes seront importées:

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

5. Ouvrez MyFirstTestSuite et changez le code suivant

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

   en:

   <?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>

   Le premier test (appelé ChromeTest) a le paramètre du navigateur chrome. Ce paramètre sera utilisé dans la méthode @BeforeTest dans MyFirstTestNGFile.

6. Cliquez avec le bouton droit sur la suite Myfirsttest.fichier xml et sélectionnez Exécuter en tant que suite de tests >:

   

Bravo ! Vous avez créé votre premier test inter-navigateur automatisé avec TestNG !

Maintenant, vous savez comment créer un fichier de test TestNG, comment créer une suite de tests et comment exécuter le ou les tests automatisés sur plusieurs navigateurs.

Bon test!

10 En savoir plus

• Testez les Applications Mendix À l’aide de l’EDI Sélénium
• Testez les Microflows À l’aide du Module de Test unitaire