Comment inspecter les éléments Web et les méthodes pour les localiser avec Chrome Devtools
Il existe quelques outils de navigation que vous pouvez utiliser pour inspecter plus facilement les éléments Web dans le DOM:
Dans ce didacticiel, nous allons nous concentrer sur Chrome DevTools et les nombreuses façons d'inspecter les éléments Web sur le site que nous sommes prêts à tester avec Selenium. La liste suivante en couvrira 6:
Nom du champ ID d'élément
Chaque champ de saisie dans un formulaire a un nom. En général, les noms de champ sont uniques au formulaire, mais pas toujours. En général, un localisateur de nom de champ pour les champs de nom d'utilisateur et de mot de passe sur une page de connexion fonctionne très bien. Cependant, chaque bouton d'un groupe associé aura le même nom et des valeurs différentes. Par conséquent, un localisateur différent doit être utilisé pour cliquer sur un bouton spécifique du groupe.
Texte
Le localisateur de texte recherche les éléments contenant le texte fourni. Il est pratique pour rechercher des liens et des boutons sur la page qui ont du texte visible, mais pas une image contenant le texte. Ce localisateur est personnalisé pour Load Tester et n'est pas disponible dans Selenium / Webdriver.
Sous les couvertures, il est implémenté avec un localisateur XPath qui examine ces éléments (dans cet ordre):
- Étiquettes de bouton
- Valeurs d'entrée (par exemple, champs de texte, etc.)
- Texte du lien
- Étiquettes
- Éléments avec un attribut title
- Éléments avec texte
Texte du lien
S'il existe un élément visible avec du texte qui correspond exactement au texte fourni, le localisateur de texte de lien le trouvera.
Classe CSS
Le localisateur de classe CSS trouve le premier élément avec un attribut de classe CSS spécifique. Ceci est utile pour localiser les éléments qui ont un style unique sur la page. Un exemple courant est celui des boutons Soumettre et Connexion / Déconnexion, car souvent, il n'y a qu'un seul contrôle sur la page avec ce style.
XPath
XPath est un langage pour parcourir la structure d'un document XML. Toutefois, le HTML est hérité du XML et la page web HTML a donc un DOM (Document Object Model) qui représente la page Web en HTML. Les localisateurs XPath sont très puissants et flexibles. Tout élément de la page peut être localisé via un ou plusieurs XPath et la plupart des autres localisateurs peuvent être exprimés sous la forme d'un XPath. À l'exception des sélecteurs CSS, aucun autre localisateur ne partage cette fonctionnalité. Un XPath bien écrit peut être très robuste, mais un XPath médiocre peut être fragile et peut se briser lorsque l'application change.
Les pages Web et le DOM sous-jacent sont structurés de manière hiérarchique. XPath vous permet de naviguer dans cette structure.
Sélecteur CSS
Les sélecteurs CSS sont similaires aux XPaths - ils sont flexibles et puissants. Contrairement à XPath, ils ne sont pas basés sur la structure du DOM et ne naviguent pas dans le DOM de cette manière. Cependant, il est plus facile d'effectuer certaines actions qu'avec XPath. Si votre application utilise beaucoup de CSS, vos développeurs sont probablement très familiarisés avec le concept et peuvent vous aider à concevoir des sélecteurs CSS pour trouver n'importe quel élément de la page.
ID
L'ID est un identifiant unique pour l'élément qui est généralement attribué par le développeur du code. L'ID doit être unique sur la page, mais les navigateurs autorisent la violation de cette règle, il n'est donc parfois pas unique. C'est généralement le meilleur localisateur car un seul doit exister sur la page. S'il apparaît dans une liste ou un tableau, il y a de fortes chances que les identifiants puissent changer pour de futures visites sur la page et un localisateur plus complexe peut être nécessaire.
Maintenant, nous allons nous concentrer sur le champ: «Votre nom». Pour pouvoir inspecter cet élément via Selenium, nous devons trouver un moyen d'y accéder par un clic droit sur l'élément> Inspecter.
La console de Chrome s'ouvrira et l'élément recevra le focus comme indiqué dans la capture d'écran:
L'élément que nous inspectons est le type INPUT, qui a un attribut du type NAME. Le NOM a une valeur unique.
Il est clair que l'élément Web a un identifiant, qui est également l'une des méthodes pour inspecter les éléments Web avec l'aide de Selenium.
Inspectons l'élément sur l'en-tête de la page - Contactez-nous.
