Script de navigateur

Les variables globales prédéfinies décrites dans le tableau accélèrent le développement de script.

Les utilisations et la déclaration des variables globales prédéfinies sont les suivantes:

Les tests de navigateur prennent en charge les API basées sur Seleniumet plus de 30 autres API de test de navigateur étendu. Pour plus d'informations, consultez la documentation de API.

Les exemples de code suivants montrent comment écrire un test de script de navigateur pour implémenter les actions de base suivantes:

• Préparer les en-têtes: pour personnaliser les en-têtes de demande avant d'accéder aux sites Web, utilisez la commande suivante:

  await $browser.addHeader("test", "test");
  await $browser.addHeaders({ "test1": "test1", "test2": "test2" });
  await $browser.deleteHeaders(["test1", "test2"]);
  $browser.getHeaders().forEach((value, key) => console.log(">>>>>>>>>>>>>>>>>>>", "User customized headers: ", key + "=" + value));
   

• Contrôler l'accès: pour contrôler l'accès avec la liste de refus et d'autorisation, utilisez les commandes suivantes:

  await $browser.addHostnamesToDenylist(["*google*", "*timeanddate*"]);
  await $browser.deleteHostnameFromDenylist("*timeanddate*");
  await $browser.get("https://www.google.com");
   

  Lorsque vous effectuez une recherche sur Google après avoir exécuté ces commandes, vous verrez s'afficher le message wwww.google.com is blocked.

• Ouvrir URL : pour ouvrir URL dans votre navigateur et accéder au site web, utilisez la commande suivante :

  await $browser.get("http://www.bing.com");
   

• Définir le temps de veille: Pour définir l'option de veille dans le navigateur, utilisez la commande suivante. Le paramètre correspond à la durée, en millisecondes, de la mise en veille. Dans l'exemple suivant, le navigateur est en veille pendant 2 secondes.

  await $browser.sleep(2000);
   

• Utilisez l'assertion avec le titre de la page: l'assertion est essentielle dans vos tests pour déterminer les résultats de test. Pour utiliser l'assertion avec un titre de page ou une source de page, utilisez le code suivant. Vous pouvez utiliser la bibliothèque const assert = require("assert").strict; ou la bibliothèque d'assertion Chai const { assert } = require("chai");. Utilisez console.log pour vous connecter à la sortie de la console et au fichier journal de la console.

  const { assert } = require("chai");
  
  await $browser.get("http://www.timeanddate.com");
  let page = await $browser.getPageSource();
  assert.isTrue(page.includes("<title>timeanddate.com</title>"));
  console.log(">>>>>>>>>>>>>>>>>>>", "Page title: ", await $browser.getTitle());
   

• Obtenir une session: pour obtenir des informations sur une session, utilisez la commande suivante:

  let session = await $browser.getSession();
  console.log(">>>>>>>>>>>>>>>>>>>", "Session id: ", session.getId());
   

• Agrandir la taille de la fenêtre: pour agrandir la taille de la fenêtre du navigateur, utilisez la commande suivante:

  $browser.manage().window().maximize();
   

• Capture d'écran: Pour prendre une capture d'écran du navigateur, utilisez la commande suivante:

  await $browser.takeScreenshot();
   

• Attendre et rechercher un élément sur la page: vous pouvez utiliser les commandes du tableau suivant pour des recherches spécifiques:

  Nom	Utilisation
  $browser.waitForAndFindElement($driver.By.id("boxyear"), 1000)	Attendre et rechercher l'élément par ID jusqu'à ce que l'élément soit visible ou que la valeur de délai d'attente soit atteinte
  $browser.findElements($driver.By.css('select'))	Recherche de plusieurs éléments sur la page à l'aide du sélecteur CSS
  $browser.findElement($driver.By.linkText("About"))	Recherchez l'élément par linkText.
  $browser.findElement($driver.By.xpath('//input[@value='f']'))	Rechercher un élément par XPath.
  $browser.$('#boxyear')	Rechercher un élément par ID.
  $browser.$$(".rd-box")	Rechercher des éléments par classe.
  elem.$('h2').$('a').getText()	Rechercher un élément par nom d'élément.

  L'exemple de code suivant montre comment attendre et trouver un élément sur la page:

  // Find element by XPath and wait for the element until specified timeout value reached
  await $browser.waitForAndFindElement($driver.By.xpath(`//textarea[@inputmode='search']`), 10000);
  
  // Find element by id
  let elem = await $browser.waitForAndFindElement($driver.By.id("boxyear"), 1000);
  assert.equal("2022", await elem.getAttribute("value"));
  assert.equal("2022", await $browser.$('#boxyear').getAttribute("value"));
  
  // Find elements by CSS selector
  let selects = await $browser.findElements($driver.By.css('select'));
  assert.equal(2, selects.length);
  
  // Find elements by class
  let elems = await $browser.$$(".rd-box");
  console.log(await elems[0].$('h2').$('a').getText());
   

• Rechercher des éléments et effectuer des actions : l'exemple suivant montre comment rechercher un élément à l'aide d 'un sélecteur CSS et envoyer des touches à l'aide d 'ActionSequence :

  <input id="sb_form_q" name="q" type="search">
   

  let textarea = await $browser.waitForAndFindElement($driver.By.css('#sb_form_q'), 10000);
  // Actions to send keys
  await $browser
    .actions()
    .move({ origin: textarea })
    .sendKeys("synthetic")
    .pause(5000)
    .sendKeys($driver.Key.ENTER)
    .perform();
   

• Wait until title comes condition: pour appliquer l'attente jusqu'à ce que le titre vienne à la condition, utilisez la commande suivante:

  await $browser.wait($driver.until.titleContains('Year 2022 Calendar'), 10000);
   

• Condition d'attente et d'interrogation jusqu'au délai d'attente: pour appliquer la condition d'attente et d'interrogation jusqu'au délai d'attente, utilisez les commandes suivantes:

  Remarque : L'exemple suivant montre un appel de chaîne de promesses compatible avec une version antérieure. N'utilisez pas ce code dans les versions récentes d' JavaScript Utilisez plutôt les techniques modernes d' JavaScript asynchrone avec Async et Await.

  $browser.get("https://www.google.com");
  $browser.wait(function () {
    return $browser.getTitle().then(function (title) {return title.includes("Google");});
  }, 10000).then(function () {
    return $browser.findElement($driver.By.linkText("About")).click();
  }).then(function () {
    return $browser.navigate().back();
  });
   

• Revenir en arrière: pour revenir à la page précédemment consultée dans le navigateur, utilisez la commande suivante:

  await $browser.navigate().back();
   

• Passer aux nouveaux onglets: pour obtenir le descripteur de fenêtre en cours et passer à une nouvelle fenêtre pour ouvrir une nouvelle page dans un nouvel onglet et revenir à la fenêtre d'origine, utilisez le code suivant:

  console.log("Windows handle: ", await $browser.getWindowHandle(), "Current url: ", await $browser.getCurrentUrl());
  let originalWindow = await $browser.getWindowHandle();
  await $browser.switchTo().newWindow();
  await $browser.get("http://www.timeanddate.com");
  await $browser.switchTo().window(originalWindow);
  await $browser.takeScreenshot();
   

• Clic de souris: pour déplacer la souris, utilisez la commande suivante:

  const element = await $browser.waitForAndFindElement(by, timeout);
  const out = $browser.actions().move({origin: element}).press().release().perform();
   

• Infobulle: pour survoler un élément du navigateur avec la souris, utilisez la commande suivante:

  const element = await $browser.waitForAndFindElement(by, timeout);
  const out = $browser.actions().move({origin: element, duration: 2000}).perform();
   

• Touches d'envoi: Pour envoyer des touches, utilisez la commande suivante:

  await $browser.actions().sendKeys("synthetic").perform();
   

Pour accéder aux éléments Shadow DOM, vous pouvez utiliser la fonction getShadowRoot() . La nouvelle méthode est prise en charge pour la charte PoP Helm 1.1.1 ou ultérieure. Vous devez mettre à niveau votre version Synthetic PoP vers 1.1.1 ou une version ultérieure pour activer la prise en charge de l'interaction Shadow DOM.

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());
 

• Pour configurer un proxy pour les requêtes adressées à HTTP et HTTPS à l'aide des $network variables $browser ou, utilisez la commande suivante. Vous pouvez définir le proxy avec string ou url.URL.

  await $network.clearProxy();
  await $network.setProxyForHttp(proxyServer);
  website = await accessWebSite();
  checkHostname("www.google.com.hk", website)
  
  await $network.clearProxy();
  let testURL = new URL("http://" + sslProxyServer);
  await $network.setProxyForHttps(testURL);
  website = await accessWebSite();
  checkHostname("www.google.com", website);
   

• Pour définir un proxy pour toutes les demandes avec la liste de contournement à filtrer, utilisez la commande suivante. Une fois que vous avez exécuté cette commande dans l'exemple suivant, aucun proxy n'est disponible pour www.google.com.

  await $network.clearProxy();
  await $network.setProxy(proxyServer, "www.google.com");
  console.log(">>>>>>>>>>>>>>>>>>>", "Bypass list: ", $network.getProxy().rules.bypassList);
  website = await accessWebSite();
  checkHostname("www.google.com.hk", website);
   

Pour masquer les données sensibles dans l' URL, utilisez la commande suivante. Dans l'exemple suivant, l' URL e est masquée par "url": "https://www.bing.com/?mkt=zh-CN&toHttps=1&redig=*".

$util.secrets.setURLSecretsRegExps([/redig/i]);
console.log(">>>>>>>>>>>>>>>>>>>", "Access bing");
await $browser.get("http://cn.bing.com");
await $browser.wait($driver.until.titleContains('Bing'), 10000);
 

L'exemple suivant illustre la commande d'importation du module d'assertion chai:

var assert = require('chai').assert;
 

Instana Les tests de navigateur prennent en charge les modules principaux d' Node.js, disponibles sur Node.js v18 ou dans une version ultérieure.

[SyntheticPoP] [ERROR] process.exit is not allowed. This API is blocked by playback engine.
 

Instana La surveillance synthétique prend en charge les modules tiers suivants :

• @aws-sdk/client-s3 3.626.0
• atob 2.1.2
• authentificateur 1.1.5
• 4.6.6 de base sur le FTP
• btoa 1.2.1
• chai 4.3.10
• couleurs 1.4.0
• consoleplusplus 1.4.4
• crypto-js 4.2.0
• faker 5.5.3
• obtenu 11.8.6
• joi 17.7.1
• js-yaml 4.1.0
• ldapauth-fork 5.0.2
• lodash 4.17.21
• instant 2.29.4
• 3.6.3 de net-snmp
• protocol-buffers 4.2.0
• q 1.5.1
• re2 1.18.3
• ssh2-sftp-client 7.2.3
• ssl-checker 2.0.7
• codage de texte 0.7.0
• 0.14.2 de seconde main
• 0.0.14 de totp-generator
• Cookie-difficile 4.1.3
• trait de soulignement 1.13.3
• url-parse 1.5.10
• urllib 2.41.0
• uuid 3.4.0
• valideur 13.7.0
• ws 7.5.10
• xml2js 0.5.0

let click = async (message, by, timeout = 60000) => {
  console.log(`Click on ${message} >> ${by} << `);
  try {
    const element = await $browser.waitForAndFindElement(by, timeout);
    return $browser.actions().move({ origin: element }).click().perform();
  } catch (err) {
    console.error(`\ncatch(click): ${err.message}`);
    throw err;
  }
};

let hover = async (message, by, timeout = 60000) => {
  console.log(`Hover on ${message} >> ${by} << `);
  try {
    const element = await $browser.waitForAndFindElement(by, timeout);
    return $browser.actions().move({ origin: element, duration: 3000 }).perform();
  } catch (err) {
    console.error(`\ncatch(hover): ${err.message}`);
    throw err;
  }
};

(async function () {
  console.log(">>>>>>>>>>>>>>>>>>>", "Access bing page");
  await $browser.get("http://www.bing.com");
  console.log(">>>>>>>>>>>>>>>>>>>", "Actions of search");
  await hover("search button", $driver.By.xpath("//label[@id='search_icon']"), 10000);
  await $browser.takeScreenshot();
  await $browser.actions().sendKeys("synthetic").perform();
  await click("search button", $driver.By.xpath("//label[@id='search_icon']"), 10000);
})();
 

const { assert } = require("chai");

(async function () {
  /**
   * manipulate headers and retrieve all the customized headers
   */
  await $browser.addHeader("test", "test");
  await $browser.addHeaders({ "test1": "test1", "test2": "test2" });
  await $browser.deleteHeaders(["test1", "test2"]);
  $browser.getHeaders().forEach((value, key) => console.log(">>>>>>>>>>>>>>>>>>>", "User customized headers: ", key + "=" + value));

  /**
   * manipulate deny and allow list
   */
  await $browser.addHostnamesToDenylist(["*google*", "*timeanddate*"]);
  await $browser.deleteHostnameFromDenylist("*timeanddate*");

  /**
   * open url www.bing.com
   * find element by class selector
   * send keys to search Synthetic in the page
   */
  console.log(">>>>>>>>>>>>>>>>>>>", "Access bing page");
  await $browser.get("http://www.bing.com");
  console.log(">>>>>>>>>>>>>>>>>>>", "Actions of search");
  // Find element by XPath and wait for the element until specified timeout value reached
  await $browser.waitForAndFindElement($driver.By.xpath(`//textarea[@inputmode='search']`), 10000);
  // Sleep or pause to wait for specified milliseconds
  await $browser.sleep(5000);
  // Take a screenshot
  await $browser.takeScreenshot();
  // Actions to send keys
  await $browser.actions().sendKeys("synthetic").sendKeys($driver.Key.ENTER).perform();

  /* Find element by CSS selector and perform actions
  let textarea = await $browser.waitForAndFindElement($driver.By.css('#sb_form_q'), 10000);
  // Actions to send keys
  await $browser
    .actions()
    .move({ origin: textarea })
    .sendKeys("synthetic")
    .pause(5000)
    .sendKeys($driver.Key.ENTER)
    .perform();
  */

  /**
   * samples of promise chain invocation, which is not recommended but backwards compatible
   * samples of waiting and polling function with timeout value
   */
  await $browser.deleteHostnameFromDenylist("*google*");
  await $browser.get("https://www.google.com");
  // Call the wait function.
  await $browser.wait(function () {
    return $browser.getTitle().then(function (title) {
      return title.includes("Google");
    });
    //If the condition isn't satisfied within 10000 milliseconds (10 seconds), proceed anyway.
  }, 10000).then(function () {
    return $browser.findElement($driver.By.linkText("About")).click();
  }).then(function () {
    return $browser.navigate().back();
  });

})();
 

const url = require("url");
const URL = url.URL;
const { assert } = require("chai");

let website;
let proxyServer = "proxyHost:proxyPort";
let sslProxyServer = "username:password@proxyHost:proxyPort";

async function accessWebSite(url) {
  console.log(">>>>>>>>>>>>>>>>>>>", "Proxy configuration is: ", JSON.stringify($network.getProxy()));
  console.log(">>>>>>>>>>>>>>>>>>>", `Access website ${url}`);
  await $browser.get(url);
  await $browser.findElement($driver.By.name('q')).click();
  await $browser.actions().sendKeys('synthetic').sendKeys($driver.Key.ENTER).perform();
  await $browser.takeScreenshot();
  return $browser.getCurrentUrl();
}

function checkHostname(hostname, website) {
  let actualURL = new URL(website);
  console.log(">>>>>>>>>>>>>>>>>>>", "Hostname is: ", actualURL.hostname);
  assert.equal(actualURL.hostname, hostname);
}

(async function () {
  /**
   * samples of proxy configuration settings with await asynchronous
   * using $network tools
   */
  console.log(">>>>>>>>>>>>>>>>>>>", "Clear proxy configuration");
  await $network.clearProxy();
  console.log(">>>>>>>>>>>>>>>>>>>", "Set proxy configuration for HTTPS request with string");
  await $network.setProxyForHttps(proxyServer);
  website = await accessWebSite("https://www.bing.com");
  checkHostname("www.bing.com", website)

  console.log(">>>>>>>>>>>>>>>>>>>", "Clear proxy configuration");
  await $network.clearProxy();
  console.log(">>>>>>>>>>>>>>>>>>>", "Set proxy configuration for HTTPS request with URL object");
  let testURL = new URL("http://" + sslProxyServer);
  await $network.setProxyForHttps(testURL);
  website = await accessWebSite("https://www.google.com");
  checkHostname("www.google.com", website);


  /**
   * samples of proxy configuration settings with bypass list
   */
  await $network.clearProxy();
  await $network.setProxy(proxyServer, "www.google.com");
  console.log(">>>>>>>>>>>>>>>>>>>", "Proxy config: ", $network.getProxy());
  website = await accessWebSite("https://www.bing.com");
  checkHostname("www.bing.com", website);
})();