Sélecteurs CSS pour la maintenance de vos Parcours Utilisateurs

La plupart des actions de Parcours Utilisateur s’appliquent à des éléments présents dans vos pages Web, qu’il vous est nécessaire d’identifier avec précision. Dans la portion de code HTML ci-dessous, il y a par exemple trois éléments : une division <div>, un paragraphe <p> et un lien <a> (voir Vocabulaire).

<div>
    <p>
        Cliquez sur <a href="page.html" class="maClasse" id="monIdentifiant">ce lien</a>
    </p>
</div>

Pour désigner avec précision un élément, Dareboost vous permet d’utiliser différents mode de sélection : TAG (par exemple « p »), IDENTIFIANT (« monIdentifiant »), NAME (utilisé dans les formulaires), XPATH et CSS.

La sélection CSS est le mode de sélection d’un élément le plus versatile et complet au sein d’une page web (en dehors de XPATH, puissant mais complexe, peu utilisé dans le Web). Un sélecteur CSS peut, à lui seul, reproduire tous les autres modes de sélection : TAG, IDENTIFIANT, NAME et permet même d'aller plus loin.

L’objectif de cette portion de documentation est de vous familiariser avec les possibilité offertes par ce mode de sélection.

Utilisation des Chrome DevTools

Notre service se base sur le navigateur grand public Chrome. Pour tester vos sélecteurs CSS dans les mêmes conditions que Dareboost, nous vous invitons à ouvrir la page concernée dans Chrome, puis à utiliser les outils pour développeurs intégrés à ce navigateur en utilisant Ctrl + Maj + I sur Windows, ou  +  + I sur macOS.

Le code HTML est visible via l’onglet « Elements » (NB: il s’agit en réalité du Document Object Model, ou DOM. Il correspond au code source HTML de la page tel que compris par le navigateur, et après exécution du code JavaScript qui peut l’avoir modifié).

Survol d’éléments

En survolant un élément dans la page, il apparaîtra en surbrillance dans l'onglet « Elements ». Réciproquement, en survolant un élément dans l'onglet « Elements », il sera mis en valeur dans la page Web.

Recherche de sélecteurs

Dans les Dev Tools, utiliser Ctrl + F affiche une barre de recherche. Vous pouvez saisir un sélecteur CSS dans cette barre de recherche pour vérifier ce dernier. Le nombre de résultats obtenus sera indiqués dans la barre de recherche. Le premier élément trouvé sera mis en surbrillance dans le code :

Barre de recherche dans Chrome devtools

Copie de sélecteurs générés par le navigateur

En faisant un clic droit sur un élément de l’onglet « Elements », vous pouvez choisir « Copier », puis « Copier le sélecteur ». Un sélecteur CSS sera copié dans votre presse-papier, que vous pourrez utiliser dans Dareboost.

Attention cependant, ce sélecteur sera généralement très spécifique, et donc peu robuste au changement. Vous risquez de de devoir faire évoluer ce sélecteur régulièrement. Il peut néanmoins servir de base à la détermination d’un sélecteur plus générique.

Revenir au sommaire