Sélecteurs CSS

Dans cette partie du tutoriel, nous allons découvrir les sélecteurs CSS et créer des sélecteurs CSS manuellement à l’aide de divers attributs d’éléments web HTML. Nous utilisons l’outil firebug ou l’outil developer pour obtenir les informations HTML des éléments web. Pour plus de détails sur le téléchargement et l’utilisation de l’outil firebug/developer, consultez le tutoriel – Locators in Selenium WebDriver.

Table des matières

CSS et sélecteurs CSS – introduction

CSS est l’abréviation de Cascading Style Sheets (feuilles de style en cascade), qui sont utilisées pour styliser divers éléments d’une page web HTML. Dans les fichiers .css, nous pouvons rechercher des éléments spécifiques d’une page web (fichiers .html) et les styliser, par exemple en définissant la taille de la police, la largeur, la hauteur, etc.

Nous utilisons certaines règles fournies en tant que sélecteurs CSS pour trouver les éléments web à styliser.

Par exemple, la commande suivante recherche d’abord un élément web correspondant au modèle de sélecteur « div#searchBox », puis aligne le texte qu’il contient au centre.

div#searchBox { text-align : center;}

Dans Selenium, nous pouvons utiliser ces règles/motifs de sélection CSS pour rechercher des éléments web et effectuer ensuite diverses opérations sur ceux-ci. Par exemple :

//Localisation de l’élément searchBox à l’aide d’un sélecteur CSS

WebElement searchBox = driver.findElement(By.cssSelector(« div#searchBox »)) ;

/Effectuer un clic sur l’élément

searchBox.sendKeys(« ITtester ») ;

Voyons maintenant les différentes règles de sélection CSS, leur syntaxe et des exemples d’utilisation.

Sélecteurs CSS

Vous trouverez ci-dessous la syntaxe et des exemples pour trouver les éléments nécessaires et les utiliser dans les scripts Selenium.

Utilisation de la carte d’identité

Règle de sélection CSS – #id

Pour l’exemple HTML ci-dessous

<><button id= »submitButton1″ type= »button » class= »btn » Soumettre /button>

• Localisateur CSS – #submitButton1
• Description – « #submitButton1 » sélectionne l’élément dont l’identifiant est « submitButton1 ».

Utilisation de la classe – classe

Règle de sélection CSS – .class

Pour l’exemple HTML ci-dessous

<><button id= »submitButton1″ type= »button » class= »btn » Soumettre /button>

• Localisateur CSS – .btn
• Description – ‘.btn’ sélectionne tous les éléments de la classe ‘btn’.

Utilisation d’une balise – balise

Règle de sélection CSS – nom de la balise

Pour l’exemple HTML ci-dessous

<input id= »fname » type= »text » name= »firstName » class= »textbox »>

• Localisateur CSS – entrée
• Description – « input » sélectionne tous les éléments de type input.

Utilisation des attributs et de leurs valeurs

Règle de sélection CSS – [attributeName=’attributeValue’]

Pour l’exemple HTML ci-dessous

<input id= »fname » type= »text » name= »firstName » class= »textbox »>

• Localisateur CSS – [name=’firstName’]
• [name=’firstName’] Description – sélectionne les éléments dont l’attribut name a pour valeur « firstName ».

Ces règles de base de localisation des éléments web peuvent maintenant être utilisées conjointement pour créer des localisateurs plus robustes qui sélectionneront des éléments uniques.

Utilisation de balises et d’identifiants

Règle de sélection CSS – tag#id

Pour l’exemple HTML ci-dessous

<input id= »fname » type= »text » name= »firstName » class= »textbox »>

• Localisateur CSS – input#fname
• Description – input#fname sélectionne l’élément « input » avec l’identifiant « fname ».

Utilisation de balises et de classes

Règle de sélection CSS – tag.class

Pour l’exemple HTML ci-dessous

<input id= »fname » type= »text » name= »firstName » class= »textbox »>

• Localisateur CSS – input.textbox
• Description – input.textbox sélectionne l’élément « input » avec l’identifiant « textbox ».

Utilisation des balises et des attributs

Règle de sélection CSS – balise[attributeName=’attributeValue’]

Pour l’exemple HTML ci-dessous

<input id= »fname » type= »text » name= »firstName » class= »textbox »>

• Localisateur CSS – entrée[name= firstname= » »]
• [name= firstname= » »] Description – input sélectionne l’élément « input » avec l’attribut « name » et la valeur « firstName ».

Recherche d’éléments enfants (uniquement les éléments enfants directs – enfant)

>Règle de sélection CSS – parentLocator childLocator

Pour l’exemple HTML ci-dessous

<div id= »buttonDiv » class= »small »>

<><button id= »submitButton1″ type= »button » class= »btn » Soumettre /button>

</div>

• Localisateur CSS – div#buttonDiv>button
• Description – « div#buttonDiv>button » va d’abord à l’élément div avec l’id « buttonDiv » et sélectionne ensuite son élément enfant – « button ».

Placement d’éléments à l’intérieur d’autres éléments (enfant/sous-enfant)

Règle de sélection CSS – locator1 locator2

Pour l’exemple HTML ci-dessous

<div id= »buttonDiv » class= »small »>

<><button id= »submitButton1″ type= »button » class= »btn » Soumettre /button>

</div>

• Localisateur CSS – bouton div#buttonDiv
• Description – « div#buttonDiv button » navigue d’abord vers l’élément div avec l’id « buttonDiv » et sélectionne ensuite l’élément « button » à l’intérieur de celui-ci (qui peut être son enfant ou un enfant).

nième enfant

Règle de sélection CSS – :nth-child(n)

Pour l’exemple HTML ci-dessous

<ul id= »testingTypes »>

<><li Tests d’automatisation /li>

<><li Tests de performance /li>

<><li Tests manuels /li>

</ul>

• CSS Locator – #testingTypes li:nth-child(2)
• Description – ‘#testingTypes li:nth-child(2)’ sélectionne l’élément avec l’id ‘testingType’ et en trouve 2. d’un descendant de type li, t. j. Élément de la liste « Test de performance ».

Recherche de frères et sœurs

Règle de sélection CSS – locator1+locator2

Pour l’exemple HTML ci-dessous

<ul id= »testingTypes »>

<><li id= »automation » Test d’automatisation /li>

<><li Tests de performance /li>

<><li Tests manuels /li>

</ul>

• Localisateur CSS – li#automation + li
• Description – ‘li#automation + li’ va d’abord à l’élément li avec l’id ‘automation’ et sélectionne ensuite son li voisin, t. j. Élément de la liste « Test de performance ».

Pour le traitement des éléments dynamiques dont les identifiants et autres localisateurs sont générés dynamiquement (non connus à l’avance). Nous pouvons exploiter les localisateurs ci-dessus en utilisant différentes relations parents-frères des éléments dynamiques. En outre, nous pouvons également utiliser certains localisateurs CSS spéciaux pour attribuer des valeurs d’attributs partiels.

^ – A partir de

Règle de sélection CSS – [attribute^=attributeValue]

Pour l’exemple HTML ci-dessous

<><button id= »user1_btn_263″ type= »button » class= »btn » Envoyer à /button>

• Localisateur CSS – id^= »user1″
• Description – ‘id^= »user1″ sélectionne l’élément dont l’id commence par « user1 ».

$ – Se termine en

Règle de sélection CSS – [attribute$=attributeValue]

Pour l’exemple HTML ci-dessous

<><button id= »user1_btn_263″ type= »button » class= »btn » Soumettre /button>

• Localisateur CSS – id$= »btn_263″.
• Description – ‘id$= »btn_263″ sélectionne l’élément dont l’identifiant se termine par « btn_263 ».

* – Contient

Règle de sélection CSS – [attribute*=attributeValue]

Pour l’exemple HTML ci-dessous

<><button id= »user1_btn_263″ type= »button » class= »btn » Soumettre /button>

• Localisateur CSS – id*= »btn »
• Description – « id*= »btn » » sélectionne l’élément dont l’id contient la valeur « btn »

C’est tout ce que nous avons préparé dans cet article. Le tutoriel complet sur Selenium.