Localisation d’un élément
L’une des techniques les plus fondamentales à apprendre lors de l’utilisation de WebDriver est comment trouver des éléments sur la page. WebDriver offre un certain nombre de types de sélection intégrés, parmi lesquels la recherche d’un élément par son attribut ID :
Comme on le voit dans l’exemple, la localisation des éléments dans WebDriver se fait sur l’objet d’instanceWebDriver
. La méthode findElement(By)
renvoie un autre type d’objet fondamental, le WebElement
.
-
WebDriver
représente le navigateur -
WebElement
représente un nœud DOM particulier(un contrôle, par exemple un lien ou un champ de saisie, etc.)
Une fois que vous avez une référence à un élément web qui a été « trouvé »,vous pouvez réduire la portée de votre recherche en utilisant le même appel sur cette instance d’objet:
Vous pouvez le faire parce que les deux types WebDriver et WebElementimplémentent l’interface SearchContext. Dans WebDriver, cette interface est connue sous le nom d’interface basée sur les rôles.Les interfaces basées sur les rôles vous permettent de déterminer si une implémentation particulardriver prend en charge une fonctionnalité donnée. Ces interfaces sont clairement définies et tentent d’adhérer à un seul rôle de responsabilité. Vous pouvez en savoir plus sur la conception de WebDriver et quels rôles sont pris en charge par quels pilotes dans la section Some Other Section WhichMust Be Named.
En conséquence, l’interface By utilisée ci-dessus prend également en charge un certain nombre de stratégies de localisation supplémentaires. Une recherche imbriquée pourrait ne pas être la stratégie de localisation de fromage la plus efficace, car elle nécessite l’émission de deux commandes distinctes au navigateur ; d’abord la recherche dans le DOM d’un élément avec l’ID « cheese », puis une recherche de « cheddar » dans un contexte élargi.
Pour améliorer légèrement les performances, nous devrions essayer d’utiliser un localisateur plus spécifique : WebDriver prend en charge la recherche d’élémentspar les localisateurs CSS, ce qui nous permet de combiner les deux localisateurs précédents en une seule recherche :
Localisation de plusieurs éléments
Il est possible que le document avec lequel nous travaillons se révèle avoir une liste ordonnée du fromage que nous préférons :
<ol id=cheese> <li id=cheddar>… <li id=brie>… <li id=rochefort>… <li id=camembert>…</ol>
Puisque plus de fromage est indiscutablement meilleur, et qu’il serait encombrant de devoir récupérer chacun des éléments individuellement, une superiortechnique pour récupérer du fromage est de faire appel à la version plurielle findElements(By)
. Cette méthode renvoie une collection d’éléments Web. Si un seul élément est trouvé, elle renvoie tout de même acollection (d’un élément). Si aucun élément ne correspond au localisateur, une liste vide sera retournée.
Stratégies de sélection des éléments
Il existe huit stratégies de localisation des éléments intégrées différentes dans WebDriver :
Locator | Description |
---|---|
nom de classe | Localise les éléments dont le nom de classe contient la valeur de recherche (les noms de classe composés ne sont pas autorisés) |
sélecteur CSS | Localise les éléments correspondant à un sélecteur CSS |
id | Localise les éléments dont l’attribut ID correspond à la valeur de recherche |
name | Localise les éléments dont l’attribut NAME correspond à la valeur de recherche | lien. text | Localise les éléments d’ancrage dont le texte visible correspond à la valeur de recherche |
texte du lien partiel | Localise les éléments d’ancrage dont le texte visible contient la valeur de recherche. Si plusieurs éléments correspondent, seul le premier sera sélectionné. |
Nom de balise | Localise les éléments dont le nom de balise correspond à la valeur de recherche | xpath | Localise les éléments . correspondant à une expression XPath |
Conseils sur l’utilisation des sélecteurs
En général, si les identifiants HTML sont disponibles, uniques et prévisibles de manière cohérente, ils constituent la méthode privilégiée pour localiser un élément sur une page. Ils ont tendance à fonctionner très rapidement et à renoncer à une grande partie du traitement qui accompagne les traversées compliquées du DOM.
Si les ID uniques ne sont pas disponibles, un sélecteur CSS bien écrit est la méthode privilégiée pour localiser un élément. XPath fonctionne aussi bien que les sélecteurs CSS, mais la syntaxe est compliquée et fréquemment difficile à déboguer. Bien que les sélecteurs XPath soient très flexibles, ils ne sont généralement pas testés en termes de performances par les fournisseurs de navigateurs et ont tendance à être assez lents.
Les stratégies de sélection basées sur linkText et partialLinkText présentent des inconvénients dans la mesure où elles ne fonctionnent que sur les éléments de lien. De plus, elles font appel à des sélecteurs XPath en interne dans WebDriver.
Le nom de la balise peut être un moyen dangereux de localiser des éléments. Il y a fréquemment plusieurs éléments de la même balise présents sur la page.Cela est surtout utile lors de l’appel de la méthode findElements(By) qui renvoie une collection d’éléments.
La recommandation est de garder vos localisateurs aussi compacts et lisibles que possible. Demander à WebDriver de traverser la structure DOM est une opération coûteuse, et plus vous pouvez réduire la portée de votre recherche, mieux c’est.
Les localisateurs relatifs
Selenium 4 apporte les localisateurs relatifs qui sont précédemment appelés localisateurs amis. Cette fonctionnalité a été ajoutée pour vous aider à localiser les éléments qui sont à proximité d’autres éléments.Les localisateurs relatifs disponibles sont :
- au-dessus
- en dessous
- à gauche
- à droite
- proche
La méthodefindElement accepte désormais une nouvelle méthode withTagName()
qui renvoie un localisateur relatif.
Comment cela fonctionne
Selenium utilise la fonction JavaScriptgetBoundingClientRect()pour trouver les éléments relatifs. Cette fonction renvoie des propriétés d’un élément telles queright, left, bottom et top.
Regardons l’exemple ci-dessous pour comprendre les localisateurs relatifs.
above()
Retourne l’élément Web, qui apparaîtau-dessus de l’élément spécifié
below()
Retourne l’élément Web, qui apparaîten dessous de l’élément spécifié
toLeftOf()
Retourne le WebElement, qui apparaît à gauche de l’élément spécifié
toRightOf()
Retourne l’élément Web, qui apparaît à droite de l’élément spécifié
near()
Retourne l’élément Web, qui est au plus 50px
éloigné de l’élément spécifié.