Sélecteur CSS dans Selenium

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

Les sélecteurs CSS dans Selenium sont des modèles de chaînes utilisés pour identifier un élément en fonction d'une combinaison de balise HTML, d'identifiant, de classe et d'attributs. La localisation par les sélecteurs CSS dans Selenium est plus compliquée que les méthodes précédentes, mais il s'agit de la stratégie de localisation la plus courante des utilisateurs avancés de Selenium, car elle peut accéder même aux éléments qui n'ont ni identifiant ni nom.

Les sélecteurs CSS dans Selenium ont de nombreux formats, mais nous nous concentrerons uniquement sur les plus courants. Les différents types de localisateur CSS dans Selenium IDE

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

Lorsque nous utilisons cette stratégie, nous préfixons toujours la cible box avec "css=" comme cela sera montré dans la suitewing exemples.

balise et identifiant – Sélecteur CSS

Encore une fois, nous utiliserons le E de Facebookmail texte box dans cet exemple. Comme vous vous en souvenez, son identifiant est « email», et nous y avons déjà accédé dans la section « Localisation par ID ». Cette fois, nous utiliserons un sélecteur CSS Selenium avec ID pour accéder à ce même élément.

Syntaxe

css=tag#id

  • tag = la balise HTML de l'élément auquel on accède
  • # = le signe dièse. Cela devrait toujours être présent lors de l'utilisation d'un sélecteur CSS Selenium 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 de Firebug, examinez le « Email ou Téléphone" texte box.

À ce stade, notez que la balise HTML est « input » et son ID est « e ».mail». Notre syntaxe sera donc « css=input#email ».

Balise et identifiant - Sélecteur CSS

Étape 2) Entrez «css=input#email" dans la cible box de Selenium IDE et cliquez sur le bouton Rechercher. Selenium IDE devrait être capable de mettre en évidence cet élément.

Balise et identifiant - Sélecteur CSS

balise et classe – Sélecteur CSS

Le sélecteur CSS dans Selenium utilisant une balise HTML et un nom de classe est similaire à l'utilisation d'une balise et d'un identifiant, mais dans ce cas, un point (.) est utilisé à la place d'un signe dièse.

Syntaxe

css=tag.class

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

Étape 1) Accédez à la page de démonstration http://demo.guru99.com/test/facebook.html et utilisez Firebug pour inspecter le "Email ou Téléphone" texte box. Notez que sa balise HTML est « input » et sa classe est « inputtext ».

Balise et classe - Sélecteur CSS

Étape 2) Dans Selenium IDE, entrez «css=input.inputtext» dans le champ Target box et cliquez sur Rechercher. Selenium IDE devrait être capable de reconnaître le Email ou SMS du téléphone box.

Balise et classe - Sélecteur CSS

Notez que lorsque plusieurs éléments ont la même balise HTML et le même nom, seul le premier élément du code source sera reconnu.. À l'aide de Firebug, inspectez le texte du mot de passe box sur Facebook et remarquez qu'il porte le même nom que le Email ou SMS du téléphone box.

Balise et classe - Sélecteur CSS

La raison pour laquelle seul le Email ou SMS du téléphone box a été souligné dans l'illustration précédente, c'est qu'il apparaît en premier dans la source de la page Facebook.

Balise et classe - Sélecteur CSS

balise et attribut – Sélecteur CSS

Cette stratégie utilise la balise HTML et un attribut spécifique de l'élément auquel accéder.

Syntaxe

css=tag[attribute=value]

  • tag = la balise HTML de l'élément auquel on accède
  • [ et ] = carré brackets dans lequel un attribut spécifique et sa valeur correspondante seront placés
  • attribut = l'attribut à utiliser. Il est conseillé d'utiliser un attribut unique à l'élément tel qu'un nom ou un identifiant.
  • value = la valeur correspondante de l'attribut choisi.

Étape 1) Accédez à la page d'inscription de Mercury Tours http://demo.guru99.com/test/newtours/register.php et inspectez le texte « Nom de famille » box. Notez sa balise HTML (« input » dans ce cas) et son nom (« lastName »).

Balise et attribut - Sélecteur CSS

Étape 2) Dans Selenium IDE, entrez «css=input[name=lastName]» dans le champ Target box et cliquez sur Rechercher. Selenium IDE devrait pouvoir accéder au nom de famille box avec succès.

Balise et attribut - Sélecteur CSS

Lorsque plusieurs éléments ont la même balise et le même attribut HTML, seul le premier sera reconnu. Ce comportement est similaire à la localisation d'éléments à l'aide de sélecteurs CSS avec la même balise et la même classe.

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 signe point. Cela devrait toujours être présent lors de l'utilisation d'un sélecteur CSS avec classe
  • class = la classe de l'élément auquel on accède
  • [ et ] = carré brackets dans lequel un attribut spécifique et sa valeur correspondante seront placés
  • attribut = l'attribut à utiliser. Il est conseillé d'utiliser un attribut unique à l'élément tel qu'un nom ou un identifiant.
  • value = la valeur correspondante de l'attribut choisi.

Étape 1) Accédez à la page de démonstration http://demo.guru99.com/test/facebook.html et utilisez Firebug pour inspecter le 'Email ou Saisie du téléphone et du mot de passe boxes. Prenez note de leur balise HTML, de leur classe et de leurs attributs. Pour cet exemple, nous sélectionnerons leurs attributs 'tabindex'.

Balise, classe et attribut - Sélecteur CSS

Étape 2) Nous accéderons au 'Email ou SMS du téléphone box d'abord. Ainsi, nous utiliserons une valeur tabindex de 1. Entrez « css=input.inputtext[tabindex=1] » dans la cible de Selenium IDE. box et cliquez sur Rechercher. Le 'Email ou entrée du téléphone box doit être mis en évidence.

Balise, classe et attribut - Sélecteur CSS

Étape 3) Pour accéder à la saisie du mot de passe box, remplacez simplement la valeur de l'attribut tabindex. Entrez «css=input.inputtext[tabindex=2]» dans la cible box et cliquez sur le bouton Rechercher. Selenium IDE doit être capable d'identifier le texte du mot de passe box avec succès.

Balise, classe et attribut - Sélecteur CSS

texte intérieur – Sélecteur CSS

Comme vous l'avez peut-être remarqué, les étiquettes HTML reçoivent rarement des attributs d'identification, de nom ou de classe. Alors, comment y accéder ? La réponse passe par l’utilisation de leurs textes intérieurs. Les textes internes sont les modèles de chaîne réels 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 texte intérieur de l'élément

Étape 1) Accédez à la page d'accueil de Mercury Tours http://demo.guru99.com/test/newtours/ et utilisez Firebug pour enquêter sur l'étiquette « Mot de passe ». Prenez note de sa balise HTML (qui est « font » dans ce cas) et notez qu'elle n'a aucun attribut de classe, d'identifiant ou de nom.

Texte intérieur - Sélecteur CSS

Étape 2) Type css=font:contains("Mot de passe:") dans la cible de Selenium IDE box et cliquez sur Rechercher. Selenium IDE devrait pouvoir accéder à l'étiquette de mot de passe, comme indiqué dans l'image ci-dessous.

Texte intérieur - Sélecteur CSS

Étape 3) Cette fois, remplacez le texte intérieur par « Boston » afin que votre cible devienne désormais « css=font:contains(« Boston ») ». Cliquez sur Rechercher. Vous devriez remarquer que le trajet « Boston to San Francisco"L'étiquette devient mise en surbrillance. Cela vous montre que Selenium IDE peut accéder à une longue étiquette même si vous venez d'indiquer le premier mot de son texte intérieur.

Texte intérieur - Sélecteur CSS

Résumé

Syntaxe de localisation par utilisation du sélecteur CSS

Method Syntaxe cible 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.classattribute=valeur] css=input.inputtext[tabindex=1]