Tests de navigateur avec Selenium IDE scripts

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

   Vous pouvez télécharger et installer l'IDE Selenium pour les utilisateurs de Firefox et Chrome.

   • Pour les utilisateurs de Firefox, ajoutez le module complémentaire Firefox au navigateur. Redémarrez ensuite le navigateur si nécessaire.

   • Pour les utilisateurs de Chrome, utilisez l'une des méthodes suivantes :

     Note : L'extension Chrome Selenium IDE n'est plus disponible sur le Chrome Web Store.

     • Installer l'IDE Selenium en utilisant la ligne de commande ou l'invite de commande.

       npm install -g selenium-ide
       selenium-ide
       

       Pour plus d'informations sur les instructions d'installation, voir le fichier readme.

     • Téléchargez l'IDE à partir des versions de l'IDE Selenium GitHub en fonction de votre système d'exploitation, et exécutez l'application localement.

       Note : L'application Selenium IDE enregistre des projets dans le format 3.0 que le moteur de lecture Synthetic PoP BrowserScript ne prend pas encore en charge.

       Pour assurer la compatibilité, vous devez changer manuellement le numéro de version dans le fichier .side de 3.0 à 2.0.

       Après avoir enregistré votre projet dans l'application Selenium IDE, pour éditer manuellement le fichier .side , suivez les étapes suivantes :

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

       2. Recherchez le champ "version" dans le fichier. L'exemple suivant montre l'apparence du champ version :

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

       3. Modifier la version en 2.0.

       4. Sauvegardez le fichier.

2. Ouvrez Selenium IDE dans la barre de menu. 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 Arrêter l'enregistrement dans l'IDE Selenium.

   

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 délai d'attente 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. Dans le domaine des tests de navigateurs, on parle d' attente explicite. 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 l'expiration d'un délai donné, une erreur de délai s'affiche.

   Testez ensuite votre script en cliquant sur " Exécuter ".

   

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

   

Pour plus d'informations, voir Selenium IDE Get Started. L'exemple complet se trouve dans la section suivante.

Envisagez d'utiliser le programme local Instana Synthetic-browser-script pour tester et déboguer le script enregistré localement. Le programme d'exécution local Synthetic-browser-script fournit le même temps d'exécution qu'Instana Synthetics et peut vous aider à effacer les cookies ou les profils d'utilisateur pour chaque exécution de test.

Ensuite, vous pouvez créer Selenium IDE test sur Instana, sélectionner Create Synthetic Test -> Browser Script Test -> Switch to Advanced Mode, cliquer sur Add Script et télécharger le fichier .side .

• Si vous ne pouvez pas voir le graphique de la ligne de temps 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 supporte que les tests sérialisés dans les suites de tests, et donc les propriétés suivantes dans les scripts de l'IDE Selenium sont écrasées par le moteur de lecture du navigateur Instana :

  • "persistSession": faux
  • "parallèle" : faux

• Vous pouvez utiliser les commandes Explicit Wait disponibles 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 les 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é à l'aide de wait for element present, assert element present, ou d'autres commandes Explicit Wait. 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 prend pas en charge la recherche de motifs 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 Selenium IDE 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 informations d'identification de l'utilisateur définies dans le serveur backend d'Instana

  Pour créer un justificatif d'identité avec l'API ouverte synthétique, suivez les étapes suivantes :

  1. Assurez-vous que vos paramètres d'autorisation sont corrects.
  2. Utilisez Synthetic OpenAPI pour créer un identifiant en passant les variables credentialName et credentialValue .

  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 le script de l'IDE Selenium est de faire référence aux variables prédéfinies pour les distinguer des chaînes de caractères constantes. $secure.credentialName est la façon d'accéder aux informations d'identification de l'utilisateur dans Instana.

  Remarque : seul le format $secure.credentialName est pris en charge. Le format $secure[credentialName] n'est pas pris en charge.

  {
      "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 de détails des résultats du test 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 caractères de JavaScript, comme la commande echo , utilisez la syntaxe standard de 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 $attributes API dans le script et les propriétés personnalisées définies par customProperties dans la définition du test sont accessibles dans les résultats du test avec la métrique synthetic.tags . Vous pouvez utiliser la métrique synthetic.tags pour filtrer les résultats du test ou transmettre une valeur personnalisée à Charge utile personnalisée Smart Alert .

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

  Vous pouvez utiliser les commandes Selenium runScript et executeScript pour invoquer des API de test de navigateur prédéfinies et des variables globales dans Instana Browser Testing.

  La différence entre executeScript et runScript est que executeScript permet de stocker la valeur retourné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éfinir une variable d'environnement et l'utiliser 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'API de test du navigateur Instana pour mettre en œuvre facilement les étapes de défilement précédentes. 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 invoquent les API de test du navigateur Instana et les variables globales.

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