Locator Lab

Entraînez-vous aux locators sur une page en direct

Écrivez des sélecteurs CSS, du XPath, ou des locators intégrés Playwright et voyez-les se surligner en temps réel sur la page d'entraînement — puis résolvez les défis. Tout tourne dans votre navigateur.

Locator Lab fonctionne mieux sur ordinateur

C'est un outil pratique — vous tapez des sélecteurs CSS et du XPath et les voyez se surligner sur une page d'entraînement en direct, en temps réel. Cela demande un clavier et un écran plus large qu'un téléphone.

Collez-le dans le navigateur de votre ordinateur et reprenez ici.

Aide-mémoire — cliquez un exemple pour l'essayer
Défis0 / 0
🔥 Mode difficile — fragile vs robuste0 / 0

Chaque locator fragile ci-dessous marche maintenant. Écrivez-en un qui correspond encore après que la page change, puis cliquez Tester la résilience.

▸ page d'entraînement

Une page d'entraînement pour les sélecteurs CSS et XPath, exprès

La page d'entraînement dans le cadre est un désordre délibérément réaliste : des formulaires avec labels et sans, des ids dynamiques, des tableaux imbriqués, du texte dupliqué, des icônes qui se font passer pour des boutons. C'est à ça que ressemble le DOM de production, et c'est pourquoi les locators appris sur des pages de tutoriel bien rangées s'effondrent au travail. Vous écrivez un locator, il surligne chaque correspondance en direct, et le compteur vous dit si vous avez touché exactement l'élément voulu — une correspondance, pas trois.

Les trois syntaxes qui apparaissent dans les vraies suites sont supportées : les sélecteurs CSS, les expressions XPath, et les locators intégrés de Playwright (getByRole, getByText, getByLabel et compagnie). L'aide-mémoire est cliquable, donc chaque pattern dessus peut être essayé contre la page au lieu d'être seulement lu.

Fragile contre robuste, c'est ça la vraie compétence

N'importe qui peut écrire un locator qui correspond aujourd'hui. La compétence que les entretiens sondent — et celle qui décide si votre suite survit à un refactoring d'UI — c'est en écrire un qui correspond encore après que la page change. Le mode difficile vous donne un locator fragile qui marche maintenant, mute la page, et évalue si le vôtre a survécu. C'est la différence entre div:nth-child(3) > span et un locator ancré à quelque chose qui a du sens : un rôle, un label, un attribut de données qui existe parce qu'un testeur l'a demandé.

Quand une question de locator tombe en entretien, c'est rarement « écrivez un XPath » — c'est « pourquoi ce locator est-il mauvais ? ». La banque de questions d'automatisation couvre comment ces questions sont posées et résolues ; le parcours couvre où la stratégie de locators se situe dans la montée du QA manuel au SDET. Quand vous passez le mode difficile les doigts dans le nez, mettez la compétence à l'œuvre sur un vrai exercice à la maison — le choix des sélecteurs est une des choses que les relecteurs notent.