Comment puis-je trouver un élément par classe CSS avec XPath?

Dans ma page Web, il y a un div avec une class nommée Test .

Comment puis-je le trouver avec XPath ?

Ce sélecteur devrait fonctionner mais sera plus efficace si vous le remplacez par votre balisage adapté:

 //*[contains(@class, 'Test')] 

Ou, puisque nous soaps que l’élément recherché est un div :

 //div[contains(@class, 'Test')] 

Mais comme cela correspondra aussi à des cas comme class="Testvalue" ou class="newTest" , la version de @ Tomalak fournie dans les commentaires est meilleure :

 //div[contains(concat(' ', @class, ' '), ' Test ')] 

Si vous vouliez être certain que cela correspondrait correctement, vous pouvez également utiliser la fonction normaliser les espaces pour nettoyer les caractères d’espaces blancs autour du nom de la classe (comme mentionné par @Terry):

 //div[contains(concat(' ', normalize-space(@class), ' '), ' Test ')] 

Notez que dans toutes ces versions, le * devrait être remplacé par le nom de l’élément que vous souhaitez faire correspondre, à moins que vous ne souhaitiez rechercher chaque élément du document pour la condition donnée.

Moyen le plus simple ..

 //div[@class="Test"] 

En supposant que vous voulez trouver

comme décrit.

Je ne fais que fournir une réponse, comme Tomalak l’a fait il y a longtemps à propos de la réponse de meder

 //div[contains(concat(' ', @class, ' '), ' Test ')] 

La seule façon correcte de le faire avec XPath:

 //div[contains(concat(" ", normalize-space(@class), " "), " Test ")] 

La fonction normalize-space supprime les espaces avant et arrière, et remplace également les séquences d’espaces par un seul espace.


Remarque

Si vous n’avez pas besoin de beaucoup de ces requêtes Xpath, vous pouvez utiliser une bibliothèque qui convertit les sélecteurs CSS en XPath, car les sélecteurs CSS sont généralement beaucoup plus faciles à lire et à écrire que les requêtes XPath. Par exemple, dans ce cas, vous pouvez utiliser à la fois div[class~="foo"] et div.foo pour obtenir le même résultat.

Quelques bibliothèques que j’ai pu trouver:

  • Pour JavaScript : css2xpath & css-to-xpath
  • Pour PHP : Composant CssSelector
  • Pour Python : cssselect
  • Pour C # : css2xpath Reloaded
  • Pour GO : css2xpath

Une fonction utile peut être faite à partir des réponses précédentes:

 function matchClass($className) { return "[contains(concat(' ', normalize-space(@class), ' '), ' $className ')]"; } 

Il suffit ensuite de concaténer l’appel de fonction dans votre requête.

vous pouvez trouver des éléments comme cet exemple (tous les éléments css)

 private By allElementsCss = By.xpath(".//div[@class]");