Qu’est-ce qu’un sélecteur CSS en test ? Définition

Sélecteur CSS

En anglais : CSS selector

Également appelé : sélecteurs CSS, locator CSS, CSS locator

Définition

Un motif du langage CSS qui cible des éléments par balise, id, classe, attribut ou position, très utilisé comme locator rapide et lisible dans les tests d’UI.

Un sélecteur CSS est le même motif qu’une feuille de style utilise pour décider à quels éléments une règle s’applique. Les outils de test le réutilisent pour trouver des éléments : Selenium via By.cssSelector, Playwright via page.locator(), Cypress via cy.get(). Les sélecteurs sont évalués nativement par le navigateur, sont généralement plus courts que l’équivalent XPath, et la plupart des développeurs front-end savent les lire.

Exemple

#email                          id
.alert.alert-error              element with both classes
button[type="submit"]           tag plus attribute
[data-testid="checkout"]        dedicated test attribute
form.login > button             direct child
ul.results li:nth-child(2)      second list item
a[href^="/invoices/"]           attribute starts with
input:not([disabled])           negation

driver.findElement(By.cssSelector("[data-testid='checkout']")).click();

await page.locator('[data-testid="checkout"]').click();

Différence avec XPath

Correspondance sur le texte. Le CSS standard ne peut pas sélectionner selon le contenu textuel. XPath le peut, et Playwright ajoute ses propres moteurs de texte (getByText, et la pseudo-classe :has-text() dans page.locator()), mais ce sont des extensions de Playwright, pas du CSS.
Direction. Pendant des années, CSS ne pouvait descendre que vers les enfants. La pseudo-classe :has(), désormais prise en charge par les navigateurs actuels, permet de cibler un parent par ses enfants (tr:has(td.overdue)), ce qui comble une grande partie de l’écart.
Lisibilité. Pour cibler un id, une classe ou un attribut, CSS est plus court et plus clair.

Erreurs courantes

Utiliser des classes de style comme locators. .btn-blue change quand le design change. Les frameworks à classes utilitaires aggravent le problème.
De longues chaînes structurelles. div > div > div:nth-child(3) span encode la mise en page et casse dès qu’un conteneur est ajouté.
Confondre :nth-child et :nth-of-type. li:nth-child(2) signifie « un li qui est le deuxième enfant de son parent », et non « le deuxième li ».

Quand vous maîtrisez le balisage, un attribut data-testid convenu avec les développeurs est le locator CSS le plus stable. Sinon, préférez les locators basés sur les rôles lorsque le framework en propose.