Introduction
La plupart des actions du scénario utilisateur s'appliquent à des éléments présents dans le code de vos pages web. Pour remédier aux problèmes rencontrés lors de l'exécution d'un scénario, vous devez savoir localiser ces éléments rapidement et avec précision.
Dans l'extrait de code HTML ci-dessous, par exemple, on distingue trois éléments : un élément de division <div>
, un paragraphe <p>
et un lien <a>
.
<div> <p> Click <a href="page.html" class="myClass" id="myId">here</a> </p> </div>
Pour cibler précisément un élément, Speed Analysis Lab propose différents modes de sélection : sélection par TAG (par exemple "p"), par IDENTIFIANT ("myIdentifier"), par NOM (utilisé dans les formulaires web), XPATH et CSS.
La sélection CSS est le mode de sélection d'éléments le plus polyvalent et le plus complet au sein d'une page web (à l'exception de XPATH, qui est puissant, mais aussi complexe, et peu utilisé par les professionnels du web en général). Un sélecteur CSS peut, à lui seul, reproduire presque tous les autres modes de sélection, à savoir, par TAG, IDENTIFIANT, NOM... et même plus.
L'objectif de cet article est de vous familiariser avec les possibilités offertes par cette méthode de sélection.
Utiliser Chrome DevTools
Notre service est basé sur le navigateur populaire Chrome. Pour tester vos sélecteurs CSS comme dans Speed Analysis Lab, ouvrez la page concernée dans Chrome et utilisez les outils de développement intégrés au navigateur à l'aide des touches Ctrl + Shift + I sur Windows, ou ⎇ + ⌘ + I sur macOS.
Le code HTML est visible via l'onglet "Éléments". (NB : cet onglet correspond au Document Object Model, "modèle objet du document" en français, plus communément appelé DOM. Il présente le code source HTML de la page actuellement chargée dans la fenêtre du navigateur. Si des modifications sont apportées au code source HTML en langage JavaScript, le DOM affichera le code source à la fois avant et après l'exécution du code JavaScript [qui peut donc modifier le code HTML]).
Éléments au survol
Si vous survolez un élément de la page, celui-ci apparaîtra en surbrillance dans l'onglet "Éléments". De même, si vous survolez un élément dans l'onglet "Éléments", il apparaîtra en surbrillance sur la page web.
Recherche de sélecteurs
Dans DevTools, presser Ctrl + F en même temps permet d'afficher une barre de recherche. Vous pouvez y saisir un sélecteur CSS 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
Si vous cliquez droit sur un élément de l'onglet "Éléments", vous pouvez ensuite choisir "Copier", puis "Copier le sélecteur". Un sélecteur CSS sera ainsi copié dans votre presse-papiers, et vous pourrez l'utiliser dans Speed Analysis Lab.
Attention toutefois, ce sélecteur sera souvent très spécifique, et donc peu adapté aux changements. Il vous faudra peut-être le mettre à jour régulièrement. Cependant, il peut être utilisé comme base pour déterminer un sélecteur plus approprié.
Code HTML et terminologie
Dans l'exemple suivant :
<div> <p> <a href="page.html" class="myClass secondClass" id="myIdentifier">My link</a> </p> </div>
-
<a>
est un élément html composé d'un tag (ou "balise" en français) ouvrant<a>
et d'un tag fermant</a>
. -
href
,class
etid
sont 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
). Celles-ci seront séparées par des espaces s'il y en a plusieurs. De plus, plusieurs éléments différents peuvent avoir la même classe ou des classes communes.
Un élément HTML peut aussi avoir un identifiant (l'attribut id
). Cependant, contrairement aux classes, l'identifiant est unique. Deux éléments distincts ne peuvent pas avoir le même identifiant (dans le champ, cela peut arriver, mais il s'agit d'une erreur qui peut entraîner des effets de bord, c'est-à dire des effets indésirables sur le code). Les identifiants dupliqués seront indiqués dans nos rapports d'analyse détaillés.
Sélecteurs CSS de base
Sélection par nom de tag
Pour sélectionner un ou plusieurs éléments par leur tag, utilisez directement le nom du tag comme a
, span
, div
, header
.
Sélection par classe(s)
Pour sélectionner un ou plusieurs éléments par une de leurs classes, utilisez le nom de la classe précédé d'un point ".".
Exemple :
.myClass
Vous pouvez préciser votre sélection en spécifiant plusieurs classes que l'élément doit avoir. La seconde classe doit être toujours être préfixée d'un "." et rattachée à la classe précédente.
Exemple :
.myClass.secondClass
Sélection par la présence d'un attribut
Pour sélectionner un ou plusieurs éléments qui possèdent un certain attribut, vous devez définir l'attribut en question entre crochets "[ ]".
Exemple :
a[download]
Ce sélecteur retrouvera tous les liens ayant un attribut download
.
Sélection par la valeur d'un attribut
Pour sélectionner un ou plusieurs éléments possédant un attribut d'une valeur particulière, vous devez définir l'attribut concerné ainsi que sa valeur entre crochets "[ ]" ...
Exemple :
[data-analytics="GMT324-3"]
Sélection par partie de la valeur d'un attribut
Sur certains sites, des parties d'attributs sont automatiquement générées et peuvent changer à chaque mise à jour. Par exemple :
<p id="clientP-4D92J_keyPId"/>
S'il vous faut 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 inclut dans la valeur, utilisez l'opérateur "*="
Exemple :
[id*="ntP-4D92J_k"]
Sélection par l'identifiant
Pour sélectionner un élément par son identifiant unique, utilisez le nom de l'identifiant précédé d'un dièse "#", comme dans l'exemple ci-dessous :
#myId
Dans la mesure où un identifiant est normalement unique, ce sélecteur est censé ne restituer qu'un seul élément. Vous ne devez donc pas inclure plusieurs identifiants.
Composition de sélecteurs
Vous pouvez composer des modes de sélection simples pour affiner vos sélecteurs. Ainsi, pour sélectionner un élément à la fois par son tag et une des classes qu'il contient, vous pouvez utiliser :
a.myClass
L'identifiant étant le sélecteur le plus précis, il se trouve toujours au début de la déclaration et se suffit souvent à lui-même.
Sélection d'éléments situés dans d'autres éléments
Pour sélectionner un (ou des) parent(s) et son (ou ses) enfant(s), inscrivez les sélecteurs séparés par un espace. Le ou les parents peuvent alors être des parents directs ou indirects.
Par exemple :
div a
sert à sélectionner tous les éléments <a>
qui ont un élément parent <div>
.
.parent .child
sélectionnera tous les éléments avec la classe child
qui ont comme parent un élément avec la classe parent
, tandis que
#parent .child
permet de sélectionner tous les éléments de la classe child
qui sont contenus dans le parent, nécessairement unique, avec l'identifiant parent
, et enfin :
#header div span a
sélectionne tout lien <a>
ayant un parent <span>
, qui a lui-même un parent <div>
, contenu dans un élément parent qui a pour identifiant header
.
<div id="header"> <div> <span><strong><a href="#">Link addressed by the selector</a></strong></span> </div> <span><a href="#">Link not addressed by the selector</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
Le code ci-dessus, sélectionne les éléments avec la classe child
qui sont des enfants directs de l'élément avec l'identifiant parent
.
Exemple d'utilisation : on cherche à sélectionner un élément qui est imbriqué dans d'autres éléments (par exemple dans un menu), la sélection d'enfant direct permet alors de ne retrouver que le niveau recherché.
Sélection d'un élément adjacent (ou d'un élément frère)
.abel + .cain
Ici, on sélectionne les éléments avec la classe cain
qui suivent des éléments avec la classe abel
.
Exemple d'utilisation : on cherche à sélectionner un élément qui se trouve systématiquement après un autre, mais qui est difficile à cibler 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 élément parent, vous pouvez utiliser :nth-child()
(ce qui signifie "n-ième élément enfant") avec la position de l'élément à sélectionner inscrite en paramètre, c'est-à-dire entre parenthèses.
Exemple :
a:nth-child(2)
retrouvera 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 élément qui ne peut être retrouvé avec aucun autre sélecteur simple, vous pouvez utiliser :not()
avec le sélecteur à exclure en paramètre (c'est-à-dire entre parenthèses).
Exemple :
a:not(.excluded)
sélectionnera tous les liens qui ne possèdent pas la classe excluded
.
Autres sélecteurs
Il existe de nombreux sélecteurs CSS et de nouveaux sont régulièrement ajoutés.