web-dev-qa-db-fra.com

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

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

Comment puis-je le trouver avec XPath?

253
Strawberry

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

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

Ou, puisque nous savons que l'élément recherché est un div:

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

Mais puisque cela correspond également à 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 souhaitez vraiment être sûr qu'il correspondra correctement, vous pouvez également utiliser la fonction normaliser-espace pour nettoyer les caractères d'espacement 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 réellement faire correspondre, à moins que vous ne souhaitiez rechercher chaque élément du document pour la condition donnée.

412
meder omuraliev

Le moyen le plus facile ..

//div[@class="Test"]

En supposant que vous souhaitiez trouver <div class="Test"> comme décrit.

133
Olli Puljula

Je ne fais que donner ceci comme réponse, comme Tomalak l'a commentée dans la réponse de meder il y a longtemps

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

La SEULEMENT bonne façon de le faire avec XPath:

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

La fonction normalize-space supprime les espaces de début et de fin et remplace également les séquences de caractères d’espacement 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 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.

Certaines bibliothèques que j'ai pu trouver:

18
John Slegers

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

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

Ensuite, concattez simplement l'appel de fonction dans votre requête.

1
Carcigenicate