Comment identifier un sélecteur DOM ou XPath à utiliser dans un générateur de flux de travail GUI canary CloudWatch ?

Dernière mise à jour : 14/12/2020

J'essaie de créer un canary dans Amazon CloudWatch à l'aide du générateur de flux de travail GUI. Cependant, je reçois des erreurs qui indiquent que j'ai sélectionné un élément DOM incorrect. Comment puis-je trouver le bon sélecteur DOM ou XPath à utiliser ?

Brève description

Si vous avez sélectionné un élément DOM incorrect lors de la création d'un canary avec le générateur de flux de travail GUI, vous pouvez rencontrer les erreurs suivantes :

  • « Erreur : le nœud n'est pas visible ou ne constitue pas un HTMLElement. »
  • « Aucun résultat de test retourné. Erreur : la navigation a échoué, car le navigateur s'est déconnecté ! »
  • « TimeoutError: en attente d'un sélecteur » »
  • « TimeoutError: en attente de XPath »

Résolution

Déterminez le type de sélecteur correct

Le générateur de flux de travail GUI comporte cinq actions. Le type de sélecteur requis dépend de l'action et de la version d'exécution que vous utilisez.

Versions d'exécution utilisant Node.js et Puppeteer, l'action Vérifier le texte utilise le sélecteur XPath. Les actions suivantes utilisent le sélecteur DOM :

  • Cliquer
  • Vérifier le sélecteur
  • Saisir le texte
  • Cliquer avec navigation

Pour les versions d'exécution utilisant Python et Selenium Webdriver, toutes les actions utilisent le sélecteur XPath.

Identifier le bon sélecteur

Sélecteurs DOM

Pour trouver un attribut unique pour votre DOM :

  1. Ouvrez le menu contextuel (clic droit) de l'élément (tel qu'un bouton, un champ de saisie, div, span ou h1).
  2. Sélectionnez Inspecter l'élément (Mozilla Firefox) ou Inspecter (Google Chrome).
  3. Notez l'attribut DOM unique que vous utiliserez pour identifier votre élément (tel que id, class ou name).

Si votre DOM n'a pas d'attribut unique, utilisez l'une des méthodes suivantes pour trouver l'élément :

  • Utilisez des sélecteurs descendants pour faire correspondre les éléments en fonction du chemin ou de l'attribut donné (vous devez utiliser le chemin exact). Par exemple, pour trouver <div class='new' id='newId'> <a href="/test1">test1</a> <a href="/test2">test2</a> <a href="/test3">test3</a> </div>, utilisez div.new > a:first-child.
  • Utilisez les sélecteurs d'attributs pour faire correspondre les éléments en fonction de la présence ou de la valeur d'un attribut donné. Par exemple, pour trouver <div class="user-panel main" id="userId"> <input name="login"/> </div>, utilisez div.user-panel.main input[name='login'].

Vous pouvez également obtenir un sélecteur DOM unique pour votre élément DOM en utilisant le mode Développeur de votre navigateur Internet.

Chrome :

  1. Ouvrez le menu contextuel (cliquez avec le bouton droit) de l'élément, puis choisissez Inspecter.
  2. Sous l'onglet Éléments , ouvrez le menu contextuel (cliquez avec le bouton droit) pour la ligne en surbrillance.
  3. Choisissez Copier, puis Copier le sélecteur.

Firefox :

  1. Ouvrez le menu contextuel (cliquez avec le bouton droit) de l'élément, puis choisissez Inspecter les éléments.
  2. Sous l'onglet Inspecteur , ouvrez le menu contextuel (cliquez avec le bouton droit) pour la ligne en surbrillance.
  3. Choisissez Copier, puis sélectionnez Sélecteur CSS.

Remarque : s'il y a plusieurs instances du sélecteur dans le document HTML, le canary sélectionne le premier élément du tableau renvoyé. Évitez de sélectionner les éléments qui contiennent l'attribut CSS display:none ;. Ces éléments sont invisibles et provoquent l'échec du sélecteur.

Sélecteurs XPath

Obtenez un sélecteur XPath unique pour votre élément DOM en utilisant le mode développeur de votre navigateur Internet.

Chrome :

  1. Ouvrez le menu contextuel (cliquez avec le bouton droit) de l'élément, puis choisissez Inspecter.
  2. Sous l'onglet Éléments , ouvrez le menu contextuel (cliquez avec le bouton droit) pour la ligne en surbrillance.
  3. Sélectionnez Copier, puis Copier XPath.

Firefox :

  1. Ouvrez le menu contextuel (cliquez avec le bouton droit) de l'élément, puis choisissez Inspecter les éléments.
  2. Sous l'onglet Inspecteur , ouvrez le menu contextuel (cliquez avec le bouton droit) pour la ligne en surbrillance.
  3. Sélectionnez Copier, puis XPath.

Remarque : avant d'ajouter le sélecteur XPath que vous avez copié dans le canary, supprimez le préfixe « // ». Le canary ajoute le préfixe « // » à votre code par défaut.

Testez le nouveau sélecteur et confirmez qu'il est correct

Ouvrez le mode Console dans votre navigateur Internet

Chrome :

  1. En haut à droite du navigateur, sélectionnez Personnaliser.
  2. Développez l'option Plus d'outils, puis sélectionnez Outils de développeur.
  3. Dans la fenêtre de développement, sélectionnez le Panneau de console.

Firefox :

  1. Dans le coin supérieur droit du navigateur, sélectionnez Ouvrir le menu.
  2. Sélectionnez Développeur Web, puis Console Web.
    Remarque : dans certaines versions de Firefox, le menu Développeur Web se trouve dans le menu Outils.

Tester le sélecteur DOM

La syntaxe pour tester la requête du sélecteur DOM dans la console du navigateur est : document.querySelectorAll("[AttributeName='AttributeValue']"). Par exemple, si vous avez un élément div avec id='username', utilisez le modèle suivant : document.querySelectorAll("[name='username']").

Tester le sélecteur XPath

La syntaxe pour tester la requête XPath dans la console du navigateur est : $x("XPATH_QUERY"). Par exemple, si vous avez un élément div avec id='welcome' qui contient un élément h1, utilisez le modèle suivant : $x("//div[@id='welcome']//h1). Lorsque vous ajoutez ce chemin au canary, omettez le préfixe //.

Ajouter le nouveau sélecteur à CloudWatch Canary

  1. Ouvrez la console CloudWatch.
  2. Sous Synthetics, sélectionnez Canaries.
  3. Choisissez Créer un canary.
  4. Sélectionnez Utiliser un schéma, puis choisissez Générateur de flux de travail GUI.
  5. Reportez-vous à l'exemple dans Générateur de flux de travail GUI pour compléter un schéma qui utilise le sélecteur récemment créé.
  6. </ol

Cet article vous a-t-il été utile ?


Besoin d'aide pour une question technique ou de facturation ?