Menu

Comment utiliser le sélecteur CSS pour identifier les éléments Web pour les scripts Selenium - Tutoriel Selenium # 6

  • Principal
  • Test D'automatisation
  • Comment utiliser le sélecteur CSS pour identifier les éléments Web pour les scripts Selenium - Tutoriel Selenium # 6

how use css selector

Essayez Notre Instrument Pour Éliminer Les Problèmes

Dans notre précédent tutoriel Selenium , nous avons appris différents types de localisateurs. Nous avons également appris à utiliser les localisateurs: ID, ClassName, Name, Link Text et XPath pour identifier les éléments Web sur une page Web.

Dans la continuité de cela, aujourd'hui nous apprendrons comment utiliser le sélecteur CSS comme localisateur . Ceci est notre 6ème tutoriel dans notre série gratuite de formation Selenium .

Utilisation du sélecteur CSS comme localisateur:

Le sélecteur CSS est la combinaison d'un sélecteur d'élément et d'une valeur de sélecteur qui identifie l'élément Web dans une page Web. Le composite d'un sélecteur d'élément et d'une valeur de sélecteur est appelé modèle de sélecteur.

Sélecteur CSS Selenium Locator

Le modèle de sélecteur est construit à l'aide de balises HTML, d'attributs et de leurs valeurs. Le thème central derrière la procédure de création de CSS Selector et Xpath est très similaire sous-jacent à la seule différence dans leur protocole de construction.

Comme Xpath, le sélecteur CSS peut également localiser des éléments Web sans ID, classe ou nom.

convertir une vidéo youtube en mp4 en ligne gratuitement

Alors maintenant, allons de l'avant, discutons des types primitifs de sélecteurs CSS:

Utilisation du sélecteur CSS comme localisateur

Ce que vous apprendrez:

Sélecteur CSS: ID

Dans cet exemple, nous accédions à la zone de texte 'E-mail' présente dans le formulaire de connexion sur Gmail.com.

La zone de texte Email a un attribut ID dont la valeur est définie comme «Email». Ainsi, l'attribut ID et sa valeur peuvent être utilisés pour créer un sélecteur CSS pour accéder à la zone de texte de l'e-mail.

Création d'un sélecteur CSS pour l'élément Web

Étape 1 : Localisez / inspectez l'élément Web (zone de texte «Email» dans notre cas) et notez que la balise HTML est «input» et que la valeur de l'attribut ID est «Email» et que les deux font collectivement référence à «Email Textbox». Par conséquent, les données ci-dessus seraient utilisées pour créer un sélecteur CSS.

Utilisation du sélecteur CSS comme localisateur 2

Vérifiez la valeur du localisateur

Étape 1 : Tapez «css = input # Email», c'est-à-dire la valeur du localisateur dans la case cible de Selenium IDE et cliquez sur le bouton Rechercher. Notez que la zone Texte de l'e-mail serait mise en évidence.

Utilisation du sélecteur CSS comme localisateur 3

Syntaxe

css =

  • Balise HTML - C'est la balise qui sert à désigner l'élément web auquel on veut accéder.
  • # - Le signe de hachage est utilisé pour symboliser l'attribut ID. Il est obligatoire d'utiliser le signe de hachage si l'attribut ID est utilisé pour créer le sélecteur CSS.
  • Valeur de l'attribut ID - C'est la valeur d'un attribut ID auquel on accède.
  • La valeur de ID est toujours précédée d'un signe de hachage.

Noter: Également applicable pour d'autres types de sélecteurs CSS

  • Lorsque vous spécifiez le sélecteur CSS dans la zone de texte cible de Selenium IDE, n'oubliez pas de le préfixer avec «css =».
  • La séquence des artefacts ci-dessus est inaltérable.
  • Si deux éléments Web ou plus ont la même balise HTML et la même valeur d'attribut, le premier élément marqué dans la source de la page sera identifié.

Sélecteur CSS: Classe

Dans cet exemple, nous accédions à la case à cocher «Rester connecté» présente sous le formulaire de connexion sur gmail.com.

La case à cocher «Rester connecté» a un attribut de classe dont la valeur est définie comme «se souvenir». Ainsi, l'attribut Class et sa valeur peuvent être utilisés pour créer un sélecteur CSS pour accéder à l'élément Web désigné.

Localiser un élément en utilisant Class comme sélecteur CSS est très similaire à l'utilisation d'ID, la seule différence réside dans la formation de leur syntaxe.

Création d'un sélecteur CSS pour l'élément Web

Étape 1 : Localisez / inspectez l'élément Web (case à cocher «Rester connecté» dans notre cas) et notez que la balise HTML est «étiquette» et que la valeur de l'attribut ID est «se souvenir» et que les deux font collectivement référence à «Rester signé» dans la case à cocher ».

Vérifiez la valeur du localisateur

Étape 1 : Tapez «css = label.remember», c'est-à-dire la valeur du localisateur dans la case cible de Selenium IDE et cliquez sur le bouton Rechercher. Notez que la case à cocher «Rester connecté» serait mise en évidence.

Utilisation du sélecteur CSS comme localisateur 4

Syntaxe

css =

  • . - Le signe point est utilisé pour symboliser l'attribut de classe. Il est obligatoire d'utiliser le signe pointillé si un attribut de classe est utilisé pour créer un sélecteur CSS.
  • La valeur de Class est toujours précédée d'un point.

Sélecteur CSS: attribut

Dans cet exemple, nous accédions au bouton «Connexion» présent sous le formulaire de connexion sur gmail.com.

Le bouton «Connexion» a un attribut de type dont la valeur est définie comme «soumettre». Ainsi, l'attribut type et sa valeur peuvent être utilisés pour créer un sélecteur CSS pour accéder à l'élément Web désigné.

Création d'un sélecteur CSS pour l'élément Web

Étape 1 : Localisez / inspectez l'élément Web (bouton 'Se connecter' dans notre cas) et notez que la balise HTML est 'input', que l'attribut est type et que la valeur de l'attribut type est 'submit' et que tous ensemble font référence à le bouton «Connexion».

Vérifiez la valeur du localisateur

Étape 1 : Tapez «css = input (type = 'submit')», c'est-à-dire la valeur du localisateur dans la zone cible de Selenium IDE et cliquez sur le bouton Rechercher. Notez que le bouton «Connexion» serait mis en surbrillance.

Utilisation du sélecteur CSS comme localisateur 5

Syntaxe

css =

  • Attribut - C'est l'attribut que nous voulons utiliser pour créer le sélecteur CSS. Il peut valoriser, taper, nom, etc. Il est recommandé de choisir un attribut dont la valeur identifie de manière unique l'élément Web.
  • Valeur de l'attribut - C'est la valeur d'un attribut auquel on accède.

Sélecteur CSS: ID / Classe et attribut

Dans cet exemple, nous accédions à la zone de texte «Mot de passe» présente dans le formulaire de connexion sur gmail.com.

La zone de texte «Mot de passe» a un attribut ID dont la valeur est définie comme «Passwd», attribut de type dont la valeur est définie comme «mot de passe». Ainsi, l'attribut ID, l'attribut type et leurs valeurs peuvent être utilisés pour créer un sélecteur CSS pour accéder à l'élément Web désigné.

transforme char en int c ++

Création d'un sélecteur CSS pour l'élément Web

Étape 1 : Localisez / inspectez l'élément Web (zone de texte «Mot de passe» dans notre cas) et notez que la balise HTML est «entrée», les attributs sont ID et type et leurs valeurs correspondantes sont «Passwd» et «mot de passe» et tous ensemble faire référence à la zone de texte «Mot de passe».

Vérifiez la valeur du localisateur

Étape 1 : Tapez «css = input # Passwd (name = 'Passwd')» c'est-à-dire la valeur du localisateur dans la zone cible de Selenium IDE et cliquez sur le bouton Rechercher. Notez que la zone de texte «Mot de passe» serait mise en surbrillance.

Utilisation du sélecteur CSS comme localisateur 5

Syntaxe

css =

Deux ou plusieurs attributs peuvent également être fournis dans la syntaxe.Par exemple, 'Css = input # Passwd (type =’ password ’) (name =’ Passwd ’)».

Sélecteur CSS: sous-chaîne

CSS dans Selenium permet de faire correspondre une chaîne partielle et ainsi de dériver une fonctionnalité très intéressante pour créer des sélecteurs CSS à l'aide de sous-chaînes. Les sélecteurs CSS peuvent être créés de trois manières en fonction du mécanisme utilisé pour faire correspondre la sous-chaîne.

Types de mécanismes

Tous les mécanismes inférieurs ont une signification symbolique.

  • Faire correspondre un préfixe
  • Faire correspondre un suffixe
  • Faire correspondre une sous-chaîne

Laissez-nous les discuter en détail.

Faire correspondre un préfixe

Il est utilisé pour correspondre à la chaîne à l'aide d'un préfixe correspondant.

Syntaxe

css =

  • ^ - Notation symbolique pour correspondre à une chaîne en utilisant le préfixe.
  • Préfixe - C'est la chaîne basée sur laquelle l'opération de correspondance est effectuée. La chaîne probable devrait commencer par la chaîne spécifiée.

Par exemple: Considérons 'Password textbox', donc le sélecteur CSS correspondant serait:

css = input # Passwd (name ^ = 'Pass')

Faire correspondre un suffixe

Il est utilisé pour correspondre à la chaîne à l'aide d'un suffixe correspondant.

Syntaxe

css =

  • # - Notation symbolique pour correspondre à une chaîne en utilisant le suffixe.
  • Le suffixe - C'est la chaîne basée sur laquelle l'opération de correspondance est effectuée. La chaîne probable devrait se terminer par la chaîne spécifiée.

Par exemple,Considérons à nouveau 'Password textbox', de sorte que le sélecteur CSS correspondant serait:

css = input # Passwd (nom $ = 'wd')

Faire correspondre une sous-chaîne

Il est utilisé pour correspondre à la chaîne à l'aide d'une sous-chaîne correspondante.

Syntaxe

css =

  • * - Notation symbolique pour correspondre à une chaîne en utilisant une sous-chaîne.
  • Sous-chaîne - C'est la chaîne basée sur laquelle l'opération de correspondance est effectuée. La chaîne probable devrait avoir le modèle de chaîne spécifié.

Par exemple,considérons à nouveau «Password textbox», de sorte que le sélecteur CSS correspondant serait:

css = input # Passwd (nom $ = 'wd')

Sélecteur CSS: texte intérieur

Le texte interne nous aide à identifier et à créer un sélecteur CSS à l'aide d'un modèle de chaîne que la balise HTML manifeste sur la page Web.

Considérez, 'Besoin d'aide?' lien hypertexte présent sous le formulaire de connexion sur gmail.com.

La balise d'ancrage représentant le lien hypertexte est entourée d'un texte. Ainsi, ce texte peut être utilisé pour créer un sélecteur CSS pour accéder à l'élément Web désigné.

Syntaxe:

css =

  • : - Le signe point est utilisé pour symboliser la méthode contient
  • Contient - C'est la valeur d'un attribut de classe auquel on accède.
  • Texte - Le texte qui est affiché n'importe où sur la page Web, quel que soit son emplacement.

C'est l'une des stratégies les plus fréquemment utilisées pour localiser un élément Web en raison de sa syntaxe simplifiée.

Etant donné que la création de CSS Selector et Xpath nécessite beaucoup d'efforts et de pratique, le processus n'est donc exercé que par des utilisateurs plus sophistiqués et formés.

Tutoriel suivant # 7 : En poursuivant notre prochain tutoriel, nous en profiterons pour vous présenter une extension des stratégies de localisation. Ainsi, dans le prochain tutoriel, nous étudierons le mécanisme pour localiser les éléments Web sur Google Chrome et Internet Explorer.

quels sont les principaux fournisseurs de messagerie

Nous couvrons plus en détail les localisateurs Selenium car il s'agit d'une partie importante de la création de scripts Selenium.

Faites-nous part de vos questions / commentaires ci-dessous.

lecture recommandée

^