Sélecteur CSS dans Selenium

Par : Krishna Rungta Krishna Rungta
Hours Le kit de préparation mis à jour

⚡ Résumé intelligent

Sélecteur CSS dans Selenium Il s'agit d'une stratégie de localisation puissante qui identifie les éléments à l'aide des balises HTML, des identifiants, des classes, des attributs et des modèles de texte internes. Cette ressource explique chaque type de sélecteur CSS avec des exemples détaillés. Selenium IDE

  • 🆔 Étiquette et identifiant : Combinez une balise HTML avec le préfixe # pour cibler précisément les éléments possédant un attribut ID unique.
  • (I.e. Étiquette et classe : Utilisez la syntaxe du point (.) pour localiser les éléments partageant une classe CSS, utile pour les composants d'interface utilisateur répétés.
  • 🧩 Balise et attribut : Utilisez les crochets [attribute=value] pour identifier les éléments par leur nom, leur type ou toute paire d'attributs personnalisée.
  • 🪜 Étiquette, classe et attribut : Combinez plusieurs conditions pour lever l'ambiguïté des éléments qui partagent à la fois des noms de classe et des valeurs d'attribut.
  • 🔤 Correspondance du texte interne : Utilisez le modèle :contains(“text”) pour localiser les étiquettes et les éléments dépourvus d'identifiants, de noms ou de classes.
  • ✅ Meilleure pratique : Privilégiez les identifiants stables aux sélecteurs profondément imbriqués pour conserver Selenium Scripts d'automatisation résistants aux modifications de l'interface utilisateur.
En savoir plus

Sélecteur CSS dans Selenium

Qu'est-ce qu'un sélecteur CSS ? Selenium?

A Sélecteur CSS dans Selenium Un sélecteur CSS est une chaîne de caractères qui identifie un élément web grâce à une combinaison de balise HTML, d'identifiant (id), de classe (class) et d'attributs. Les sélecteurs CSS sont légèrement plus complexes que la recherche par identifiant ou par nom, mais ils restent la méthode la plus courante chez les développeurs expérimentés. Selenium les utilisateurs car ils peuvent accéder à des éléments qui ne possèdent aucun attribut ID ou Name.

Sélecteurs CSS dans Selenium Elles se présentent sous de nombreuses formes, mais ce guide se concentre sur les cinq motifs les plus courants utilisés dans Selenium ICI:

  • Étiquette et identifiant
  • Balise et classe
  • Balise et attribut
  • Balise, classe et attribut
  • Texte intérieur

Lorsque l'on utilise cette stratégie dans Selenium IDE, toujours préfixer le Target boîte avec «css=« comme le démontrent tous les exemples ci-dessous. »

Pourquoi utiliser les sélecteurs CSS dans Selenium?

Les sélecteurs CSS sont la stratégie de localisation privilégiée pour de nombreuses applications. Selenium Les ingénieurs en automatisation les apprécient car ils offrent un bon équilibre entre rapidité, flexibilité et lisibilité. Les applications web modernes utilisent souvent des identifiants générés dynamiquement ou suppriment complètement les attributs de nom, ce qui fait des sélecteurs CSS le seul moyen fiable de cibler un élément spécifique sur la page.

Les principaux avantages de l'utilisation des sélecteurs CSS sont les suivants :

  • Performance : Les sélecteurs CSS sont traités par le moteur natif du navigateur, ils s'exécutent donc plus rapidement que les expressions XPath équivalentes, notamment dans les navigateurs plus anciens comme Internet Explorer.
  • Flexibilité: Ils combinent la logique des balises, des classes, des attributs et des correspondances partielles, permettant aux testeurs de cibler les éléments qui n'ont pas d'identifiant stable.
  • Lisibilité: La syntaxe reflète la façon dont les développeurs écrivent déjà les règles CSS, ce qui raccourcit la courbe d'apprentissage pour les ingénieurs QA et les équipes front-end.
  • Stabilité multiplateforme : Les sélecteurs CSS se comportent de manière cohérente sur Chrome. Firefox, Edge et Safari, réduisant ainsi les échecs de tests instables.

Balise et ID – Sélecteur CSS

Cet exemple utilise le champ de texte Email de la page de connexion Facebook. L'élément a un ID de «en nous envoyant un mail« », et il était déjà accessible dans la section « Localisation par ID ». Maintenant, le même élément est ciblé à l’aide d’un Selenium Sélecteur CSS avec l'attribut ID.

Syntaxe

css=tag#id

  • tag = la balise HTML de l'élément auquel on accède
  • # = le symbole dièse, qui doit toujours être présent lors de l'utilisation d'un Selenium Sélecteur CSS avec ID
  • id = l'ID de l'élément auquel on accède

Gardez à l'esprit que l'ID est toujours précédé d'un signe dièse (#).

Étape 1) Accédez à www.facebook.com. À l'aide des outils de développement de votre navigateur (ou d'un outil plus ancien comme Firebug), inspectez la zone de texte « Adresse e-mail ou numéro de téléphone ».

Remarquez que la balise HTML est «contribution« » et son identifiant est « »en nous envoyant un mailLe sélecteur CSS complet devient donc « ».css=entrée#email" .

Balise et identifiant - Sélecteur CSS dans Selenium

Étape 2) Entrer "css=entrée#email" dans le Target boîte de Selenium IDE et cliquez sur le bouton Rechercher. Selenium L'IDE met en évidence l'élément correspondant sur la page.

Selenium L'IDE met en évidence le champ Email via une balise et un ID

Balise et classe – Sélecteur CSS

Un sélecteur CSS dans Selenium qui utilise une balise HTML et un nom de classe suit la même idée que la balise et l'ID, mais un point (.) remplace le signe dièse.

Syntaxe

css=tag.class

  • tag = la balise HTML de l'élément auquel on accède
  • . = le point, qui doit toujours être présent lors de l'utilisation d'un sélecteur CSS avec une classe
  • class = la classe de l'élément auquel on accède

Étape 1) Ouvrir la page de démonstration https://demo.guru99.com/test/facebook.html et examinez le champ de texte « Courriel ou téléphone ». Notez que la balise HTML est « contribution» et sa classe est «texte d'entrée" .

Balise et classe - Sélecteur CSS Selenium

Étape 2) In Selenium IDE, entrez «css=input.inputtext"Dans le Target case et cliquez sur Rechercher. Selenium L'IDE reconnaît la zone de texte Email ou Téléphone.

Selenium IDE localisant un élément par balise et classe

Notez que lorsque plusieurs éléments partagent la même balise HTML et la même classe, seul le premier élément correspondant dans le code source est reconnu. Examinez le champ de texte « Mot de passe » sur la même page et remarquez qu'il appartient à la même classe que le champ de texte « Adresse e-mail » ou « Numéro de téléphone ».

Plusieurs éléments partageant la même balise et la même classe

Seul le champ de texte « Adresse e-mail ou numéro de téléphone » était mis en évidence dans l'illustration précédente, car il apparaît en premier dans le code source de la page.

Détermination de l'ordre du code source de la page Selenium rencontre

Balise et attribut – Sélecteur CSS

Cette stratégie combine une balise HTML avec un attribut spécifique appartenant à l'élément auquel vous souhaitez accéder.

Syntaxe

css=tag[attribute=value]

  • tag = la balise HTML de l'élément auquel on accède
  • [ et ] = crochets qui encadrent l'attribut et sa valeur correspondante
  • attribut = l'attribut à utiliser. Choisissez-en un qui soit unique à l'élément, comme nom ou id.
  • value = la valeur correspondante de l'attribut choisi.

Étape 1) Accédez à la Mercury Page d'inscription aux visites https://demo.guru99.com/test/newtours/register.php Examinez ensuite le champ de texte « Nom de famille ». Notez sa balise HTML (« input ») et son attribut name (« lastName »).

Balise et attribut - Sélecteur CSS Selenium

Étape 2) In Selenium IDE, entrez «css=input[nom=nom]"Dans le Target case et cliquez sur Rechercher. Selenium L'IDE localise avec succès le champ Nom de famille.

Selenium IDE localisant le nom de famille via un attribut

Lorsque plusieurs éléments partagent la même balise HTML et le même attribut, seul le premier est reconnu. Le comportement est identique à celui obtenu en localisant des éléments ayant la même étiquette et la même classe.

ARTICLES LIÉS

Balise, classe et attribut – Sélecteur CSS

Syntaxe

css=tag.class[attribute=value]

  • tag = la balise HTML de l'élément auquel on accède
  • . = le point, qui doit toujours être présent lors de l'utilisation d'un sélecteur CSS avec une classe
  • class = la classe de l'élément auquel on accède
  • [ et ] = crochets qui encadrent un attribut spécifique et sa valeur correspondante
  • attribut = l'attribut à utiliser. Choisissez-en un qui soit unique à l'élément, comme nom ou id.
  • value = la valeur correspondante de l'attribut choisi.

Étape 1) Ouvrir la page de démonstration https://demo.guru99.com/test/facebook.html et examinez les champs de saisie « Adresse e-mail ou numéro de téléphone » et « Mot de passe ». Notez leur balise HTML, leur classe et leurs attributs. Cet exemple utilise le « tabindex" attribut.

Balise, classe et attribut - Sélecteur CSS

Étape 2) Accédez d'abord à la zone de texte « Courriel ou téléphone » en utilisant une valeur d'index de tabulation de 1. Saisissez « css=input.inputtext[tabindex=1]"Dans Selenium IDE Target Cochez la case et cliquez sur Rechercher. Le champ Adresse électronique ou Téléphone est mis en surbrillance.

Selenium IDE localisant les e-mails par étiquette, classe ou attribut

Étape 3) Pour cibler le champ de saisie du mot de passe, il suffit de remplacer la valeur de tabindex. Saisissez «css=input.inputtext[tabindex=2]"Dans le Target case et cliquez sur Rechercher. Selenium L'IDE localise correctement la zone de texte du mot de passe.

Selenium IDE localisant le mot de passe par étiquette, classe, attribut

Texte interne – Sélecteur CSS

Les étiquettes HTML sont rarement dotées d'attributs id, name ou class. Comment y accéder alors ? SeleniumLa réponse se trouve dans leur texte interne. Les textes internes correspondent aux chaînes de caractères que l'étiquette HTML affiche sur la page.

Syntaxe

css=tag:contains("inner text")

  • tag = la balise HTML de l'élément auquel on accède
  • texte intérieur = le contenu textuel visible de l'élément

Étape 1) Accédez à la Mercury Page d'accueil des visites https://demo.guru99.com/test/newtours/ Examinez ensuite l’étiquette « Mot de passe ». Notez sa balise HTML (« font » dans ce cas) et observez que l’élément ne possède aucun attribut class, id ou name.

Texte interne - Inspection des sélecteurs CSS

Étape 2) Type css=font:contains("Mot de passe:") développement Selenium IDE Target case et cliquez sur Rechercher. Selenium L'IDE localise l'étiquette Mot de passe comme indiqué ci-dessous.

Selenium IDE localisant l'étiquette du mot de passe par le texte interne

Étape 3) Cette fois, remplacez le texte intérieur par « Boston » afin que Target devient «css=font:contains(“Boston”)Cliquez sur Rechercher. L'étiquette « Boston à San Francisco » est mise en évidence, ce qui démontre que Selenium L'IDE peut localiser une étiquette longue même lorsque seul le premier mot de son texte interne est fourni.

Selenium Correspondance partielle de texte interne IDE

Sélecteur CSS vs XPath dans Selenium

Les sélecteurs CSS et XPath sont tous deux utilisés pour identifier les éléments web. SeleniumElles présentent néanmoins des atouts différents. Le tableau ci-dessous compare les deux stratégies de localisation selon des critères clés :

Critères Sélecteur CSS XPath
Speed Plus rapide, s'exécute sur le moteur natif du navigateur Plus lent, surtout sur les navigateurs plus anciens
Direction Transmission uniquement (de parent à enfant) En avant et en arrière (de l'enfant au parent)
Syntaxe Plus court et similaire aux règles CSS Expressions de chemin hiérarchiques plus longues
Correspondance de texte Limité à la pseudo-classe :contains() Fonctions text() et contains() fortes
Meilleur pour Mises en page statiques et applications web modernes Parcours DOM complexes et localisateurs textuels

Meilleures pratiques pour l'écriture de sélecteurs CSS Selenium

Écrire des sélecteurs CSS fiables ne se limite pas à connaître la syntaxe. Les pratiques suivantes aident les testeurs à créer des sélecteurs stables et maintenables. Selenium Scripts qui survivent aux modifications de l'interface utilisateur :

  1. Privilégier les attributs uniques : Choisissez toujours les attributs id, data-test-id ou name ajoutés explicitement pour l'automatisation. Ils restent stables même en cas de modification de la mise en page.
  2. Évitez les sélecteurs trop imbriqués : De longues chaînes telles que div > div > ul > li > a Le code est fragile et peut se casser facilement lors des refactorisations. Il est donc conseillé de limiter la longueur des sélecteurs.
  3. Utilisez judicieusement les correspondances partielles : Des modèles tels que [class*="btn-primary"] tolèrent les petites modifications de noms de classes, mais celles-ci peuvent également correspondre à des éléments non prévus.
  4. Évitez les localisateurs basés sur l'index : Sélecteurs comme nth-child(3) sont fragiles car l'ajout d'un élément frère décale toutes les positions.
  5. Valider les sélecteurs dans les outils de développement : Avant d'exécuter un Selenium Dans le script, collez le sélecteur dans la console des outils de développement Chrome en utilisant document.querySelector() pour confirmer qu'elle renvoie exactement un élément.
  6. Combiner les attributs pour créer l'unicité : Lorsqu'une classe est partagée par plusieurs éléments, ajoutez un filtre d'attribut tel que : input.form-control[name="email"] pour lever toute ambiguïté concernant la cible.
  7. Documenter et réutiliser : Centralisez les sélecteurs dans une classe Page Object afin qu'une seule mise à jour corrige tous les tests faisant référence au même élément.

Le respect de ces consignes réduit l'instabilité, améliore la vitesse d'exécution des tests et rend Selenium des suites plus faciles à entretenir au fil du temps.

Résumé : Guide rapide de la syntaxe des sélecteurs CSS

Le tableau ci-dessous récapitule tous les éléments. Selenium Modèles de sélecteurs CSS abordés dans ce guide :

Méthode Target Syntaxe Exemple
Étiquette et identifiant css=tag#id css=entrée#email
Balise et classe css = tag.class css=input.inputtext
Balise et attribut css=balise[attribut=valeur] css=input[nom=nom]
Balise, classe et attribut css=tag.class[attribut=valeur] css=input.inputtext[tabindex=1]
Texte intérieur css=tag:contains(“texte”) css=font:contains("Mot de passe:")

FAQ

Oui. Les sélecteurs CSS s'exécutent généralement plus rapidement que XPath car les navigateurs traitent les règles CSS nativement. La différence est plus marquée dans les anciennes versions d'Internet Explorer, tandis que les navigateurs modernes comme Chrome et Firefox réduire l'écart.

Oui. Sélecteurs CSS écrits pour Selenium L'IDE fonctionne directement dans Selenium WebDriver via By.cssSelector()La seule différence est que WebDriver n'exige pas le préfixe « css= », puisque le type de localisateur est spécifié par la méthode elle-même.

Non. Firebug a été abandonné en 2017 après sa fusion avec Firefox Outils de développement. Aujourd'hui, les testeurs utilisent les outils de développement intégrés à Chrome. Firefox, ou Edge pour inspecter les éléments et valider les sélecteurs CSS avant de les ajouter à Selenium scripts.

Oui. Des outils basés sur l'IA tels que TestimMabl et ChatGPT peuvent suggérer des sélecteurs CSS en analysant le DOM. Ils réduisent les efforts de maintenance en adaptant les sélecteurs lorsque les développeurs renomment des classes ou restructurent la page.

Les moteurs d'auto-réparation pilotés par l'IA analysent le DOM environnant et corrigent automatiquement les erreurs de localisation. En cas de défaillance d'un sélecteur CSS, le moteur identifie l'élément le plus proche en se basant sur la similarité des attributs, le contenu textuel et l'historique des modèles, rétablissant ainsi la stabilité des tests.

Utilisez des modèles de correspondance partielle tels que [id^="user_"] pour les préfixes, [id$="_btn"] pour les suffixes, ou [id*="cart"] pour les sous-chaînes. Ces modèles correspondent à des identifiants générés dynamiquement sans nécessiter de valeur exacte.

Les sélecteurs CSS ne permettent pas de remonter d'un élément enfant à son parent et offrent une prise en charge limitée de la correspondance de texte. Dans ces cas, XPath reste la meilleure option. De plus, CSS ne propose pas de fonctions intégrées pour la logique de frères et sœurs, au-delà des frères adjacents et des frères et sœurs généraux.

Ouvrez les outils de développement du navigateur, accédez à l'onglet Console et exécutez la commande suivante : document.querySelectorAll("your-selector")La NodeList renvoyée affiche tous les éléments correspondants. Une méthode fiable Selenium Le localisateur doit renvoyer exactement un élément pour un ciblage unique.

Résumez cet article avec :