DEV Community

Cover image for Introduction pratique aux tests d'applications Web avec Selenium WebDriver et Java.
IKITAMA CODES
IKITAMA CODES

Posted on

Introduction pratique aux tests d'applications Web avec Selenium WebDriver et Java.

#webdev #java #selenium #testing

Salut à tous,

Aujourd'hui, je veux partager avec vous une introduction pratique aux tests d'applications Web avec Selenium WebDriver. Nous allons voir ensemble comment écrire un script de test simple en Java, en utilisant deux mini-projets que j'ai récemment réalisés.

Préparation de l'environnement

Avant de commencer à écrire notre script de test, nous devons préparer notre environnement de développement. Voici ce dont nous avons besoin:

  1. Java JDK : Assurez-vous d'avoir installé Java Development Kit(JDK).

  2. IntelliJ IDEA : Nous utiliserons IntelliJ IDEA comme IDE.

3.Selenium WebDriver : Nous ajouterons les librairies dans le projet.

  1. Google chrome : Nous utiliserons le navigateur Google Chrome.

  2. ChromeDriver : Nous aurons besoins de télécharger le driver de chrome compatible avec votre version de Google Chrome.

Installation de Selenium WebDriver

Etape 1 : Télécharger Selenium WebDriver pour Java.

  1. Aller sur le site officielle de Selenium WebDriver en cliquant sur ce lien https://www.selenium.dev/downloads/.

  2. Faites défiler jusqu'à la section Selenium Clients and WebDriver Language Bindings et téléchargez le client Selenium WebDriver Java. Le téléchargement est un fichier ZIP contenant des bibliothèques et des pilotes Selenium Java.

  3. Aller sur le site https://sites.google.com/chromium.org/driver/downloads, lisez le contenu pour savoir quelle version de chromeDriver télécharger en fonction de la version de votre navigateur Google Chrome.

    • Comment connaître sa version Google Chrome ? : Dans la barre d'URL de votre navigateur Google Chrome, tapez ceci : chrome://version.

  4. Créer un nouveau projet Java avec Maven dans IntelliJ IDEA, dans notre cas nous l'appellerons SeleniumTestLogiciels.

Etape 2 : Ajouter les librairies Selenium dans le projet.

  1. Extrayez le fichier ZIP téléchargé dans un dossier sur votre ordinateur.

  2. Dans IntelliJ IDEA, cliquer sur File > Project Structure.

  3. Dans la fenêtre Project Structure, cliquer sur Libraries.

  4. Dans fenêtre Libraries, à droite cliquer sur l'icone + pour (New Project Library), choisissez ensuite Java.

  5. Dans la fenêtre Select Library Files, accédez au dossier où vous avez extrait Selenium WebDriver et sélectionnez tous les fichiers qui s'y trouvent.

    • Astuce de sélection rapide : Cliquez sur le premier élément dans le dossier, maintenez enfoncée la touche shift, puis sans lâcher la touche utiliser la souris pour vous placer au bas de la liste et cliquez sur le dernier élément et voila :).

  6. Cliquez sur Apply, puis sur Close.

Vérifier l'installation

Créons un script de test simple pour vérifier que Selenium WebDriver a été bien installé correctement.

  1. Créez une nouvelle classe nommée NewsletterSignUpTest

  2. Dans le fichier de classe nouvellement crée, écrivez un simple test Selenium WebDriver. Voici un exemple de script qui ouvre l'un de mes projets frontend dans un navigateur Web.

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class NewsletterSignUpTest {

    public static void main(String[] args) throws InterruptedException {
        // Setup WebDriver
        System.setProperty("webdriver.chrome.driver","C:\\Selenium WebDriver Chrome\\chromedriver-win64\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();

        // Navigate to the page
        driver.get("https://time-tracking-dashboard-challenge-sooty.vercel.app/");

        // Maximize the browser window
        driver.manage().window().fullscreen();


        // Wait for 4 seconds before closing the browser
        Thread.sleep(6000);

        //close the browser
        driver.quit();
    }
}
Enter fullscreen mode Exit fullscreen mode
  • Remarque : Dans le script ci-dessus, remplacez C:\\Selenium WebDriver Chrome\\chromedriver-win64\\chromedriver.exe par le chemin d'accès à l'exécutable ChromeDriver de votre machine.
  1. Exécutez le script de test
    • Remarque : Si tout est bien configuré correctement, ce script devrait ouvrir une page Web dans le navigateur Chrome, puis la fermer.

Écrivons le script de test pour le site Web NewsletterSignUp

Ci-dessous le code de la classe NewsletterSignUpTest précédemment créée :


import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

import java.util.logging.Level;
import java.util.logging.Logger;

public class NewsletterSignUpTest {

    public static void main(String[] args){
        // Initialize logger for logging test results
        final Logger LOGGER = Logger.getLogger(NewsletterSignUpTest.class.getName());

        // Setup WebDriver
        System.setProperty("webdriver.chrome.driver","C:\\Selenium WebDriver Chrome\\chromedriver-win64\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();

        try {
            // Navigate to the page
            driver.get("https://newsletter-sign-up-with-success-message-challenge-tau.vercel.app/");

            // Maximize the browser window
            driver.manage().window().fullscreen();

            // Wait for 5 seconds to observe the initial state
            Thread.sleep(5000);

            // Find the email input field and submit button
            WebElement emailInput = driver.findElement(By.id("email"));
            WebElement submitButton = driver.findElement(By.id("btnSubmit"));

            // Test invalid email submission
            emailInput.sendKeys("invalid-email");
            submitButton.click();

            // Wait for 4 seconds to observe the error message
            Thread.sleep(4000);

            // Verify the error message is displayed
            WebElement errorEmailMessage = driver.findElement(By.id("error-email"));
            String errorMessage = errorEmailMessage.getText();
            if ("Email is not in a valid format".equals(errorMessage)) {
                LOGGER.info("Invalid email test passed!");
            } else {
                LOGGER.severe("Invalid email test failed! Error message: " + errorMessage);
            }

            // Test valid email submission
            emailInput.clear();
            emailInput.sendKeys("validemail@example.com");
            submitButton.click();

            // Wait for 4 seconds to observe the success message
            Thread.sleep(4000);

            // Verify the success message is displayed
            WebElement successMessage = driver.findElement(By.id("card-success-message"));
            if (successMessage.isDisplayed()) {
                LOGGER.info("Valid email test passed!");
            } else {
                LOGGER.severe("Valid email test failed!");
            }


            // Verify the success email is correct
            WebElement successEmail = driver.findElement(By.id("user-email"));
            String displayedEmail = successEmail.getText();

            if ("validemail@example.com".equals(displayedEmail)) {
                LOGGER.info("Success email test passed!");
            } else {
                LOGGER.severe("Success email test failed! Displayed email: " + displayedEmail);
            }


            // Test dismissing the success message
            WebElement dismissButton = driver.findElement(By.id("btnDismissMessage"));
            dismissButton.click();

            // Wait for 4 seconds to observe the state after dismissing the success message
            Thread.sleep(4000);

            // Verify the sign-up form is displayed again
            WebElement signUpForm = driver.findElement(By.id("card-sign-up"));
            if (signUpForm.isDisplayed()) {
                LOGGER.info("Dismiss message test passed!");
            } else {
                LOGGER.severe("Dismiss message test failed!");
            }


            // Wait for 6 seconds before closing the browser
            Thread.sleep(6000);

        } catch (InterruptedException e) {
            // Log interrupted exception
            LOGGER.log(Level.SEVERE, "Interrupted exception occurred", e);
        }
        finally {
            // Close the browser
            driver.quit();
        }
    }
}
Enter fullscreen mode Exit fullscreen mode
  • Remarque : Dans le script ci-dessus, remplacez C:\\Selenium WebDriver Chrome\\chromedriver-win64\\chromedriver.exe par le chemin d'accès à l'exécutable ChromeDriver de votre machine.

Explication du Script de Test pour le Site Web NewsletterSignUp

Pour mieux comprendre le fonctionnement du script de test Selenium WebDriver pour le formulaire d'inscription à la newsletter, nous allons examiner chaque partie du code et expliquer son rôle.

Initialisation du WebDriver et Configuration

// Configuration du WebDriver
System.setProperty("webdriver.chrome.driver", "C:\\Selenium WebDriver Chrome\\chromedriver-win64\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
Enter fullscreen mode Exit fullscreen mode

Cette partie du code initialise et configure le WebDriver pour utiliser ChromeDriver.

  • java System.setProperty définit le chemin vers l'exécutable de ChromeDriver sur votre machine.

  • WebDriver driver = new ChromeDriver(); crée une nouvelle instance de ChromeDriver, qui est utilisée pour interagir avec le navigateur Chrome.

Bloc Try-Catch

try {
    // Code de test Selenium
} catch (InterruptedException e) {
    // Gestion des exceptions d'interruption
    LOGGER.log(Level.SEVERE, "Exception d'interruption survenue", e);
} catch (Exception e) {
    // Gestion des autres exceptions imprévues
    LOGGER.log(Level.SEVERE, "Une exception imprévue est survenue", e);
} finally {
    // Fermeture du navigateur à la fin du test
    driver.quit();
}
Enter fullscreen mode Exit fullscreen mode

  • Le bloc try-catch entoure le code de test Selenium. Il capture et gère les exceptions qui peuvent survenir pendant l'exécution du test.

  • InterruptedException est spécifiquement géré pour les interruptions lors de l'utilisation de Thread.sleep(), tandis que Exception gère toutes les autres exceptions imprévues.

  • Le bloc finally garantit que le navigateur est fermé driver.quit() à la fin du test, quelle que soit l'issue.

Navigation et Interaction avec les Éléments de la Page

// Navigation vers la page du formulaire
driver.get("https://newsletter-sign-up-with-success-message-challenge-tau.vercel.app/");

// Maximisation de la fenêtre du navigateur
driver.manage().window().fullscreen();
Enter fullscreen mode Exit fullscreen mode

  • driver.get() navigue vers l'URL spécifiée où se trouve le formulaire d'inscription à la newsletter.

  • driver.manage().window().fullscreen() maximise la fenêtre du navigateur pour une meilleure visibilité et interaction pendant les tests.

Interaction avec les Éléments de la Page

// Recherche des éléments de page
WebElement emailInput = driver.findElement(By.id("email"));
WebElement submitButton = driver.findElement(By.id("btnSubmit"));
Enter fullscreen mode Exit fullscreen mode
  • driver.findElement(By.id("email")) et driver.findElement(By.id("btnSubmit")) trouvent respectivement les éléments de la page avec les identifiants email (champ d'e-mail) et btnSubmit (bouton de soumission du formulaire).

Soumission d'Email Invalide

// Soumission d'e-mail invalide
emailInput.sendKeys("invalid-email");
submitButton.click();
Enter fullscreen mode Exit fullscreen mode

  • emailInput.sendKeys("invalid-email") entre un e-mail invalide dans le champ d'e-mail.

  • submitButton.click() clique sur le bouton Soumettre pour soumettre le formulaire avec l'e-mail invalide.

Vérification des Messages

// Vérification de l'affichage du message d'erreur
WebElement errorEmailMessage = driver.findElement(By.id("error-email"));
String errorMessage = errorEmailMessage.getText();
if ("Email is not in a valid format".equals(errorMessage)) {
    LOGGER.info("Test d'e-mail invalide réussi !");
} else {
    LOGGER.severe("Échec du test d'e-mail invalide ! Message d'erreur : " + errorMessage);
}
Enter fullscreen mode Exit fullscreen mode

  • driver.findElement(By.id("error-email")) trouve l'élément de page qui affiche le message d'erreur pour un e-mail invalide.

  • errorEmailMessage.getText() récupère le texte du message d'erreur. Le test vérifie si le message d'erreur attendu est affiché et enregistre le résultat dans les logs.

Projet GitHub

Pour plus de pratique, voici le projet GitHub qui contient les scripts de tests pour les mini-projets écrit en JavaScript.

  1. Formulaire d'inscription à la newsletter avec message de réussite.

  2. Tableau de bord de suivi du temps.

URL du repository

Selinium_WebDriver_TestLogiciels_GitHub_Repository

NB : Lisez le fichier README.md pour les détails sur ce projet.

Top comments (0)

Read next

sshamza profile image

WebSockets vs. Real-Time Rivals: A Deep Dive into SSE, Long-Polling, MQTT, and XMPP

Hamza Nadeem -

ssukhpinder profile image

10-Day .Net Aspire Challenge: Day 8— Azure Queue Storage

Sukhpinder Singh -

lulu_liu_c90f973e2f954d7f profile image

Comprehensive Guide to Installing, Configuring, and Testing SafeLine WAF

Lulu -

danielle_lee_896 profile image

Boost Your Potential with Cisco 300-535 SPAUTO Certification Exam

Danielle Lee -