Exemples de sélecteurs CSS Selenium

La localisation des éléments par des sélecteurs CSS est la méthode préférée car elle est plus rapide et plus lisible que XPath.

Ce didacticiel fournit des exemples de localisation d'éléments Web dans Selenium à l'aide de sélecteurs CSS.



Sélecteurs CSS par attribut

Imaginons que nous ayons une balise avec les attributs suivants [id, class, name, value]


La manière générique de localiser les éléments par attribut est:

css = element_name[='']

Exemple:


WebElement firstName = driver.findElement(By.cssSelector('input[name='first_name']'));

Attribut d'identifiant

En CSS, nous pouvons utiliser # notation pour sélectionner le id attribut d'un élément:

Exemple:

driver.findElement(By.cssSelector('input#firstname')); //or driver.findElement(By.cssSelector('#firstname'));

Attribut de classe

Le même principe peut être utilisé pour localiser des éléments par leur class attribut.

Nous utilisons le . notation.


driver.findElement(By.cssSelector('input.myForm')); //or driver.findElement(By.cssSelector('.myForm')); Noter:Faites très attention lorsque vous utilisez le . notation car il pourrait y avoir de nombreux éléments Web sur la source HTML avec le même attribut de classe.

Attributs multiples

Parfois, il est nécessaire d'être plus précis avec les critères de sélection afin de localiser l'élément correct.

La valeur de l'affichage pourrait être «aucun» ou «bloquer» selon l'appel ajax. Dans cette situation, nous devons localiser l'élément à la fois par classe et par style.

Exemple:

driver.findElement(By.cssSelector('div[class='ajax_enabled'] [style='display:block']'));

L'attribut NE contient PAS de valeur spécifique

Dans WebDriver, comment trouver les éléments dont l’attribut contient des valeurs que vous ne souhaitez pas sélectionner? Cet exemple de sélecteur CSS montre comment NE PAS sélectionner par valeur d'attribut spécifique


Supposons que vous ayez de nombreux éléments qui partagent le même attribut et la même valeur d'attribut, mais que certains de ces éléments ont d'autres variables ajoutées à la valeur. par exemple:

Dans l'extrait ci-dessus, nous voulons sélectionner un jour disponible (c'est-à-dire les deux derniers éléments div)

Comme on peut le voir, les quatre divs contiennent 'calendar-day-' mais les deux premiers contiennent également 'indisponible' dont nous ne voulons pas.

Le sélecteur CSS pour ne pas sélectionner les deux premiers divs est


driver.findElement(By.cssSelector('div[class*=calendar-day-]:not([class*='unavailable'])'));'

Localisation de l'élément enfant

Pour localiser la balise d'image, nous utilisons:

driver.findElement(By.cssSelector('div#logo img'));

Éléments enfants multiples

Il y a des occasions où il y a plusieurs éléments enfants dans le même élément parent, tels que des éléments de liste


  • Apple

  • Orange

  • Banana

Comme on peut le voir, les éléments individuels de la liste ne sont associés à aucun identifiant. Pour localiser l’élément avec le texte «Orange», nous devons utiliser nth-of-type.

Exemple:


driver.findElement(By.cssSelector('ul#fruit li:nth-of-type(2)'));

De même, pour sélectionner le dernier élément enfant, à savoir 'Banana', nous utilisons:

driver.findElement(By.cssSelector('ul#fruit li:last-child'));

Ids générés dynamiquement

Nous pouvons utiliser des matchers de chaîne pour localiser des éléments avec des identifiants générés dynamiquement.

Dans cet exemple, les trois éléments div contiennent le mot «random».

L'attribut commence par

Pour sélectionner le premier div élément, nous utiliserions ^= qui signifie «commence par»:

driver.findElement(By.cssSelector('div[id^='123']'));

L'attribut se termine par

Pour sélectionner le second div élément, nous utiliserions $= qui signifie «se termine par»:

driver.findElement(By.cssSelector('div[id$='456']'));

L'attribut contient

Pour sélectionner le dernier div élément que nous utiliserions *= qui signifie «sous-chaîne»

driver.findElement(By.cssSelector('div[id*='_pattern_']'));

Nous pouvons également utiliser le contains

driver.findElement(By.cssSelector('div:contains('_pattern_')'));

Lectures complémentaires: