Traduit de l'anglais à l'aide de l'IA
Veuillez noter que cet article a été traduit à l'aide de la technologie IA. Bien que nous travaillions à maintenir l'exactitude, certains détails peuvent ne pas refléter parfaitement le texte original. Si vous avez des doutes sur une information, veuillez vous référer à la version anglaise.
La plupart des actions de scénario utilisateur s'appliquent aux éléments présents dans vos pages web, que vous devez identifier avec précision. Dans les extraits de code HTML suivants, il y a par exemple trois éléments : une division <div>, un paragraphe <p> et un lien <a>.
<div>
<p>
Clickez <a href="page.html" class="myClass" id="myId">ici</a>
</p>
</div>
Pour cibler avec précision un élément, le Synthetic Monitoring propose différents modes de sélection : TAG (par exemple “p”), IDENTIFIANT ("myIdentifier"), NOM (utilisé dans les formulaires web), XPATH et CSS.
La sélection CSS est le mode de sélection d'élément le plus polyvalent et complet au sein d'une page web (à part XPATH, qui est puissant mais aussi complexe, et peu utilisé par les professionnels du web). Un sélecteur CSS peut, à lui seul, reproduire presque tous les autres modes de sélection : TAG, IDENTIFIANT, NOM et aller même plus loin.
Le but de cette section de la documentation est de vous familiariser avec les possibilités offertes par cette méthode de sélection.
Utilisation de Chrome DevTools
Notre service est basé sur Chrome, un navigateur populaire. Pour tester vos sélecteurs CSS comme dans le suivi synthétique, ouvrez la page pertinente dans Chrome et utilisez les outils de développement intégrés dans ce navigateur en utilisant Ctrl + Shift + I sur Windows, ou ⎇ + ⌘ + I sur macOS.
Le code HTML est visible via l'onglet “Éléments” (NB : c'est le Document Object Model, ou DOM. Il représente le code source HTML de la page tel que compris par le navigateur, et après l'exécution du code JavaScript de la page qui a pu le modifier).
Éléments survolés
Lorsque vous survolez un élément dans la page, il apparaîtra mis en évidence dans l'onglet “Éléments”. De même, en survolant un élément dans l'onglet “Éléments”, il sera mis en évidence dans la page web.
Recherche de sélecteurs
Dans les outils de développement, en utilisant Ctrl + F affiche une barre de recherche. Vous pouvez entrer un sélecteur CSS dans cette barre de recherche pour le vérifier. Le nombre de résultats obtenus sera indiqué dans la barre de recherche. Le premier élément trouvé sera mis en évidence dans le code.
Copier les sélecteurs générés par le navigateur
En cliquant avec le bouton droit sur un article dans l'onglet “Éléments”, vous pouvez choisir “Copier”, puis “Copier le sélecteur”. Un sélecteur CSS sera copié dans votre presse-papier, que vous pourrez utiliser dans le Synthetic Monitoring.
Faites attention cependant, ce sélecteur sera souvent très spécifique, et donc pas très solide face aux changements. Vous devrez peut-être passer à l’offre supérieure de ce sélecteur régulièrement. Cependant, il peut être utilisé comme base pour déterminer un sélecteur plus approprié.
Code HTML et Vocabulaire
Dans l'exemple suivant :
<div>
<p>
<a href="page.html" class="myClass secondClass" id="myIdentifier">Mon lien</a>
</p>
</div>
-
<a>est un élément html composé d'une ouverture<a>et d'une fermeture</a>tag. -
href,classetidsont des attributs de l'élément<a>. - “page.html” est la valeur de l'attribut
href. -
<p>est un élément parent direct de l'élément<a>. -
<div>est un élément parent indirect de l'élément<a>.
Un élément HTML peut avoir une ou plusieurs classes (dans l'attribut class, séparées par des espaces). Plusieurs éléments différents peuvent avoir la même classe ou des classes communes.
Un élément HTML peut avoir un identifiant (l'attribut id). Un identifiant est unique, deux éléments ne peuvent pas avoir le même identifiant (dans le champ, cela peut arriver mais c'est une erreur qui peut entraîner des effets de bord). Les identifiants dupliqués seront indiqués dans nos rapports d'analyse détaillés.
Sélecteurs CSS de base
Sélection par tag par nom
Pour sélectionner un ou plusieurs éléments par leur tag, utilisez le nom du tag directement comme a, span, div, header.
Sélection par une ou plusieurs classes
Pour sélectionner un ou plusieurs éléments par l'une de leurs classes, utilisez le nom de la classe précédé d'un point “.”.
Exemple :
.myClass
Vous pouvez affiner votre sélection en spécifiant d'autres classes que l'élément doit avoir, toujours préfixées par un “.”, attachées à la classe précédente.
.myClass.secondClass
Sélection par la présence d'un attribut
Pour sélectionner un élément ou des éléments qui ont un certain attribut, vous devez définir l'attribut pertinent entre crochets “[ ]”.
Exemple :
a[download]
Sélectionne tous les liens avec un download attribut.
Sélection par la valeur d'un attribut
Pour sélectionner un élément ou des éléments qui ont un certain attribut, vous devez définir l'attribut pertinent et sa valeur entre crochets “[ ]”.
Exemple :
[data-analytics="GMT324-3"]
Sélection à partir d'une partie de la valeur d'un attribut
Sur certains sites, une partie des attributs est générée automatiquement et peut changer à chaque version. Par exemple :
<p id="clientP-4D92J_keyPId"/>Si vous devez cibler cet élément avec :
- le début de la valeur, utilisez l'opérateur "^="
Exemple :
[id^="clientP-"]-
la fin de la valeur, utilisez l'opérateur "$="
Exemple :[id$="keyPId"] -
tout texte contenu dans la valeur, utilisez l'opérateur "*="
Exemple :[id*="ntP-4D92J_k"]
Sélection d'un élément par son identifiant
Pour sélectionner un élément par son identifiant unique, utilisez le nom de l'identifiant précédé d'un dièse “#”.
#myId
Un identifiant est normalement unique, donc ce sélecteur est censé ne retourner qu'un seul élément. Vous ne devez donc pas attacher plusieurs identifiants.
Composition de sélecteur
Vous pouvez composer des modes de sélection simples pour affiner vos sélecteurs. Ainsi, pour sélectionner un élément par son tag et l'une des classes qu'il contient, vous pouvez utiliser :
a.myClasse
L'identifiant étant le sélecteur le plus précis, il est toujours au début de la déclaration et est souvent suffisant à lui seul.
Sélection d'éléments situés dans d'autres éléments
Le sélecteur des parent(s) et enfant(s) est séparé par un espace. Les parent(s) peuvent alors être des parents directs ou indirects.
div a
Tous les <a> éléments qui ont un <div> élément parent.
.parent .child
Tous les éléments avec la classe child qui ont comme parent un élément avec la classe parent.
#parent .child
Tous les éléments avec la classe child qui sont contenus dans le parent, nécessairement unique, avec l'identifiant parent.
#header div span a
Tout lien qui a un <span> parent qui lui-même a un <div> parent, contenu dans un élément parent qui a un identifiant header.
<div id="header">
<div>
<span><strong><a href="#">Lien adressé par le sélecteur</a></strong></span>
</div>
<span><a href="#">Lien non adressé par le sélecteur</a></span>
</div>
Rappel : l'enfant n'est pas nécessairement un enfant direct du parent.
Sélecteurs CSS avancés
Sélection d'un élément enfant direct
#parent > .child
Sélectionnez les éléments avec la classe child qui sont des enfants directs de l'élément avec l'identifiant parent.
Cas d'usage : plusieurs éléments imbriqués - par exemple des menus - mais seul le premier niveau est sélectionné.
Sélection d'un élément adjacent (ou élément frère)
.abel + .cain
Nous sélectionnons les éléments avec la classe cain qui suivent les éléments avec la classe abel.
Cas d'usage : essayer de sélectionner un élément qui est systématiquement après un autre, mais difficile à pointer efficacement par lui-même.
Sélection du n-ième élément (d'un parent direct implicite)
Pour sélectionner un élément par sa position au sein de son parent, vous pouvez utiliser :nth-child() (signifie “n-ième élément enfant”) avec, comme paramètre, la position de l'élément à sélectionner.
Exemple :
a:nth-child(2)
Sélectionne tous les liens qui sont le deuxième enfant de leur parent direct.
Sélection d'un élément avec exclusion
Pour sélectionner un article à condition qu'il ne corresponde pas à un autre sélecteur simple, vous pouvez utiliser :not() avec le sélecteur à exclure comme paramètre.
Exemple :
a:not(.excluded)
Sélectionne tous les liens qui n'ont pas la classe exclude.
Autres sélecteurs
Il existe de nombreux sélecteurs CSS et de nouveaux sont régulièrement ajoutés : nous recommandons