Comment rechercher des éléments par sélecteur CSS dans Selenium

Les sélecteurs CSS sont un outil puissant pour localiser des éléments sur une page Web lors de l'automatisation des tests de navigateur avec Selenium. L'utilisation de sélecteurs CSS permet de cibler les éléments de manière précise et flexible. Dans ce guide complet, nous couvrirons tout ce que vous devez savoir pour devenir un pro de la recherche d'éléments par sélecteur CSS dans Selenium.

Une introduction aux sélecteurs CSS

Les sélecteurs CSS vous permettent de sélectionner des éléments HTML en fonction de l'identifiant, de la classe, de l'attribut, de la position dans l'arborescence DOM et plus encore. Voici quelques-uns des sélecteurs CSS les plus couramment utilisés :

sélecteur d'identité – Sélectionne un élément en fonction de son identifiant unique. Par exemple #main-header sélectionnera l'élément avec id="main-header".
Sélecteur de classe – Sélectionne les éléments en fonction du nom de la classe. Par exemple .article sélectionnera tous les éléments avec class="article".
Sélecteur d'attribut – Sélectionne des éléments en fonction d'un certain attribut ou d'une certaine valeur d'attribut. Par exemple input[type="text"] sélectionnera tous les éléments d'entrée avec type="text".
Sélecteur de descendants – Sélectionne les éléments qui sont les descendants d'un autre élément spécifié. Par exemple div p sélectionnera tous les éléments p à l’intérieur des éléments div.
Sélecteur d'enfant – Sélectionne les éléments qui sont des enfants directs d'un autre élément spécifié. Par exemple div > p sélectionnera p éléments qui sont des enfants directs de div.
Sélecteur de frères et sœurs adjacents – Sélectionne l’élément frère qui suit immédiatement un autre élément. Par exemple h2 + p sélectionnera l'élément p qui vient immédiatement après un élément h2.
Sélecteur général de frères et sœurs – Sélectionne tous les éléments frères qui suivent un autre élément. Par exemple h2 ~ p sélectionnera tous les éléments p qui viennent après un élément h2.

Ce ne sont là que quelques exemples des nombreux types de sélecteurs CSS. Vous pouvez combiner plusieurs sélecteurs pour cibler des éléments d'une manière très spécifique.

Recherche d'éléments par sélecteur CSS dans Selenium

Selenium propose deux méthodes principales pour rechercher des éléments à l'aide de sélecteurs CSS :

driver.find_element_by_css_selector()

Cette méthode renverra le premier élément correspondant.

element = driver.find_element_by_css_selector(‘#main-header‘)

driver.find_elements_by_css_selector()

Cette méthode renverra une liste de tous les éléments correspondants.

elements = driver.find_elements_by_css_selector(‘.article‘)

Lorsque vous utilisez ces méthodes, vous transmettez le sélecteur CSS sous forme de chaîne. Voici quelques exemples de la manière dont vous localiseriez des éléments avec différents sélecteurs :

ParId :

driver.find_element_by_css_selector(‘#signup-form‘)

Par classe :

driver.find_element_by_css_selector(‘.footer-links‘)

Par attribut :

driver.find_element_by_css_selector(‘input[name="first_name"]‘)

Descendant:

driver.find_element_by_css_selector(‘div#content p.summary‘)

Enfant:

driver.find_element_by_css_selector(‘ul.menu > li.active‘)

Frère ou sœur adjacent :

driver.find_element_by_css_selector(‘h1 + p.intro‘)

Frère/sœur général :

driver.find_element_by_css_selector(‘h2 ~ p.related-posts‘)

Comme vous pouvez le constater, les sélecteurs CSS vous offrent de nombreuses options pour cibler les éléments de différentes manières.

Conseils pour rédiger des sélecteurs CSS efficaces

Voici quelques conseils à suivre lors de l'écriture de sélecteurs CSS pour rechercher des éléments dans Selenium :

Soyez aussi précis que possible – Utilisez ensemble l’identifiant, la classe, les attributs et plusieurs sélecteurs pour cibler précisément les éléments. Cela évite les correspondances faussement positives.
Préférez la classe au nom de balise – Les noms de balises comme div, p, a, etc. ne sont pas très distinctifs. Les classes permettent un ciblage plus spécifique.
Utilisez des attributs uniques comme le nom ou le titre – Les attributs de nom et de titre ont généralement des valeurs uniques qui peuvent identifier un seul élément.
Utilisez les sélecteurs frères et sœurs avec précaution – Les sélecteurs frères et sœurs adjacents et généraux peuvent correspondre à plus d’éléments que prévu s’ils ne sont pas écrits correctement.
Évitez les sélecteurs imbriqués complexes – Le chaînage de nombreux sélecteurs descendants peut rendre les sélecteurs sujets à la rupture. Essayez de limiter chaque sélecteur à 3-4 niveaux enchaînés.
Divisez les longs sélecteurs en plusieurs lignes – les sélecteurs CSS ne doivent pas nécessairement être sur une seule ligne. Les diviser en plusieurs lignes peut améliorer la lisibilité.

Suivre ces conseils vous aidera à écrire des sélecteurs CSS robustes et maintenables pour automatiser les tests Web.

Exemples courants et cas d'utilisation

Examinons maintenant quelques exemples courants de la façon dont les sélecteurs CSS sont utilisés pour le web scraping et les tests de navigateur avec Selenium :

Sélection des liens de navigation

Pour sélectionner les principaux liens de navigation, nous pouvons utiliser un sélecteur de classe :

nav_links = driver.find_elements_by_css_selector(‘ul.main-nav > li > a‘)

Sélection des champs de formulaire

Nous pouvons sélectionner les champs de saisie du formulaire en fonction de la balise d'entrée et de l'attribut type :

username = driver.find_element_by_css_selector(‘input[type="text"][name="username"]‘)
password = driver.find_element_by_css_selector(‘input[type="password"]‘)

Sélection des lignes et des colonnes du tableau

Les sélecteurs CSS facilitent le ciblage de lignes et de cellules spécifiques dans un tableau HTML :

# Get second row 
row = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2)‘) 

# Get cell in specific row/column
cell = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2) td:nth-child(3)‘)

Sélection d'éléments enfants

Pour sélectionner uniquement les enfants div directs d'un conteneur, nous pouvons utiliser le sélecteur d'enfants :

children = driver.find_elements_by_css_selector(‘#container > div‘)

Sélection d'éléments en fonction du texte

Nous pouvons faire correspondre partiellement le texte du lien à l'aide du sélecteur * :

contact_link = driver.find_element_by_css_selector(‘a[href*="contact"]‘]

Ces exemples montrent comment les sélecteurs CSS peuvent être utilisés dans des scénarios d'automatisation de tests réels.

Utiliser des sélecteurs CSS dans d'autres langues

Jusqu'à présent, les exemples ont utilisé Python, mais les sélecteurs CSS peuvent être utilisés dans n'importe quelle liaison de langage pour Selenium :

Java

// By.cssSelector 
WebElement element = driver.findElement(By.cssSelector("div.main #login-form"));

// FindElement 
IWebElement element = driver.FindElement(By.CssSelector("div.main #login-form"));

JavaScript

// $ 
const element = await driver.$(‘div.main #login-form‘);

Quel que soit le langage que vous utilisez, les sélecteurs CSS offrent un moyen puissant et flexible de cibler des éléments.

Localisation des éléments par nom de classe

Un cas d'utilisation courant consiste à localiser des éléments par nom de classe. Voici quelques conseils pour sélectionner par classe dans Selenium :

Faites correspondre le nom exact de la classe – driver.find_element_by_class_name(‘primary-btn‘)
Utilisez un sélecteur de classe CSS – driver.find_element_by_css_selector(‘.primary-btn‘)
Correspondance partielle de plusieurs classes – driver.find_element_by_css_selector(‘.primary.btn‘)
Faire correspondre le descendant avec la classe – driver.find_element_by_css_selector(‘div .primary-btn‘)
Utilisez plusieurs classes pour l’unicité – driver.find_element_by_css_selector(‘.primary-btn.large‘)

La correspondance par nom de classe est très utile, mais assurez-vous de cibler les classes uniques sur la page.

Recherche d'éléments par nom de balise

La localisation des éléments par nom de balise HTML est une autre tâche courante de Selenium. Voici quelques exemples:

Rechercher la première instance du nom de la balise :

element = driver.find_element_by_tag_name(‘button‘)

Recherchez toutes les instances du nom de balise :

buttons = driver.find_elements_by_tag_name(‘button‘)

Combiner avec le sélecteur CSS :

submit_btn = driver.find_element_by_css_selector(‘form button[type="submit"]‘)

Puisque les noms de balises comme <div> ainsi que <span> sont courants, essayez également d'utiliser des identifiants, des classes ou des attributs pour identifier l'élément de manière unique.

Recherche d'éléments par nom ou ID

Si les éléments ont des attributs id ou name, l'option la plus simple consiste à les localiser par nom ou ID.

Rechercher par identifiant précis :

element = driver.find_element_by_id(‘signup-form‘)

Rechercher par nom exact :

element = driver.find_element_by_name(‘email‘)

Les localisateurs d'ID et de nom correspondront uniquement aux valeurs d'attribut exactes. Cela les rend très spécifiques mais également susceptibles de se briser si les identifiants ou les noms changent.

Recherche d'éléments par XPath ou CSS Selector

XPath est l'autre stratégie de localisation d'éléments commune dans Selenium. Alors, quand devriez-vous utiliser les sélecteurs XPath ou CSS ?

Voici quelques différences :

lisibilité – Les sélecteurs CSS sont plus lisibles et plus faciles à comprendre pour la plupart des développeurs.
Entretien – Les sélecteurs CSS sont moins fragiles et sujets à des modifications brutales par rapport aux XPaths longs et complexes.
Compétences – XPath peut accéder à certaines propriétés d'éléments que les sélecteurs CSS ne peuvent pas, comme le contenu du texte.
Performance – Les sélecteurs CSS sont plus rapides à faire correspondre pour les navigateurs que les XPaths complexes.

De manière générale, préférez les sélecteurs CSS pour la maintenabilité et les performances. Utilisez XPath uniquement lorsque cela est nécessaire pour accéder à quelque chose qui n'est pas possible avec CSS.

Meilleures pratiques lors de l'utilisation des sélecteurs CSS

Voici quelques bonnes pratiques à suivre lors de la localisation d'éléments avec des sélecteurs CSS :

Privilégiez l’unicité plutôt que la complexité – Évitez si possible les longues chaînes de sélecteurs imbriqués.
Utilisez les identifiants et les classes plutôt que les noms de balises et l'imbrication.
Essayez de faire correspondre 3 niveaux enchaînés ou moins – Plus de niveaux augmentent la fragilité.
Évitez les sélecteurs universels comme * – Ceux-ci sont sujets à des correspondances faussement positives.
Divisez les longs sélecteurs en plusieurs lignes – Améliore la lisibilité.
Cacher les sélecteurs couramment utilisés – Enregistre les recherches répétées de sélecteurs.
Utilisez des noms de sélecteur descriptifs – Aide à clarifier l’intention et évite les chaînes magiques.

Le respect de ces bonnes pratiques aidera à écrire des sélecteurs CSS robustes, lisibles et fiables pour l'automatisation de Selenium.

Conseils pour le débogage des sélecteurs CSS

Le débogage des sélecteurs CSS est une compétence essentielle pour l'automatisation des tests. Voici quelques conseils de dépannage :

Utilisez les outils de développement de votre navigateur pour tester les sélecteurs : Chrome DevTools fournit un inspecteur d'éléments pratique.
Imprimer et inspecter les éléments correspondants – Après l'exécution find_elements(), imprimez les résultats pour voir ce qui correspond.
Attraper NoSuchElementException – Enveloppez les recherches dans un bloc try/sauf pour détecter lorsqu'un élément n'est pas trouvé.
Générer XPath à partir de l'élément cible – De nombreux navigateurs vous permettent de copier le XPath, ce qui peut aider à créer le sélecteur CSS.
Simplifiez les sélecteurs complexes – Essayez de supprimer les attributs/classes/imbrications jusqu'à ce que le sélecteur fonctionne.
Utilisez des attentes explicites si nécessaire – Les pages dynamiques peuvent nécessiter des attentes pour que les sélecteurs soient disponibles.
Validez la précision du sélecteur – Assurez-vous que le sélecteur trouve réellement l’élément souhaité, pas n’importe quel élément.

Prendre le temps de déboguer soigneusement les sélecteurs sera payant grâce à des tests plus stables.

Conclusion

Ce guide a couvert tous les aspects clés de la localisation d'éléments par sélecteur CSS dans Selenium :

Syntaxe et types du sélecteur CSS
Utilisation avec Selenium find_element méthodes
Écriture de sélecteurs précis et maintenables
Cas d'utilisation courants et exemples
Comparaison avec XPath
Débogage et bonnes pratiques

Les sélecteurs CSS offrent un moyen puissant et flexible de cibler des éléments pour le web scraping et l'automatisation des tests. En maîtrisant les techniques présentées ici, vous pouvez écrire des scripts d'automatisation robustes et résistants aux modifications de l'interface utilisateur de l'application. Une bonne utilisation des sélecteurs CSS est une compétence indispensable pour tout ingénieur Selenium chevronné.