Foire aux questions

Vous pouvez utiliser l'exécuteur local « Synthetic-browser-script » pour tester et déboguer votre script en local.

Pour créer des tests de navigateur, consultez les exemples de scripts de navigateur synthétiques sur Instana.

Pour plus d'exemples, voir les références suivantes:

• Script de navigateur

• Selenium script latéral

• Scripts compatibles avec plusieurs navigateurs

Lorsque vous créez un test de navigateur, vous pouvez définir un délai d'expiration afin de vous assurer que le test échoue si son exécution dépasse la durée spécifiée. Toutefois, le paramètre de délai d'expiration ne s'applique que si la valeur est inférieure à BROWSERSCRIPT_TIMEOUT, dont la valeur par défaut est de 5 minutes.

Selenium Les tests enregistrés risquent d'échouer sur Instana si des cookies et l'historique sont présents dans vos navigateurs Web; les fenêtres contextuelles telles que « Accepter les cookies » pourraient ne pas s'afficher sur vos sites Web. Pour éviter ce problème, utilisez un exécuteur local de script de navigateur synthétique ( Instana ) afin de tester votre script en local après l'avoir créé.

Grâce au script de navigation synthétique d' Instana, vous pouvez effectuer les tâches suivantes :

• Effacer automatiquement les profils utilisateur : même si vos scripts s'exécutent correctement en local grâce au plug-in IDE d' Selenium, ils risquent de ne pas fonctionner sur Instana en raison des fenêtres contextuelles. Vous devez fermer la fenêtre en incrustation avant d'effectuer une action. A l'aide de l'exécuteur local Synthetic-browser-script, les profils utilisateur sont automatiquement effacés. Il n'est pas nécessaire de supprimer manuellement les cookies de votre navigateur.
• Tester les API de test de navigateur étendues d' Instana : si vous souhaitez utiliser les API de test de navigateur étendues d' Instana, vous pouvez utiliser l'exécuteur local « Synthetic-browser-script » pour les tester. L'environnement d'exécution du programme d'exécution local « Synthetic-browser-script » est identique à celui du moteur de navigateur « Synthetic » d' Instana.

Selenium IDE est un outil d'enregistrement open-source pour générer des localisateurs tels que des sélecteurs CSS, XPath, ID, etc. Selenium L'IDE permet d'identifier les éléments web. Cependant, il présente les limites suivantes :

• Un certain travail manuel est nécessaire pour ajouter les commandes Explicit Wait, le défilement, l'accès à Shadow DOM, etc.
• Les échecs des tests tels que l'élément n'est pas attaché au document de la page, l'élément n'est pas interchangeable ne sont parfois pas signalés. Selenium L'IDE est parfois incompatible avec les scripts runners, ce qui est un problème connu.

Testez votre script en local à l'aide de l'exécuteur local « Synthetic-browser-script », fourni par Instana. Avec cet outil, vous pouvez voir que l'interface utilisateur du navigateur complet vous invite à effectuer vos actions dans les scripts de test pour vous aider à déboguer et à résoudre les problèmes. Si votre logique de test est complexe, par exemple si elle comporte des boucles, vous pouvez également essayer d'utiliser les tests de script de navigateur synthétiques d' Instana, disponibles à l'adresse JavaScript-based. Comment ajouter des étapes manuelles pour soutenir Shadow DOM et ainsi de suite, voir les autres sections de cette rubrique.

Le test peut échouer avec l'un des messages d'erreur suivants:

• is not clickable at point (285,436) because another element <li> obscures it
• Failed to execute command clickElement {} element not interactable.

Pour résoudre ce problème, déplacez votre souris pour mettre en évidence l'élément. Vous pouvez utiliser l'une des méthodes suivantes.

Vous pouvez rencontrer l'erreur StaleElementReferenceError: stale element reference: element is not attached to the page document. Il s'agit d'une erreur courante de type « Selenium ».

Cette erreur se produit lorsque votre script de test fait référence à un élément Web qui n'est plus associé au DOM, ce qui peut arriver avec les pages Web utilisant des frameworks tels qu' React ou Vue. Pour résoudre ce problème, voir les exemples.

Comment vérifier si votre scénario de test a réussi ?

Dans le champ de test du navigateur, utilisez Assertions, Attente explicite pour vérifier les résultats de vos tests. Vous pouvez ainsi vous assurer que votre page web est chargée et affichée comme prévu. Grâce aux tests de navigateur d' Instana, vous pouvez également générer des captures d'écran de vos sessions de test et consulter les journaux de la console (commande Echo dans les scripts enregistrés d' Selenium ), les journaux du navigateur et le graphique chronologique.

Les commandes suivantes peuvent être utiles :

{
      "id": "938df959-9b65-4ae4-a2f5-59be6188ea5f",
      "comment": "This is how to sleep for 5 seconds.",
      "command": "pause",
      "target": "5000",
      "targets": [],
      "value": ""
},
{
    "id": "2d5c6b52-d2d7-4592-8052-87572a09e58b",
     "comment": "This is how to take screenshot",
     "command": "executeScript",
     "target": "await $browser.takeScreenshot()",
     "targets": [],
     "value": ""
}
 

Vous pouvez également essayer les commandes d'assertion suivantes :

{
    "id": "46eb59c2-5fd6-4481-b3e8-eaaddab79a69",
    "comment": "This is one type of Assertions in browser testing",
    "command": "assertTitle",
    "target": "instana - Google Search",
    "targets": [],
    "value": ""
}
 

L'exemple suivant montre comment utiliser Explicit Wait pour vérifier votre test dans un script de navigateur :

await $browser.waitForAndFindElement($driver.By.xpath(`//h1[contains(text(), 'Websites & mobile apps')]`), 30000)
await $browser.wait($driver.until.titleContains(`Websites – Websites & mobile apps`), 30000);
 

Essayez d'ajouter les commandes suivantes dans votre fichier d'enregistrement :

{
      "id": "615cb3e5-fe2a-4859-b0aa-9df52f22028f",
      "comment": "This is Explicit Wait in browser testing",
      "command": "waitForElementPresent",
      "target": "id=mainmenu",
      "targets": [],
      "value": "30000"
},
{
      "id": "03e23d25-38e3-4051-81ff-740109350ee8",
      "comment": "This is how to add logging message in console logs",
      "command": "echo",
      "target": "Verify UI dashboard",
      "targets": [],
      "value": ""
}
 

Si votre site Web utilise des cadres, vous risquez de rencontrer l'erreur aucun élément de ce type .

Pour résoudre ce problème, passez à l'armoire ou à l'iframe avec $browser.switchTo().frame(id: number | WebElement);.

Pour passer au cadre ou à l'iframe dans le cadre du test du script du navigateur Instana :

let frameElement = await $browser.waitForAndFindElement($driver.By.xpath('//*[contains(@id, "pop-frame")]'), 10000);
await $browser.switchTo().frame(frameElement);
 

Pour rechercher des éléments Web, consultez la documentation disponible à l'adresse Selenium concernant les stratégies de localisation.

Le format du sélecteur CSS est By.css(element[attribute='attribute-value']).

Le format de l'expression XPath est By.xpath("//element[@attribute='value']") ou By.xpath("//*[@attribute='value']").

Pour rechercher un élément par attributs, par exemple <a href="mysite.com"></a>, exécutez:

// CSS selector
$driver.By.css(a[href*="example"] )
 

// XPath expression
$driver.By.xpath("//a[contains(@href,'Electronics')]")
$driver.By.xpath(`//dds-footer-nav-item[contains(.,'Developer education')]`)
 

Pour changer de localisateur par défaut dans le plug-in de l'environnement de développement intégré Selenium , cliquez sur la cible.

Vous pouvez sélectionner un élément dans une liste déroulante en utilisant la commande select. Avec la propriété Value, vous pouvez sélectionner une valeur parmi une série d'options avec label=, value=, id=, ou index=. Si aucun préfixe n'est fourni, une correspondance sur le label est utilisée. Utilisez label, value ou id au lieu de index. Sinon, les résultats entre Instana et l'IDE de Selenium risquent de ne pas être compatibles.

L'exemple suivant montre comment sélectionner June dans la liste déroulante à l'aide de la commande select. Les méthodes permettant de sélectionner l'option Juin sont indiquées aux lignes 3, 4 et 5. Ces méthodes fonctionnent sur l'IDE d' Selenium et sur Instana.

<select id="month" name="month" class="inline six" onchange="document.cf.typ[1].checked=true">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8" selected="">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>
 

L'attente explicite est une bonne pratique bien établie en matière d' Selenium, qui permet d'éviter les no such element erreurs et de réduire les temps d'attente ou de mise en veille. L'attente explicite est préférée par rapport à l'attente implicite et à $browser.sleep.

Pour utiliser l'attente explicite sur l' Instana, exécutez les commandes comme indiqué dans les exemples suivants :

// wait until the title comes out
await $browser.wait($driver.until.titleContains('Year 2023 Calendar'), 10000);

// Call the wait function.
await $browser.wait(function () {
    return $browser.getTitle().then(function (title) {
      return title.includes("Google");
    });
  }, 10000);

await $browser.wait(async function () {
    const title = await $browser.getTitle();
    return title.includes("Google");
  }, 10000);

// waitForAndFindElement API
const cookies = await $browser.waitForAndFindElement(
    $driver.By.id(`truste-consent-button`),
    30000
);
await cookies.click();
 

Dans le script de l'IDE Selenium, vous pouvez utiliser la commande WAIT comme indiqué dans l'exemple suivant. Entrez le temps d'attente en millisecondes pour la propriété value.

{
"id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
"comment": "",
"command": "waitForElementPresent",
"target": "id=result-stats",
"targets": [
    ["id=result-stats", "id"],
    ["css=#result-stats", "css:finder"],
    ["xpath=//div[@id='result-stats']", "xpath:attributes"],
    ["xpath=//div[@id='slim_appbar']/div/div", "xpath:idRelative"],
    ["xpath=//div[7]/div/div/div/div/div", "xpath:position"]
],
"value": "10000"
}
 

Pour appeler les API étendues de l' Instana, exécutez la commande runScript executeScript ou à l'aide des scripts de l'IDE Selenium.

{
"id": "e781c454-0080-447a-b905-7183443956f3",
"comment": "",
"command": "runScript",
"target": "await $browser.takeScreenshot()",
"targets": [],
"value": ""
}
 

Les éléments de la liste déroulante sont sélectionnés avec findElement et cliqués.

<select id="month" name="month" >
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
...
</select>

// find element by css or xpath
await $browser.findElement($driver.By.css(`#month > option:nth-child(3)`)).click();
await $browser.findElement($driver.By.xpath(`//select[@id='month']/option[3]`)).click();

// wait until element located and do assertion
await $browser.wait($driver.until.elementLocated($driver.By.id("month")), 3000).click();
assert.equal(5, await $browser.findElement($driver.By.id("month")).getAttribute("value"));
await $browser.findElement($driver.By.xpath("//select[@id='month']/option[3]")).click();
assert.equal(3, await $browser.findElement($driver.By.id("month")).getAttribute("value"));
 

Pour tester les éléments DOM de l'ombre, utilisez la fonction getShadowRoot() .

Pour utiliser la fonction getShadowRoot() , exécutez la commande suivante:

let shadowHost = await $browser.waitForAndFindElement(shadowHostSelector, timeout);
let shadowRoot = await shadowHost.getShadowRoot();
let element = await shadowRoot.findElement(elementSelector);
console.log("element text is:", await element.getText(), ", id is:", await element.getId());
 

Ou utilisez les API avancées d' Instana s dans les scripts enregistrés de l'IDE d' Selenium, puis utilisez le moteur d'exécution local pour les tester :

{
"id": "4f602785-2a19-4b5f-a23c-7ae6f6e58d5d",
"comment": "",
"command": "executeScript",
"target": "let shadowHost = await $browser.waitForAndFindElement($driver.By.css(`.field > q2-input`), 10000); let shadowRoot = await shadowHost.getShadowRoot(); let element = await shadowRoot.findElement($driver.By.css(`*[type='text']`)); await element.sendKeys(`user1`); ",
"targets": [],
"value": ""
},
 

Pour vérifier le texte de votre page avec une correspondance partielle, vous pouvez utiliser findElement par XPath.

Pour les tests de script BrowserScript et Selenium SIDE, l' 2FA (authentification à deux facteurs) est prise en charge pour la connexion aux sites Web.

Pour consulter le script de test complet, voir l'exemple disponible à l'adresse BrowserScript et l'exemple SIDE disponible à l'adresse Selenium.

Pour tester le script ou l'exécuter localement, remplacez les variables url et $secure du fichier synb.json par les valeurs réelles.

Pour passer à l' 2FA, procédez comme suit:

1. Obtenez la clé secrète TOTP (Time-based One-Time Password), un secret partagé généré de manière aléatoire entre vous et le site Web pour créer le jeton TOTP permettant de se connecter au site Web avec l'authentification à deux facteurs (2FA). Cette clé secrète est généralement fournie sous la forme d'un code QR ou d'un code numérique lors de la configuration initiale de 2FA. Pour obtenir le code numérique, cliquez sur l'un des liens d'aide suivants sur la page de configuration de l'authentification à deux facteurs:
   • Impossible de scanner le code QR
   • Problème lors du scannage ? Entrez un code à la place.
2. Pour protéger votre clé secrète, créez des identifiants synthétiques pour la clé secrète TOTP en utilisant l' API ouverte Instana.
3. Lors de votre test de navigateur, $browser.generateTOTPToken(key: string) utilisez l' API de test de navigateur pour générer un jeton TOTP à durée limitée à saisir.
   • Pour utiliser BrowserScript pour l'authentification 2FA :

     let totp_token = $browser.generateTOTPToken($secure.totpKey);
     await findElementByIdAndSendKeys("password", totp_token);
      

   • Pour utiliser le script SIDE Selenium pour l'authentification 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}"
     },