Test du navigateur avec des scripts IDE Selenium

1. Téléchargez et installez l'IDE d' Selenium.

   Vous pouvez télécharger et installer l'IDE « Selenium » si vous utilisez l' Firefox ou Chrome.

   • Pour les utilisateurs d' Firefox, ajoutez l 'extension Firefox à votre navigateur. Redémarrez ensuite le navigateur si nécessaire.

   • Si vous utilisez Chrome, suivez l'une des procédures suivantes :

     Remarque : l'extension Chrome « Selenium IDE » n'est plus disponible sur le Chrome Web Store.

     • Installez l'IDE d' Selenium s à l'aide de la ligne de commande ou de l'invite de commande.

       npm install -g selenium-ide
       selenium-ide
        

       Pour plus d'informations sur les instructions d'installation, consultez le fichier Lisez-moi.

     • Téléchargez l'IDE depuis les versions GitHub Selenium IDE correspondant à votre système d'exploitation et exécutez l'application localement.

       Remarque : l'application IDE « Selenium » enregistre les projets au format « 3.0 », que le moteur de lecture « Synthetic PoP » ( BrowserScript ) ne prend pas encore en charge.

       Pour garantir la compatibilité, vous devez modifier manuellement le numéro de version dans le .side fichier, en remplaçant 3.0 par 2.0.

       Une fois votre projet enregistré dans l'application IDE d' Selenium, procédez comme suit pour modifier le .side fichier manuellement :

       1. Ouvrez le fichier .side dans n'importe quel éditeur de texte.

       2. Recherchez le champ « version » dans le fichier. L'exemple suivant montre à quoi ressemble le champ « version » :

              {
                  "id": "some-id",
                  "version": "3.0",
                    ...
              }
           

       3. Modifiez la version en 2.0.

       4. Sauvegardez le fichier.

2. Ouvrez l'environnement de développement intégré Selenium dans la barre de menus. Cliquez sur le lien Record a new test in a new project et enregistrez un script en suivant les instructions.

   Lorsque Selenium IDE enregistre les actions de l'utilisateur, il génère une commande pour chacune d'elles dans un script.

   

3. Effectuez des actions de test pour rechercher les mots-clés instana dans Google.

   Appuyez sur Enter pour accéder à la page des résultats de la recherche. Ajoutez une condition wait sur cette page ; cliquez avec le bouton droit de la souris sur l'icône de recherche et sélectionnez Selenium IDE -> Wait For -> Present. Entrez une valeur pour le délai d'attente dans la propriété Value pour attendre que l'élément s'affiche, par exemple, 10000 pour attendre jusqu'à 10 secondes.

   

4. Ajoutez une assertion pour vérifier votre test. Ajoutez une commande assert ; cliquez avec le bouton droit de la souris sur la page et sélectionnez Selenium IDE -> Assert -> Title.

   Pour terminer vos enregistrements, cliquez sur le bouton Stop recording dans Selenium IDE.

   

5. Vous pouvez ajouter des commandes telles que send keys avec la valeur ${KEY_ENTER} pour taper Enter dans la zone de texte de recherche.

   Fournissez une valeur de temporisation telle que 10000 dans la propriété Value de la commande wait for element present pour attendre une condition. Utilisez la même valeur Target que celle utilisée à l'étape précédente pour localiser l'élément web de la zone de texte de recherche. Il s'agit d'une étape importante pour garantir la stabilité et la réussite de votre test. C'est ce que l'on appelle les attentes explicites dans le domaine des tests de navigateurs. La logique interroge l'application sur une condition spécifique avant de passer à la commande suivante dans le code. Si la condition n'est pas remplie avant un certain délai, une erreur de délai s'affiche.

   Testez ensuite votre script en cliquant sur run.

   

6. Après l'enregistrement, sauvegardez le script dans un fichier .side .

   

Pour plus d'informations, consultez la page « Premiers pas avec l'IDE Selenium ». L'exemple complet se trouve dans la section suivante.

Pensez à utiliser l'exécuteur local « Synthetic-browser-script » de l' Instana pour tester et déboguer le script enregistré en local. L'exécuteur local « Synthetic-browser-script » offre le même environnement d'exécution que Synthetics d' Instana, et il vous permet d'effacer les cookies ou les profils utilisateur à chaque exécution de test.

Vous pouvez ensuite créer un test IDE d' Selenium sur Instana, sélectionner Create Synthetic Test -> Browser Script Test -> Switch to Advanced Mode, cliquer Add Scriptsur, puis télécharger le .side fichier.

• Si vous ne voyez pas le graphique chronologique dans les résultats du test sur Instana. Vous pouvez vérifier si l'ID du test se trouve dans la propriété suites -> tests. Sans cet identifiant de test, votre test n'effectue pas de lecture.

  "suites": [{
      "id": "7de135e9-a6c4-4b39-b28a-092bb0d7cbac",
      "name": "Search Instana",
      "persistSession": false,
      "parallel": false,
      "timeout": 300,
      "tests": ["c0283e5a-8cbd-492f-8b3d-f2476f319264"]
  }],
   

• Instana ne prend en charge que les tests sérialisés dans les suites de tests; par conséquent, les propriétés suivantes des scripts de l'IDE Selenium sont remplacées par le moteur de lecture du navigateur Instana :

  • "persistSession": faux
  • « parallel » : false

• Vous pouvez utiliser les commandes Explicit Wait pour attendre qu'une condition soit remplie avant de passer à la commande suivante dans le code. L'attente explicite est une bonne pratique dans les tests de navigateur. Si la condition spécifiée n'est pas remplie avant l'expiration du délai fixé, une erreur de délai s'affiche. Votre test échoue avec une erreur. La commande wait la plus couramment utilisée est wait for element present. Saisissez la valeur du délai d'attente en millisecondes dans la propriété value.

  {
      "id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
      "comment": "",
      "command": "waitForElementPresent",
      "target": "id=searchform",
      "targets": [],
      "value": "10000"
  }
   

• Vous pouvez faire une pause de quelques millisecondes avec la commande pause. Dans l'exemple suivant, le temps d'attente est de 3 secondes.

  {
      "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb7",
      "comment": "",
      "command": "pause",
      "target": "3000",
      "targets": [],
      "value": ""
  }
   

Pour valider automatiquement les résultats de vos tests, vous pouvez utiliser des assertions et Explicit Wait. Si la validation échoue, le statut du résultat du test est affiché comme étant un échec. Vous pouvez surveiller les échecs des tests avec Synthetic Smart Alert.

• Vous pouvez attendre que l'élément requis soit présent dans l'interface utilisateur avant un délai déterminé avec wait for element present, assert element present ou d'autres commandes Attente explicite. Définissez une valeur pour le délai d'attente dans la propriété value des commandes wait for. Pour les commandes assert, le délai d'attente est de 15 secondes.

  {
      "id": "e9a3161a-de29-4557-bbf6-9950c1881425",
      "comment": "",
      "command": "assertElementPresent",
      "target": "linkText=About",
      "targets": [],
      "value": ""
  }
   

• Vous pouvez utiliser la commande assert title pour valider les titres des pages.

  {
      "id": "46eb59c2-5fd6-4481-b3e8-eaaddab79a69",
      "comment": "",
      "command": "assertTitle",
      "target": "instana - Google Search",
      "targets": [],
      "value": ""
  }
   

• Vous pouvez utiliser la commande assert text pour confirmer que le texte d'un élément contient la valeur fournie. La propriété value de cette commande doit être une chaîne de caractères exacte. Selenium L'IDE ne supporte pas le pattern matching pour la commande.

  {
      "id": "ed733875-5682-4a3b-9a3e-9286f88a62ca",
      "comment": "",
      "command": "assertText",
      "target": "linkText=About",
      "targets": [],
      "value": "About"
  }
   

Vous pouvez utiliser la commande echo pour imprimer un message de journalisation dans les journaux de la console afin de vous aider à résoudre les problèmes.

{
    "id": "03e23d25-38e3-4051-81ff-740109350ee8",
    "comment": "",
    "command": "echo",
    "target": "Generate a TOTP token from a TOTP key",
    "targets": [],
    "value": ""
}
 

La plupart des cas de test nécessitent de faire défiler la page pour rendre un élément web focalisé, visible ou cliquable. Dans le script de l'IDE Selenium, vous devez utiliser JavaScript pour le défilement. Utilisez la commande runScript ou executeScript pour mettre en œuvre le défilement, comme le montre l'exemple suivant :

• Défilement jusqu'à la moitié de la hauteur de la page :

  {
      "id": "e4d8bc94-cd2c-4648-b64e-952ccfa89aaa",
      "comment": "",
      "command": "runScript",
      "target": "window.scrollTo(0, document.body.scrollHeight/2)",
      "targets": [],
      "value": ""
  }
   

• Faites défiler jusqu'à la fin de la page :

  {
      "id": "e4d8bc94-cd2c-4648-b64e-952ccfa89aaa",
      "comment": "",
      "command": "runScript",
      "target": "window.scrollTo(0, document.body.scrollHeight)",
      "targets": [],
      "value": ""
  }
   

• Faites défiler jusqu'au début de la page :

  {
      "id": "e4d8bc94-cd2c-4648-b64e-952ccfa89aaa",
      "comment": "",
      "command": "runScript",
      "target": "window.scrollTo(0, 0)",
      "targets": [],
      "value": ""
  }
   

• Faites défiler jusqu'à l'élément web et cliquez dessus :

  Attendez que l'élément soit localisé, faites défiler jusqu'à lui et cliquez dessus.

  {
      "id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
      "comment": "",
      "command": "waitForElementPresent",
      "target": "id=pnnext",
      "targets": [],
      "value": "20000"
  },
  {
      "id": "b345d354-1d95-45d0-81ab-7c78695ed040",
      "comment": "",
      "command": "runScript",
      "target": "const el = document.getElementById('pnnext'); el.scrollIntoView(); el.click();",
      "targets": [],
      "value": ""
  }
   

  {
      "id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
      "comment": "",
      "command": "waitForElementPresent",
      "target": "css=#pnnext > span:nth-child(2)",
      "targets": [],
      "value": "20000"
  },
  {
      "id": "b345d354-1d95-45d0-81ab-7c78695ed040",
      "comment": "",
      "command": "runScript",
      "target": "const el = document.querySelector('#pnnext > span:nth-child(2)'); el.scrollIntoView(); el.click();",
      "targets": [],
      "value": ""
  }
   

• Pour double-cliquer sur la zone de filtrage et taper des touches, vous pouvez utiliser l'exemple suivant :

  {
      "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb1",
      "comment": "",
      "command": "doubleClickAt",
      "target": "id=repos-list-filter-input",
      "targets": [],
      "value": ""
  }, {
      "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb1",
      "comment": "",
      "command": "type",
      "target": "id=repos-list-filter-input",
      "targets": [],
      "value": "instana"
  }
   

• Pour taper la touche Enter après une pause de 3 secondes dans la zone de filtrage, vous pouvez utiliser l'exemple suivant :

  {
      "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb2",
      "comment": "",
      "command": "pause",
      "target": "3000",
      "targets": [],
      "value": ""
  }, {
      "id": "d0239041-5bdf-42be-b920-c5055628f161",
      "comment": "",
      "command": "sendKeys",
      "target": "id=repos-list-filter-input",
      "targets": [],
      "value": "${KEY_ENTER}"
  },
   

Dans l'exemple suivant, le script IDE « Selenium » est utilisé pour rechercher les mots-clés « Instana » dans un moteur de recherche :

{
  "id": "d54cb226-42e2-493a-9965-c05d209da23a",
  "version": "2.0",
  "name": "test-google-search",
  "url": "https://www.google.com",
  "tests": [{
    "id": "c0283e5a-8cbd-492f-8b3d-f2476f319264",
    "name": "search instana",
    "commands": [{
      "id": "cd6aaf21-62f8-4d7f-af0a-5fe8beee8fde",
      "comment": "",
      "command": "open",
      "target": "/",
      "targets": [],
      "value": ""
    }, {
      "id": "f6ef14b9-0f06-4b62-bb29-41c21a298703",
      "comment": "",
      "command": "click",
      "target": "id=APjFqb",
      "targets": [],
      "value": ""
    }, {
      "id": "ed0b72f9-8da9-4413-8088-819b89f1f6dc",
      "comment": "",
      "command": "type",
      "target": "id=APjFqb",
      "targets": [],
      "value": "instana"
    }, {
      "id": "f9746499-1d97-4f83-aa8a-a5419d9e3922",
      "comment": "",
      "command": "sendKeys",
      "target": "id=APjFqb",
      "targets": [],
      "value": "${KEY_ENTER}"
    }, {
      "id": "93939f21-739f-4c84-bb2e-580af6b1bc76",
      "comment": "",
      "command": "waitForElementPresent",
      "target": "css=.zgAlFc svg",
      "targets": [],
      "value": "10000"
    }, {
      "id": "331e3fc1-9baa-4519-9814-3105d6d06937",
      "comment": "",
      "command": "assertTitle",
      "target": "instana - Google Search",
      "targets": [],
      "value": ""
    }]
  }],
  "suites": [{
    "id": "7de135e9-a6c4-4b39-b28a-092bb0d7cbac",
    "name": "Search Instana",
    "persistSession": false,
    "parallel": false,
    "timeout": 300,
    "tests": ["c0283e5a-8cbd-492f-8b3d-f2476f319264"]
  }],
  "urls": ["https://www.google.com/"],
  "plugins": []
}
 

• Accéder aux identifiants utilisateur définis sur le serveur backend Instana

  Pour créer un identifiant avec l' API Synthetic Open, procédez comme suit :

  1. Assurez-vous que les droits d'accès sont correctement configurés.
  2. Utilisez la fonction ` OpenAPI ` pour créer un identifiant en lui transmettant les variables credentialName `` credentialValue et ``.

  Ensuite, dans votre script de test, utilisez $secure.credentialName pour faire référence à l'identifiant créé, par exemple, $secure.password ou $secure.username. ${} dans la propriété Value dans Selenium Le script de l'IDE fait référence aux variables prédéfinies pour les distinguer des chaînes de caractères constantes. $secure.credentialName voici comment accéder aux identifiants des utilisateurs dans Instana.

  Remarque : seul le $secure.credentialName format est pris en charge. Ce $secure[credentialName] format n'est pas pris en charge.
  Remarque : les références aux identifiants sécurisés ($secure.credentialName) sont résolues avant l'exécution du script. Vous devez indiquer directement le nom des informations d'identification. Ne créez pas la référence de manière dynamique à l'aide de variables, de concaténation de chaînes ou eval()de, car ces méthodes ne sont pas prises en charge et ne sont pas évaluées.

  {
      "id": "98b7df8f-ec53-47f9-b7a0-0eedbfc64ff0",
      "comment": "",
      "command": "click",
      "target": "id=email",
      "targets": [],
      "value": ""
  }, {
      "id": "83ae509f-4247-4acc-ab99-46ef4c620f4f",
      "comment": "",
      "command": "type",
      "target": "id=email",
      "targets": [],
      "value": "${$secure.username}"
  }
   

• Générer un mot de passe à usage unique basé sur le temps (TOTP) à partir d'une clé secrète pour se connecter au site web avec une authentification à deux facteurs (2FA).

  {
      "id": "ec51296b-4d16-4167-ac83-ba87f89cc0c7",
      "comment": "Generate a TOTP token from a TOTP key",
      "command": "executeScript",
      "target": "return $browser.generateTOTPToken($secure.totpKey);",
      "targets": [],
      "value": "totpToken"
  }, {
      "id": "3cbc306a-ed33-46bf-9923-92752b0466f2",
      "comment": "",
      "command": "type",
      "target": "id=password",
      "targets": [],
      "value": "${totpToken}"
  }
   

Vous trouverez les captures d'écran sur la page détaillée des résultats de test de l' Instana.

{
    "id": "b49ff289-f041-44f1-836b-ba7e993c3f07",
    "comment": "",
    "command": "executeScript",
    "target": "await $browser.takeScreenshot()",
    "targets": [],
    "value": ""
}
 

Vous pouvez utiliser $synthetic.xxxx, $secure.xxx ou $env.xxx pour accéder aux variables globales, comme le montre l'exemple suivant.

Pour utiliser des variables dans la syntaxe des chaînes de modèle dans JavaScript, comme dans la echo commande, utilisez la syntaxe standard d' Node.js, et placez les variables dans ${}.

{
    "id": "da853ea2-7253-4938-ad2d-9272f4c6d3e2",
    "comment": "",
    "command": "echo",
    "target": "tag1's value is ${$synthetic.tag1}",
    "targets": [],
    "value": ""
}
 

{
    "id": "26438c58-868d-4d6d-9e6f-dbe9d8f373fd",
    "comment": "",
    "command": "executeScript",
    "target": "$attributes.set('regionName', 'green-region');",
    "targets": [],
    "value": ""
}
 

Les attributs personnalisés définis par ` $attributesAPI ` dans le script et les propriétés personnalisées définies dans la définition customProperties du test sont accessibles dans les résultats du test via la synthetic.tags métrique. Vous pouvez utiliser cet synthetic.tags indicateur pour filtrer les résultats des tests ou transmettre une valeur personnalisée à la charge utile personnalisée de Smart Alert.

• Utilisez les commandes Selenium runScript et executeScript pour appeler les API de test de navigateur avancé.

  Vous pouvez utiliser les commandes SeleniumrunScript et executeScript pour appeler les API de test de navigateur prédéfinies et les variables globales dans Instana Browser Testing.

  La différence entre executeScript et runScript est que executeScript prend en charge le stockage de la valeur renvoyée dans une variable. Vous pouvez ensuite assert ou echo la variable avec ${xxx}. Pour stocker la valeur renvoyée, utilisez le mot-clé return et indiquez un nom de variable dans le champ de saisie value.

  {
      "id": "ec51296b-4d16-4167-ac83-ba87f89cc0c7",
      "comment": "Generate a TOTP token from a TOTP key",
      "command": "executeScript",
      "target": "return $browser.generateTOTPToken($secure.totpKey);",
      "targets": [],
      "value": "totpToken"
  }, {
      "id": "3cbc306a-ed33-46bf-9923-92752b0466f2",
      "comment": "",
      "command": "echo",
      "target": "Generated TOTO token ${totpToken}",
      "targets": [],
      "value": ""
  }
   

• Définissez une variable d'environnement et utilisez-la dans les API de test du navigateur.

  {
      "id": "10d09a25-d101-43b0-84df-f22265b7cec6",
      "comment": "",
      "command": "storeJson",
      "target": "{\"proxy\": \"<proxy_server>:8080\", \"noproxy\": \"localhost,google.com,192.168.1.0/24\"}",
      "targets": [],
      "value": "proxyConfig"
  },
  {
      "id": "237bd334-d963-4a73-b9bb-4c31f1dce051",
      "comment": "",
      "command": "runScript",
      "target": "await $browser.setProxy(${proxyConfig.proxy}, ${proxyConfig.noproxy});",
      "targets": [],
      "value": ""
  }
   

• Faites défiler jusqu'à l'élément web et cliquez dessus.

  Vous pouvez utiliser l'outil de test de navigateur Instana API pour mettre en œuvre facilement les étapes de défilement décrites précédemment. L'exemple ci-dessous met en œuvre la logique des éléments waiting for element present, waiting for element visible, scrollIntoView et click. La fonction scrollIntoView permet de faire défiler l'élément dans la zone visible de la fenêtre du navigateur.

  {
      "id": "b345d354-1d95-45d0-81ab-7c78695ed040",
      "comment": "",
      "command": "runScript",
      "target": "let element = await $browser.waitForAndFindElement(By.xpath(`//a[contains(.,'Customer stories')]`), 30000); await $browser.executeScript(`arguments[0].scrollIntoView()`, element); await $browser.executeScript(`arguments[0].click()`, element)",
      "targets": [],
      "value": ""
  }
   

{
    "id": "2e91846e-037b-473d-a977-7fbdfe52d1a4",
    "comment": "",
    "command": "executeScript",
    "target": "await $browser.addHostnamesToDenylist(['ajax.googleapis.com/ajax/libs/jquery']);",
    "targets": [],
    "value": ""
}
 

{
    "id": "a418460e-a0a9-4c68-bbd0-fb78d6495e92",
    "comment": "",
    "command": "runScript",
    "target": "await $network.setProxy(${proxyConfig.proxy}, ${proxyConfig.noproxy});",
    "targets": [],
    "value": ""
}
 

Dans l'exemple suivant, les commandes Selenium font appel aux API de test de navigateur Instana et à des variables globales.

Exemple de connexion et de validation de l'interface utilisateur d' Instana