À propos de cet outil
Un bon locator cible exactement un élément et continue de fonctionner après le prochain changement d’interface. Ce testeur vous permet de vérifier un locator sur le vrai code source d’une page avant de l’intégrer à un test Selenium, Playwright ou Cypress. Collez le HTML (depuis les DevTools, « Copy outerHTML »), saisissez une expression XPath ou un sélecteur CSS, et voyez combien d’éléments correspondent, le balisage de chacun et leur position sur un aperçu rendu. L’aperçu est une frame isolée (sandbox) avec les scripts désactivés. L’aide-mémoire présente les axes et fonctions XPath courants à côté de leurs équivalents CSS, quand il en existe.
Mode d’emploi
- Collez du HTML, ou cliquez sur « Load sample » (charger un exemple) pour un formulaire de connexion et un tableau de commandes.
- Tapez un locator. Les expressions commençant par / ou ( sont traitées comme du XPath, les autres comme du CSS ; utilisez le sélecteur pour forcer l’un ou l’autre.
- Vérifiez le nombre de correspondances : une seule correspondance est ce qu’il faut pour une cible de clic ou d’assertion.
- Cliquez sur un sélecteur de l’aide-mémoire pour l’exécuter sur l’exemple.
FAQ : Testeur de sélecteurs XPath et CSS
Faut-il utiliser des sélecteurs XPath ou CSS ?
Préférez le CSS ou les locators du framework (comme getByRole et getByTestId de Playwright) pour la rapidité et la lisibilité. Utilisez XPath quand vous avez besoin de ce que le CSS ne peut pas exprimer : cibler par texte avec normalize-space(), remonter à un ancêtre, ou sélectionner une cellule relativement à un libellé avec following-sibling::.
Pourquoi contains(@class, "btn") cible-t-il trop d’éléments ?
contains() cherche des sous-chaînes, donc il cible aussi "btn-primary" et "submit-btn". Utilisez contains(concat(' ', normalize-space(@class), ' '), ' btn ') en XPath, ou simplement .btn en CSS, pour cibler un nom de classe complet.