WebElement dans Selenium: TexteBox, Bouton, sendkeys(), clic()

Par : Krishna Rungta Krishna Rungta
Hours Le kit de préparation mis à jour

WebElement dans Selenium

Les formulaires sont les éléments Web fondamentaux pour recevoir des informations des visiteurs du site Web. Les formulaires Web comportent différents éléments 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, des entrées de fichier, etc.

Nous verrons comment accéder à ces différents éléments du formulaire en utilisant Selenium Pilote Web avec Java. Selenium encapsule chaque élément de formulaire en tant qu'objet de WebElement. Il fournit une API pour rechercher les éléments et agir sur eux, comme saisir du texte dans des zones de texte, cliquer sur les boutons, etc. Nous verrons les méthodes disponibles pour accéder à chaque élément du formulaire.

Introduction à WebElement, findElement(), findElements()

Selenium Web Driver encapsule un simple élément de formulaire en tant qu'objet de WebElement.

Il existe différentes techniques par lesquelles WebDriver identifie les éléments de formulaire en fonction des différentes propriétés des éléments Web telles que l'ID, le nom, la classe, XPath, le nom de balise, les sélecteurs CSS, le texte du lien, etc.

Web Driver fournit les deux méthodes WebElement suivantes pour rechercher les éléments.

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

Voyons les extraits de code pour obtenir un seul élément – ​​un champ de texte dans une page Web en tant qu'objet de WebElement à l'aide de la méthode findElement(). Nous aborderons la méthode findElements() pour rechercher plusieurs éléments dans les didacticiels suivants.

Étape 1) Nous devons importer ce package pour créer des objets de Web Elements

Introduction à WebElement FindElement, FindElements

Étape 2) Nous devons appeler la méthode findElement() disponible sur la classe WebDriver et récupérer un objet de WebElement.

Reportez-vous ci-dessous pour voir comment cela se fait.

ARTICLES LIÉS

Selenium Texte de saisie

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

  1. Champs de texte- Selenium zones de texte de saisie qui acceptent les valeurs saisies et les affichent telles qu'elles sont.
  2. Champs de mot de passe– des zones de texte qui acceptent les valeurs saisies mais les masquent sous la forme d'une série de caractères spéciaux (généralement des points et des astérisques) pour éviter l'affichage de valeurs sensibles.

    Selenium Texte de saisie

Des localisateurs

La méthode findElement() prend un paramètre qui est un localisateur de l'élément. Différents localisateurs comme By.id(), By.name(), By.xpath(), By.CSSSelector() etc. localisent les éléments de la page en utilisant leurs propriétés comme « » id, nom ou chemin, etc.

Vous pouvez utiliser des plugins comme Fire path pour obtenir de l'aide pour obtenir l'identifiant, XPath, etc. des éléments.

Utilisation du site exemple https://demo.guru99.com/test/login.html Vous trouverez ci-dessous le code permettant de localiser 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.

Des localisateurs

  1. Le champ de texte de l'e-mail est localisé par Id
  2. Le champ du mot de passe est situé par nom

envoyer les clés dans Selenium

envoyer des clés() dans Selenium est une méthode utilisée pour saisir du contenu modifiable dans les champs de texte et de mot de passe lors de l'exécution du test. Ces champs sont identifiés à l'aide de localisateurs comme le nom, la classe, l'identifiant, etc. C'est une méthode disponible sur l'élément web. Contrairement à la méthode type, la méthode sendkeys() ne remplace le texte existant dans aucune 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, sendKeys() est la méthode disponible sur WebElement dans Selenium.

En utilisant le même exemple de https://demo.guru99.com/test/login.html site, voici comment trouver les champs Texte et Mot de passe et saisir le texte dans Selenium.

Texte en Selenium

  1. Recherchez le champ de texte « Adresse e-mail » à l’aide du localisateur d’identifiant.
  2. Recherchez le champ « Mot de passe » à l'aide du localisateur de nom
  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

Vue d'ensemble clair() La méthode est utilisée pour supprimer le texte dans une zone de saisie. Cette méthode n'a pas besoin de paramètre. L'extrait de code ci-dessous effacera le texte des champs Email ou Mot de passe

Suppression de valeurs en entrée Boxes

Selenium Cliquez sur les boutons

Vue d'ensemble Selenium Le bouton click est accessible à l’aide de la méthode click().

Dans l'exemple ci-dessus

  1. Trouvez le bouton pour vous connecter
  2. Cliquez sur le bouton « Connexion » dans la page de connexion du site pour vous connecter au site.

Selenium Cliquez sur les boutons

Selenium Boutons Soumettre

Les boutons de soumission sont utilisés pour soumettre l’intégralité du formulaire au serveur. Nous pouvons soit utiliser la méthode click() sur l'élément Web comme un bouton normal comme nous l'avons fait ci-dessus, soit utiliser la méthode submit() sur n'importe quel élément Web du formulaire ou sur le bouton de soumission lui-même.

Selenium Boutons Soumettre

Lorsque submit() est utilisé, WebDriver recherchera le DOM pour savoir à quel formulaire appartient l'élément, puis déclenchera sa fonction de soumission.

Code complet

Voici le code de travail complet

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 NoSuchElementException() lors de la recherche d'éléments, cela signifie que l'élément n'est pas trouvé dans la page au moment où le pilote Web a accédé à la page.

  1. Vérifiez à nouveau votre localisateur à l'aide de Firepath ou d'Inspect Element dans Chrome.
  2. Vérifiez maintenant si la valeur que vous avez utilisée dans le code est différente de celle de l'élément dans Firepath.
  3. Certaines propriétés sont dynamiques pour quelques éléments. Si vous constatez que la valeur est différente et change dynamiquement, envisagez d'utiliser By.xpath() ou By.cssSelector() qui sont des méthodes plus fiables mais plus complexes.
  4. Parfois, cela peut aussi être un problème d'attente, c'est-à-dire que le pilote Web a exécuté votre code avant même le chargement complet de la page, etc.
  5. Ajoutez une attente avant findElement() en utilisant des attentes implicites ou explicites.

Résumé

  • Le tableau ci-dessous résume les commandes pour accéder à chaque type d'élément évoqué ci-dessus
Élément Command Description
Entrée Box sendKeys () utilisé pour saisir des valeurs dans des zones de texte
clair() utilisé pour effacer les zones de texte de leur valeur actuelle
Liens Cliquez sur() utilisé pour cliquer sur le lien et attendre la fin du chargement de la page avant de passer à la commande suivante.
Bouton Soumettre nous faire parvenir()
  • 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éclenchera automatiquement la fonction de soumission du formulaire auquel appartient cet élément.

Tu pourrais aimer: