1. Support
  2. Base de connaissances
  3. Surveillance des transactions
  4. Trouver d'autres selecteurs

Trouver d’autres selecteurs

Nous changeons notre interface. Certaines informations peuvent ne pas être à jour. En savoir plus.

Lorsque vous devez identifier un élément de page spécifique dans votre script de transaction, vous utilisez un sélecteur XPath ou CSS. Pour les sélecteurs il y a souvent plusieurs choix possibles pour spécifier un élément type, mais certains sélecteurs sont plus problématiques que d’autres. Trouver le bon demandent parfois une utilisation astucieuse des sélecteurs XPath ou CSS.

Lorsque vous utilisez l’enregistreur de transactions pour capturer le parcours utilisateur, l’enregistreur applique des algorithmes pour choisir ce qu’il pense le meilleur choix de sélecteur. Étant donné que l’enregistreur de transactions n’obtient qu’un seul instantané de la structure de votre page, le sélecteur qu’il choisit peut ne pas être le meilleur choix pour vous. Dans cet article, nous abordons quelques cas et leurs solutions lors de la recherche de sélecteurs alternatifs.

Causes courantes d’un mauvais choix du sélecteur

De nombreux facteurs peuvent jouer et faire en sorte que votre sélecteur ne fonctionne pas comme vous l’attendez. Par exemple, vos tests peuvent donner lieu à des erreurs telles que “Element not found”. Un mauvais choix de sélecteur peut en être la cause. Examinons quelques-unes des raisons qui peuvent expliquer les erreurs de script.

IDs dynamiques

Certains éléments obtiennent un nouvel ID chaque fois que le serveur envoie la page, donc dans ce cas, si votre sélecteur fait référence à l’ancien ID, votre script ne trouvera pas l’élément. Il existe différentes manières de résoudre ces problèmes.

Dans les exemples suivants, nous utiliserons un élément de saisie pour sélectionner la quantité d’articles dans l’extrait HTML.

<div class="quantity"> 
  <input type="number" id="quantity_5e5653081acc7" class="input-text qty text"
  step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" 
  pattern="[0-9]*"inputmode="numeric"
  aria-labelledby="Suraya Bay T-Shirt quantity"> 
</div>

L’identifiant de l’entrée est en partie fixe et en partie généré, ce qui entraîne des erreurs lors de la référence à l’identifiant par l’enregistreur de transactions. L’enregistreur de transactions propose :
XPath: //input[@id="quantity_5e5653081acc7"])[1] CSS selector: input#quantity_5e5653081acc7
Les deux ID échouent lorsqu’ils sont utilisés dans la transaction. Vous avez plusieurs options pour résoudre le problème.

  • Utiliser un attribut d’élément qui ne change pas. En utilisant un attribut d’élément différent tel qu’un nom d’élément, vous aurez un sélecteur stable.
    //input[@name="quantity"]
  • Utiliser un chemin relatif pour naviguer dans le DOM. Le node HTML ci-dessus est imbriqué dans un node parent <div>. On peut référencer l’élément à l’intérieur du parent en utilisant XPath. Le code ci-dessous localise le parent suivi de l’élément enfant.
    //div[@class=“quantity”]/input
  • Utiliser un XPath relatif avec contains ou starts with. Si l’ID est en partie fixe et en partie dynamique, comme id="quantity_5e5653081acc7", où la partie numérique “5e5653081acc7” change mais la partie “quantité_” est fixe, vous pouvez référencer la partie qui ne change pas. Par exemple,
    //select[starts with (@id, "quantity_")]
    ou
    //select[contains(@id, "quantity")]
  • Ajouter des attributs d’élément pour vos tests de transaction. Demandez à vos développeurs de vous aider en ajoutant des attributs d’éléments spéciaux pour les tests qui ne changent pas. Par exemple, disons que vous avez un élément avec un ID dynamique tel que
    <button id=”i2fe4owf” class=”btn”>
    Dans ce cas vous n’avez rien pour identifier l’élément. Si vous ajoutez un autre attribut avec une valeur statique tel que “data-test-id”, vous pourrez toujours trouver l’élément. Un attribut ajouté peut prendre cette forme
    <button id=”i2fe4owf” class=”btn” data-test-id =”shoppingcart-test-step2”>
  • Utiliser plusieurs attributs d’élément. Si vos options d’identification contains ou starts with ne fonctionnent pas car d’autres éléments de la page utilisent le même préfixe ou suffixe avec la partie dynamique, vous pouvez parfois utiliser une combinaison d’attributs pour identifier l’élément à l’aide de XPath. `//sélect[start-with(@id, “quantity_” and contains(@class, “qty text”)]```

Sites multilingues

Lorsque vous avez un site web multilingue, la page change de langue en fonction de l’emplacement de l’utilisateur. Si le point de contrôle que vous avez sélectionné se trouve dans une région qui déclenche un changement de langue, votre moniteur de transactions peut échouer ou pas, selon la façon dont vous avez identifié l’élément. Pour vos sélecteurs, il est préférable d’utiliser d’autres options que les valeurs des étiquettes ou des mots spécifiques trouvés sur la page si la langue affecte votre contenu.

Contenu dynamique

Certains sites utilisent un contenu dynamique basé sur les promotions saisonnières, les vacances, la connexion de l’utilisateur, les cookies, les données de localisation ou encore d’autres facteurs. Les changements dans les données produits par les variations du contenu dynamique peuvent provoquer l’échec des moniteurs de transaction. Le contenu dynamique génère les mêmes problèmes que les identifiants dynamiques, mais ce sont les éléments de la page entière qui changent à chaque requête du serveur (pensez aux pages d’Amazon avec ses recommandations de produits qui changent constamment). Vous obtiendrez de meilleurs résultats en référençant les éléments par leur emplacement dans le DOM plutôt que par les leurs attributs.

Prenons l’exemple d’un site de commerce électronique qui affiche des articles sur la page en fonction de leur popularité. Les articles apparaissent et disparaissent à tour de rôle presque à chaque chargement de la page. Plutôt que d’utiliser un sélecteur qui identifie un article par son nom ou par un autre attribut spécifique, il est probablement préférable d’utiliser un sélecteur de chemin relatif qui choisit le premier article d’une liste, quel que soit l’article affiché.

Éléments cachés

Les erreurs dues à des éléments cachés ne sont pas nécessairement le résultat d’un mauvais sélecteur ; c’est que votre sélecteur peut échouer parce qu’une action fait défaut. Donc, si vous obtenez des erreurs indiquant que le script a trouvé l’élément, mais que celui-ci n’est pas visible, votre script peut nécessiter une action supplémentaire avant de tenter l’interaction. Tout comme vos utilisateurs, le script ne peut pas interagir avec des éléments invisibles.

Action de survol manquante :

Une action de survol manquante provoque des erreurs. Un élément de menu peut ne pas devenir visible tant que l’utilisateur n’a pas placé le curseur au-dessus d’un élément de menu pour que le menu déroulant s’affiche. L’ajout de l’action de survol rend l’élément visible et disponible pour l’interaction.

Action de défilement manquante :

Souvent, les pages ne chargent les éléments que lorsque l’utilisateur en a besoin, afin de donner l’illusion d’une meilleure performance et de réduire la transmission des données. Lorsque l’utilisateur fait défiler la page, le contenu se charge au fur et à mesure. Sans l’action de défilement, les éléments ne sont pas rendus et mis à disposition pour l’interaction du script. L’ajout d’une action de défilement résout le problème. L’action de défilement ne rend pas visibles tous les éléments. Vous aurez peut-être à ajouter plusieurs actions de défilement avant que l’élément cible ne soit visible sur la page.

Remarque : L’enregistreur ne capture pas les actions de défilement et de survol, vous devez donc les ajouter dans votre script manuellement.

Caché dans le DOM mais visible à l’écran :

Vous pouvez également obtenir des erreurs dues à des éléments que vous pouvez clairement voir sur la page, mais qui sont cachés dans le DOM. Les causes courantes de ce problème sont les boutons radio ou les cases à cocher. L’enregistreur capture l’action du clic sur le bouton radio ou la case à cocher, mais ces éléments ne sont pas visibles dans le DOM ; leurs étiquettes si. Pour résoudre le problème, déplacez l’action du clic sur l’étiquette couvrant l’élément.

Changement de sélecteurs

Si vous avez rencontré des problèmes avec vos sélecteurs, vous pouvez prendre plusieurs mesures pour résoudre le problème.

Comment utiliser un autre sélecteur

Lorsque Uptrends a converti votre enregistrement en script, Uptrends a décidé du sélecteur à utiliser sur la base d’un algorithme. Si l’enregistreur a fait un mauvais choix, alors vous devez intervenir. Uptrends vous facilite la tâche en mettant à votre disposition tous les sélecteurs possibles. Pour accéder aux autres sélecteurs,

  1. Cliquez sur le carré gris (avec trois points) pour ouvrir la boîte de dialogue du sélecteur (voir la figure 1).
  2. Choisissez un autre sélecteur dans la liste (voir la figure 2).


Figure 1. Le bouton de recherche du sélecteur.


Figure 2. La boîte de dialogue de recherche de sélecteur

Vous pouvez choisir et tester n’importe lequel des sélecteurs de la liste. Si aucun d’entre eux ne fonctionne bien pour vous et que vous n’êtes pas à l’aise pour écrire le vôtre, notre Équipe de Support se fera un plaisir de vous aider à trouver une solution.

Remarque : Si vous travaillez avec un ancien script, les sélecteurs proposés sont probablement obsolètes, alors vous aurez soit écrire le nouveau sélecteur vous-même, soit demander au Support de vous aider.

Écrire le sélecteur vous-même

Si les sélecteurs ne vous font pas peur ou si vous disposez d’un personnel de développement pour vous aider, vous pouvez écrire vos propres sélecteurs CSS ou XPath. Peu importe qui écrit vos sélecteurs, il faut les tester de manière exhaustive.

Demander de l’aide auprès du service Support

Les transactions en libre-service ne signifient pas que vous devez vous débrouiller tout seul. Notre équipe d’assistance est là à vous aider. Notre équipe expérimentée en matière de transactions a déjà tout vu, et elle est très douée pour trouver le bon sélecteur. Ouvrez simplement un ticket de support et décrivez-leur votre problème.

En utilisant ce site, vous consentez à l’utilisation de cookies conformément à notre Politique de cookies.