WebElement dans Selenium

WebElement dans Selenium

Les formulaires sont des éléments web fondamentaux qui permettent de recueillir des informations auprès des visiteurs d'un site web. Ils comprennent différents contrôles d'interface graphique tels que des zones de texte, des champs de mot de passe, des cases à cocher, des boutons radio, des listes déroulantes et des champs de saisie de fichiers.

Ce tutoriel explique comment accéder à chaque élément de formulaire en utilisant Selenium WebDriver avec Java. Selenium encapsule chaque élément de formulaire en tant qu'objet de WebElement. Elle fournit une API permettant de localiser les éléments et d'interagir avec eux, notamment en saisissant du texte, en cliquant sur des boutons et en soumettant des formulaires. Les sections suivantes détaillent les méthodes disponibles pour chaque élément de formulaire.

Introduction à WebElement, findElement(), findElements()

Selenium WebDriver représente un élément de formulaire simple comme un objet de Élément Web.

WebDriver identifie les éléments de formulaire à l'aide de différentes propriétés de l'élément Web, notamment l'ID, le nom et la classe. XPath, Nom de la balise, sélecteurs CSS et texte du lien.

WebDriver propose les deux méthodes WebElement suivantes pour trouver des éléments :

• trouverÉlément() – trouve un seul élément web et le renvoie sous forme de WebElement Selenium objet.
• findElements() – renvoie une liste d'objets WebElement correspondant aux critères du localisateur.

L'exemple ci-dessous montre comment récupérer un élément unique, un champ texte sur une page web, sous forme d'objet WebElement à l'aide de la méthode findElement(). La méthode findElements() permettant de rechercher plusieurs éléments est abordée dans les tutoriels suivants.

Étape 1) Importez le package nécessaire à la création d'objets WebElement.

Étape 2) Appelez la méthode findElement() disponible sur la classe WebDriver pour récupérer un objet WebElement, comme indiqué ci-dessous.

Selenium Texte de saisie

Les zones de saisie font référence à l'un de ces deux types :

1. Champs de texte - Selenium Des champs de saisie qui acceptent les valeurs saisies et les affichent exactement telles qu'elles ont été saisies.
2. Champs de mot de passe – des zones de texte qui acceptent les valeurs saisies mais les masquent sous forme d'une série de caractères spéciaux (généralement des points ou des astérisques) afin de dissimuler les données sensibles.

   

Des localisateurs

La méthode `findElement()` prend un paramètre : un localisateur pointant vers l’élément. Différents localisateurs, tels que `By.id()`, `By.name()`, `By.xpath()` et `By.cssSelector()`, permettent de trouver des éléments sur la page grâce à leurs propriétés, comme leur identifiant, leur nom ou leur chemin.

Vous pouvez utiliser des plugins comme FirePath pour obtenir l'identifiant, le XPath et d'autres valeurs de localisation pour les éléments.

Utilisation du site exemple https://demo.guru99.com/test/login.htmlLe code ci-dessous localise le champ de texte « Adresse e-mail » à l'aide du localisateur d'identifiant et le champ « Mot de passe » à l'aide du localisateur de nom.

1. Le champ de texte de l'adresse e-mail est localisé par son identifiant.
2. Le champ Mot de passe se trouve par nom.

envoyer les clés dans Selenium

envoyerKeys() dans Selenium Cette méthode permet de saisir du contenu modifiable dans les champs texte et mot de passe lors de l'exécution de tests. Ces champs sont identifiés par des localisateurs tels que le nom, la classe et l'identifiant. La méthode est disponible sur l'objet WebElement. Contrairement à la méthode de type, sendKeys() ne remplace pas le texte existant dans une zone de texte.

Comment saisir du texte dans Selenium

Pour saisir du texte dans les champs de texte et les champs de mot de passe, la méthode sendKeys() est disponible sur l'élément WebElement. Selenium.

En utilisant le même exemple de https://demo.guru99.com/test/login.html, l'extrait de code ci-dessous localise le champ de texte et le champ de mot de passe et y saisit du texte. Selenium.

1. Trouvez le champ de texte « Adresse e-mail » à l'aide du localisateur d'identifiants.
2. Trouvez le champ « Mot de passe » à l’aide du localisateur de noms.
3. Saisissez du texte dans « Adresse e-mail » à l'aide de la touche Selenium Méthode sendKeys.
4. Entrez un mot de passe dans le champ « Mot de passe » en utilisant la méthode sendKeys().

Suppression de valeurs en entrée Boxes

Le clair() Cette méthode supprime le texte contenu dans une zone de saisie. Cette méthode ne nécessite aucun paramètre. L'extrait de code ci-dessous efface le texte des champs Adresse électronique ou Mot de passe.

Selenium Cliquez sur les boutons

Le Selenium Le bouton de clic est accessible via la méthode click().

Dans l'exemple ci-dessus

1. Trouvez le bouton pour vous connecter.
2. Cliquez sur le bouton « Se connecter » sur la page de connexion du site pour vous authentifier.

Selenium Boutons Soumettre

Les boutons d'envoi transmettent le formulaire complet au serveur. Vous pouvez soit appeler la méthode click() sur l'élément WebElement, comme indiqué ci-dessus, soit utiliser la méthode submit() sur n'importe quel élément du formulaire ou sur le bouton d'envoi lui-même.

Lorsque la fonction submit() est utilisée, WebDriver consulte le DOM pour identifier le formulaire auquel appartient l'élément, puis déclenche sa fonction de soumission.

Code

Voici le code complet et fonctionnel.

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

public class Form {
    public static void main(String[] args) {

        // declaration and instantiation of objects/variables
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();

        String baseUrl = "https://demo.guru99.com/test/login.html";
        driver.get(baseUrl);

        // Get the WebElement corresponding to the Email Address(TextField)
        WebElement email = driver.findElement(By.id("email"));

        // Get the WebElement corresponding to the Password Field
        WebElement password = driver.findElement(By.name("passwd"));

        email.sendKeys("abcd@gmail.com");
        password.sendKeys("abcdefghlkjl");
        System.out.println("Text Field Set");

        // Deleting values in the text box
        email.clear();
        password.clear();
        System.out.println("Text Field Cleared");

        // Find the submit button
        WebElement login = driver.findElement(By.id("SubmitLogin"));

        // Using click method to submit form
        email.sendKeys("abcd@gmail.com");
        password.sendKeys("abcdefghlkjl");
        login.click();
        System.out.println("Login Done with Click");

        // Using submit method to submit the form. Submit used on password field
        driver.get(baseUrl);
        driver.findElement(By.id("email")).sendKeys("abcd@gmail.com");
        driver.findElement(By.name("passwd")).sendKeys("abcdefghlkjl");
        driver.findElement(By.id("SubmitLogin")).submit();
        System.out.println("Login Done with Submit");

        // driver.close();
    }
}

Dépannage

Si vous rencontrez une exception NoSuchElementException() lors de la recherche d'éléments, cela signifie que l'élément n'est pas présent sur la page au moment où WebDriver y a accédé.

1. Revérifiez votre localisateur à l'aide de FirePath ou de l'option « Inspecter l'élément » dans Chrome.
2. Vérifiez si la valeur utilisée dans le code diffère de la valeur actuelle de l'élément affichée dans FirePath.
3. Certains attributs sont dynamiques pour certains éléments. Si une valeur change dynamiquement, utilisez `By.xpath()` ou `By.cssSelector()`, qui sont plus fiables mais légèrement plus complexes.
4. Il arrive que le problème soit lié à une condition d'attente ; WebDriver peut exécuter le code avant que la page ait fini de se charger.
5. Ajoutez une attente avant findElement() en utilisant des attentes implicites ou explicites.

Résumé

• Le tableau ci-dessous récapitule les commandes permettant d'accéder à chaque type d'élément mentionné ci-dessus.

• WebDriver permet la sélection de plusieurs options dans un élément SELECT multiple.
• Vous pouvez utiliser la méthode submit() sur n'importe quel élément du formulaire. WebDriver déclenche automatiquement la fonction submit du formulaire auquel appartient l'élément.

FAQ