how locate elements chrome
Il s'agit du didacticiel n ° 7 de notre série de formations en ligne Selenium. Si vous souhaitez consulter tous les didacticiels Selenium de cette série, veuillez vérifier cette page .
Dans le didacticiel précédent, nous avons essayé de faire la lumière sur différents types de localisateurs dans Selenium et leurs mécanismes de localisation pour créer des scripts de test. Le didacticiel était principalement composé de la brève introduction de différents types de localisateurs comme ID, classes, Xpaths, textes de lien , Sélecteurs CSS etc. et leur identification.
En poursuivant notre prochain tutoriel, nous en profiterons pour vous présenter une extension des stratégies de localisation. Ainsi, dans le prochain tutoriel, nous étudierions le mécanisme de localisation des éléments Web sur Google Chrome et Internet Explorer.
Comme nous sommes tous bien conscients du fait qu'il y a une croissance rapide de la base d'utilisateurs Internet, les parties prenantes et les programmeurs créent des applications Web qui sont susceptibles de fonctionner sur la plupart des navigateurs.
Imaginez donc une situation où votre application Web ne prend pas en charge Firefox mais fonctionne bien pour Chrome et Internet Explorer.
Maintenant, comment allez-vous automatiser une telle application en utilisant Selenium? Ou pour être précis, comment allez-vous localiser les éléments Web dans Chrome et Internet Explorer. Ainsi, la réponse se trouve à venir dans ce tutoriel.
meilleure application de téléphone espion pour android
Ce que vous apprendrez:
Localisation d'éléments Web dans Google Chrome
Commençons par comprendre les stratégies de localisation dans Google Chrome.
Comme Firebug dans Firefox, Google Chrome a son propre outil de développement qui peuvent être utilisés pour identifier et localiser des éléments Web sur la page Web. Contrairement à Firebug, un utilisateur n'est pas obligé de télécharger ou d'installer un plugin séparé; l'outil de développement est fourni avec Google Chrome.
Suivez les étapes ci-dessous pour localiser les éléments Web à l'aide de l'outil de développement de Chrome:
Étape 1: La première étape consiste à lancer l'outil de développement de Google Chrome. Appuyez sur F12 pour lancer l'outil. L'utilisateur pourrait voir quelque chose comme l'écran ci-dessous.
Notez que l'onglet «Élément» est mis en évidence dans la capture d'écran ci-dessus. Ainsi, l'onglet élément est celui qui affiche toutes les propriétés HTML appartenant à la page Web courante. Accédez à l'onglet «Elément» s'il n'est pas ouvert par défaut au lancement.
Vous pouvez également lancer l'outil de développement en cliquant avec le bouton droit n'importe où dans la page Web et en sélectionnant «Inspecter l'élément» qui est très similaire à celui de l'inspection de Firebug.
Étape 2: L'étape suivante consiste à localiser l'objet souhaité dans la page Web. Une façon de faire de même consiste à cliquer avec le bouton droit sur l'élément Web souhaité et à inspecter. La propriété HTML appartenant à cet élément Web serait mise en évidence dans l'outil de développement. Une autre façon consiste à survoler les propriétés HTML et l'élément Web correspondant serait mis en surbrillance. Ainsi, de cette manière, l'utilisateur peut localiser les identifiants, les classes, les liens, etc.
Création d'un Xpath dans Developer Tool
Nous avons déjà discuté de Xpaths dans le dernier tutoriel. Nous avons également discuté de sa stratégie de création. Ici, nous baserons notre discussion pour vérifier la validité du XPath créé dans l'outil de développement de Chrome.
Étape 1: Pour créer XPath dans l'outil Developer, ouvrez l'onglet de la console.
Étape 2: Tapez le Xpath créé et placez-le entre $ x ('// input (@ id = 'Email')')
Étape 3: Appuyez sur la touche Entrée pour voir tous les éléments HTML correspondants avec le Xpath spécifié. Dans notre cas, il n'y a qu'un seul élément HTML correspondant. Survolez cet élément HTML et l'élément Web correspondant serait mis en surbrillance sur la page Web.
De cette manière, tous les Xpaths peuvent être créés et vérifiés pour leur validité dans la console.
Les informations relatives au CSS correspondant à l'élément Web sont disponibles dans l'outil de développement de Chrome. Reportez-vous à la capture d'écran ci-dessous:
Localisation d'éléments Web dans Internet Explorer
Comme Google Chrome, Internet Explorer dispose également de son propre outil de développement qui peuvent être utilisés pour identifier les éléments Web en fonction de leurs propriétés dans la page Web. L'utilisateur n'est pas obligé de télécharger ou d'installer un plug-in séparé, l'outil de développement est facilement fourni avec Internet Explorer.
Suivez les étapes ci-dessous pour localiser les éléments Web à l'aide de l'outil de développement IE:
Étape 1: La première étape consiste à lancer l'outil IE Developer. Appuyez sur F12 pour lancer l'outil. L'utilisateur pourrait voir quelque chose comme l'écran ci-dessous.
Notez que l'onglet 'HTML' est mis en évidence dans la capture d'écran ci-dessus. Ainsi, l'onglet HTML est celui qui affiche toutes les propriétés HTML appartenant à la page Web courante. Développez l'onglet HTML pour afficher les propriétés de tous les éléments Web appartenant à la page Web actuelle.
Étape 2: L'étape suivante consiste à localiser l'objet souhaité dans la page Web. Une façon d'y parvenir consiste à sélectionner l'élément HTML et l'élément Web correspondant sera mis en surbrillance. Ainsi, de cette manière, l'utilisateur peut localiser les identifiants, la classe, les liens, etc. Vérifiez dans la capture d'écran ci-dessous dans quelle boîte de texte d'e-mail serait mise en évidence dès que nous sélectionnons la propriété HTML correspondante.
Une autre façon de localiser l'élément Web est de cliquer sur le bouton 'Rechercher' présent dans le menu supérieur et en cliquant sur l'élément Web souhaité dans la page Web. En conséquence, les propriétés HTML correspondantes seraient mises en évidence.
Ainsi, en utilisant l'outil de développement, un utilisateur peut trouver des identifiants, des classes, des noms de balises et peut créer des Xpaths pour localiser des éléments Web.
À l'instar de l'outil de développement de Chrome, l'outil de développement IE comporte une section distincte qui affiche les informations relatives aux CSS. Regardez la capture d'écran ci-dessous.
Conclusion
Dans ce didacticiel, nous mettons en lumière les stratégies de base de localisation des éléments à l'aide de l'outil de développement pour Google Chrome et Internet Explorer.
Tutoriel suivant # 8 : Dans la foulée de notre prochain tutoriel, nous aurions le plaisir de vous présenter un outil plus avancé nommé WebDriver. WebDriver est l'un des outils de test d'automatisation les plus convaincants. Donc, notre prochain tutoriel, nous acheminerions et baserions nos discussions autour de WebDriver et de tous ses détails.
lecture recommandée
- Vérifier la visibilité des éléments Web à l'aide de divers types Commandes WebDriver - Tutoriel Selenium # 14
- Introduction à Selenium WebDriver - Tutoriel Selenium # 8
- Comment utiliser le sélecteur CSS pour identifier les éléments Web pour les scripts Selenium - Tutoriel Selenium # 6
- Script Selenium efficace et scénarios de dépannage - Tutoriel Selenium # 27
- Débogage de scripts Selenium avec des journaux (Tutoriel Log4j) - Tutoriel Selenium # 26
- 30+ meilleurs tutoriels sur Selenium: Apprenez le sélénium avec de vrais exemples
- Tutoriel Cucumber Selenium: Intégration Cucumber Java Selenium WebDriver
- Utilisation de la classe Selenium Select pour la gestion des éléments déroulants sur une page Web - Tutoriel Selenium # 13