Comment identifier un sélecteur DOM ou XPath à utiliser dans CloudWatch pour créer un script Canary à l'aide du générateur de flux de travail de l'interface graphique ?

Lecture de 5 minute(s)
0

Je tente de créer un script Canary dans Amazon CloudWatch à l'aide du générateur de flux de travail de l'interface graphique. Je reçois des messages d’erreur indiquant que j'ai sélectionné un élément DOM incorrect. Je dois donc trouver un sélecteur DOM ou XPath.

Brève description

Si vous avez sélectionné un élément DOM incorrect lors de la création d'un script Canary avec l'interface graphique Workflow Builder, vous risquez de rencontrer les erreurs suivantes :

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

Résolution

Déterminer le type de sélecteur approprié

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

Les versions d'exécution utilisent Node.js et Puppeteer, et 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 du texte
  • Cliquer avec la 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, procédez comme suit :

  1. Ouvrez le menu contextuel (clic droit) de l'élément (bouton, champ de saisie, div, span ou h1, par exemple).
  2. Sélectionnez Inspecter l'élément (Mozilla Firefox) ou Inspecter (Google Chrome).
  3. Notez l'attribut DOM unique que vous pouvez utiliser pour identifier votre élément (tel que l'identifiant, la classe ou le nom).

Si votre DOM ne possède pas d'attribut unique, utilisez l'une des méthodes suivantes pour trouver l'élément :

  • Utilisez des sélecteurs descendants pour trouver les éléments correspondants 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 des sélecteurs d'attribut pour trouver les éléments correspondant 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 (clic droit) de l'élément, puis sélectionnez Inspecter.
  2. Dans l'onglet Éléments, ouvrez le menu contextuel (clic droit) de la ligne en surbrillance.
  3. Sélectionnez Copier, puis Copier le sélecteur.

Firefox :

  1. Ouvrez le menu contextuel (clic droit) de l'élément, puis sélectionnez Inspecter l'élément.
  2. Dans l'onglet Inspecteur, ouvrez le menu contextuel (clic droit) de la ligne en surbrillance.
  3. Sélectionnez Copier, puis Sélecteur CSS.

Remarque : s'il existe plusieurs instances du sélecteur dans le document HTML, le script Canary sélectionne le premier élément affiché au tableau. Évitez de sélectionner des éléments contenant l'attribut CSS display:none;. Ces éléments sont invisibles et font échouer le sélecteur.

Sélecteurs XPath

Vous pouvez obtenir 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 (clic droit) de l'élément, puis sélectionnez Inspecter.
  2. Dans l'onglet Éléments, ouvrez le menu contextuel (clic droit) de la ligne en surbrillance.
  3. Sélectionnez Copier, puis Copier XPath.

Firefox :

  1. Ouvrez le menu contextuel (clic droit) de l'élément, puis sélectionnez Inspecter l'élément.
  2. Dans l'onglet Inspecteur, ouvrez le menu contextuel (clic droit) de la ligne en surbrillance.
  3. Sélectionnez Copier, puis XPath.

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

Tester le nouveau sélecteur et vérifiez qu'il est correct

Ouvrir le mode console dans le navigateur internet

Chrome :

  1. En haut à droite du navigateur, sélectionnez Personnaliser.
  2. Développez l'option Plus d'outils, puis sélectionnez Outils du développeur.
  3. Ouvrez DevTools dans le navigateur, puis sélectionnez Panneau de la console.

Firefox :

  1. En haut à droite du navigateur, cliquez sur 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 permettant de tester la requête de sélecteur DOM dans la console du navigateur est la suivante : 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 permettant de tester la requête de sélecteur XPath dans la console du navigateur est la suivante : $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 script Canary, omettez le préfixe « // ».

Ajouter le nouveau sélecteur au script Canary dans CloudWatch

  1. Ouvrez la console CloudWatch.
  2. Pour Synthetics, sélectionnez Scripts Canary.
  3. Cliquez sur Créer Canary.
  4. Sélectionnez Utiliser un plan, puis Générateur de flux de travail GUI.
  5. Consultez l'exemple dans le générateur de flux de travail de l'interface graphique pour créer un plan qui utilise le sélecteur nouvellement créé.
AWS OFFICIEL
AWS OFFICIELA mis à jour il y a un an