Introduction au moniteur de navigateur scripté

Les navigateurs scriptés émulent une expérience utilisateur personnalisée en écrivant des scripts aux navigateurs qui naviguent sur votre site Web, effectuent des actions spécifiques et garantissent la présence d'éléments spécifiques. sélénium Webdriver pilote un moniteur scripté. Chaque fois que votre script s'exécute, New Relic crée un navigateur Chrome ou Firefox entièrement virtualisé basé sur Sélénium qui navigue sur votre site Web et suit chaque étape script . Synthétique monitoring inclut un éditeur script de style IDE qui suggère des fonctions, un localisateur et d'autres éléments pour simplifier le script. Consultez la référence du navigateur scripté pour obtenir une liste de toutes les fonctions disponibles.

Comment créer un moniteur de navigateur scripté

Allez à one.newrelic.com > All capabilities > Synthetic monitoring.
Cliquez sur Create monitor.
Sélectionnez la tuile User flow / functionality pour tester la disponibilité et la fonctionnalité de votre site dans différents emplacements.
Configurer le moniteur. Remplissez les champs souhaités. Ajoutez un nom pour votre moniteur. Sélectionnez les navigateurs et les appareils émulés que vous souhaitez tester.
Cliquez sur Select locations pour sélectionner l’emplacement où vous souhaitez tester le moniteur.
Cliquez sur Write script pour ajouter votre script décrivant les actions que vous souhaitez que le moniteur entreprenne. Le moniteur pré-remplit l'éditeur avec un exemple script à partir duquel vous pouvez travailler, ou vous pouvez le supprimer et repartir de zéro.
Cliquez sur Validate si vous souhaitez tester votre script. Cela peut prendre quelques minutes selon le script.
Cliquez sur Save monitor.

Visiter une URL

Tous les scripts commencent par spécifier l'URL vers laquelle le moniteur doit naviguer. Pour spécifier une URL, appelez $webDriver.get("url"):

await $webDriver.get("https://mywebsite.com");

Actions de séquence

Étant donné que WebDriverJS est asynchrone, les actions de script peuvent parfois s'exécuter dans le désordre. Pour forcer les actions de script à s'exécuter dans l'ordre, utilisez le mot-clé await :

await $webDriver.get("https://my-website.com");
await $webDriver.findElement($selenium.By.linkText("Configuration Panel"));

Vous pouvez également encapsuler chaque action dans un appel then(function(){}) . Mais, dans ce cas, la fonction encapsulée doit return chaque fonction asynchrone pour s'assurer qu'elles se terminent avant que le script ne passe à autre chose :

$webDriver.get("https://my-website.com").then(function(){
    return $webDriver.findElement($selenium.By.linkText("Configuration Panel"));
});

Pour connecter plusieurs actions en séquence, encapsulez chaque action dans un appel then(function(){}) et chaînez les appels ensemble :

$webDriver.get("https://my-website.com").then(function(){
    return $webDriver.findElement($selenium.By.linkText("Configuration Panel"));
}).then(function(){
    return $webDriver.findElement($selenium.By.partialLinkText("Configuration Pa"));
});

Localiser les éléments

Une fois que vous avez spécifié une URL pour le moniteur, vous souhaiterez généralement localiser un élément particulier sur la page. La localisation d'un élément permet de vérifier sa présence sur la page, et permet également d'interagir avec l'élément de page.

Vous pouvez localiser des éléments par leur class, id, link text, name ou même XPath. Pour trouver ces attributs, utilisez les outils de développement de votre navigateur ou consultez la source du code de votre site Web. Pour une liste de toutes les fonctions du localisateur, voir localisateur: Find élément de page.

Localisez un élément par son code HTML class, par exemple class="button". Une classe est généralement spécifiée pour le style CSS. Lors de la localisation d'un élément par classe, le moniteur sélectionnera le premier élément de la page qui possède cette classe :

await $webDriver.findElement($selenium.By.className("button"));

Localisez un élément par son code HTML exact id, par exemple id="edit-submit". Il s'agit d'une manière simple de localiser un élément de page, mais veillez à spécifier un id qui n'est pas susceptible de changer.

await $webDriver.findElement($selenium.By.id("edit-submit"));

Pour un exemple de localisation d'un élément par son id, voir la section Attendre un élément spécifique .

Localisez un élément par son texte de lien affiché, par exemple <a href="http://example.com>your link text here</a>. Vous pouvez localiser par le texte exact du lien $selenium.By.linkText ou par correspondance partielle $selenium.By.partialLinkText:

await $webDriver.findElement($selenium.By.linkText("Configuration Panel"));

await $webDriver.findElement($selenium.By.partialLinkText("Configuration Pa"));

Localisez un élément par son code HTML exact name, par exemple name="search-query-field". Ceci est le plus souvent utilisé avec des champs de saisie tels qu'un champ de recherche :

await $webDriver.findElement($selenium.By.name("search-query-field"));

Pour un exemple de localisation d'un élément par son name, voir se connecter à un site Web.

Pour des structures de page plus complexes, vous pouvez utiliser XPath pour localiser l'élément cible :

await $webDriver.findElement($selenium.By.xpath("//input[@placeholder = 'search-query-field']"));

Les sélecteurs XPath peuvent se briser lorsque la structure de votre site Web change. Pour obtenir des conseils sur la création de bons sélecteurs XPath, consultez Optimisation des sélecteurs XPath.

Conseil

Pour trouver rapidement le XPath d'un élément particulier, utilisez les outils développeurs de votre navigateur. Par exemple, depuis Chrome :

Accédez au site Web cible à partir de Chrome.
Cliquez avec le bouton droit sur l’élément cible, puis sélectionnez Inspect element.
Depuis le panneau Outils des développeurs qui s'ouvre automatiquement, recherchez l'élément cible en surbrillance.
Cliquez avec le bouton droit sur l’élément cible, puis sélectionnez Copy XPath.

Interagir avec les éléments

Parce qu'un moniteur scripté pilote un véritable navigateur Chrome ou Firefox fonctionnant sous Sélénium, le moniteur scripté peut interagir avec les éléments de la page de la même manière qu'un utilisateur le ferait. Par exemple, le monitorant peut cliquer sur un lien, saisir du texte dans un champ de recherche, etc. Pour obtenir la liste des actions disponibles, voir ActionSequence : Lier plusieurs actions.

Tout d’abord, localisez l’élément de page, puis appelez une fonction d’interaction :

Pour cliquer sur un lien ou un autre élément de page, localisez l'élément et appelez la fonction click() :

await $webDriver.findElement($selenium.By.linkText("Configuration Panel")).click();

await $webDriver.findElement($selenium.By.className("config-panel-02")).click();

Pour un exemple de clic sur un élément localisé, voir Localiser par texte de lien.

Conseil

Vous pouvez contrôler la souris d'autres manières avec les fonctions doubleClick(), dragAndDrop(), mouseDown, mouseUp et mouseMove .

Pour saisir du texte dans un champ, localisez le champ et appelez la fonction sendKeys() :

await $webDriver.findElement($selenium.By.name("search-query-field")).sendKeys("EXAMPLE USER NAME");

await $webDriver.findElement($selenium.By.id("search-q-box")).sendKeys("EXAMPLE USER NAME");

Certains champs peuvent contenir du texte par défaut. Effacez ces champs avant de leur envoyer du texte :

await $webDriver.findElement($selenium.By.name("search-query-field")).clear();

await $webDriver.findElement($selenium.By.id("search-q-box")).clear();

Pour un exemple de saisie de texte dans un champ, voir Localiser par texte de lien.

Conseil

Vous pouvez ajouter des touches de modification, telles que ALT et SHIFT avec les fonctions keyDown() et keyUp() .

Attente et délais d'attente

Les éléments de page volumineux, tels que les images ou le contenu dynamique complexe, peuvent prendre beaucoup de temps à charger. Votre script peut échouer si le moniteur tente d'interagir avec ou de trouver un élément qui n'a pas encore été chargé.

Pour éviter ces problèmes, définissez des conditions d'attente qui suspendront le script jusqu'à ce que l'élément de page spécifié soit présent, ou séquencez les actions manuellement. Pour une liste des conditions, voir Conditions : Mettre en pause et attendre les conditions.

Important

Après un temps d'exécution maximum de trois minutes, New Relic arrête manuellement le script.

Demandez au moniteur d’attendre que le titre de la page corresponde à une certaine valeur. Cela garantit que le navigateur a au moins reçu certaines données de la page cible. Pour attendre le titre de la page, spécifiez un titre attendu et une valeur de délai d'attente en millisecondes :

//Call the wait function
await $webDriver.wait(async function() {
  //Tell the monitor to get the page title.
  var title = await $webDriver.getTitle();
  //Specify the expected page title.
  return title === "Your Page Title Here";
//If the condition is not satisfied within a timeout of 1000 milliseconds (1 second), proceed anyway.
}, 1000);

Pour un exemple d'attente du titre de la page, voir Attendre le titre de la page.

Demandez au moniteur d’attendre qu’un élément de page soit présent. Cela est utile lorsqu'un élément dont dépend votre script prend beaucoup de temps à charger, ou simplement pour garantir qu'un élément de page est présent avant que votre script ne clique dessus.

Utilisez l’une des fonctions de localisation avec la fonction d’attente ci-dessous. Utilisez la fonction souhaitée au lieu de la fonction $selenium.By.linkText utilisée ci-dessous :

// Tell the monitor to wait up to 7,500 milliseconds (7.5 seconds) for a link whose text is `Your Link Text Here`.
var linkText = "Your Link Text Here"

var element = await $webDriver.wait(
  $selenium.until.elementLocated(
    $selenium.By.linkText(linkText),
  ),
  7500,
  'Timed-out waiting for element to be located using link text: "' +linkText+ '"',
);
// Wait for the element to be visible
await $webDriver.wait(
  $selenium.until.elementIsVisible(element),
  7500,
  "Timed-out waiting for element to be visible using ${element}",
);

Important

elementIsVisible() ne parviendra pas à trouver un élément s'il est entièrement derrière un autre élément ou s'il a une taille de 0. Il trouvera toujours des éléments avec une opacité de 0.

manuellement les log résultats dans le script log

Vous pouvez également manuellement log les résultats du moniteur script log dans le . Utilisez le logging pour dépanner un script: pour découvrir quelle étape de votre script échoue, incluez une fonction log avec chaque étape clé de votre script.

Important

La longueur maximale log est de 50 000 octets. les logs de script supérieurs à 50 000 octets sont tronqués.

Pour log une ligne de texte statique, appelez console.log():

//Send `Hello world.` to the console log.
console.log('Hello world.');

Cela donne le résultat suivant:

// ----------------------------------- Console log
Hello world.

En plus de le logging du texte statique, vous pouvez également transmettre des variables à console.log():

//Declare the variable `WEBSITE_URL`
var assert = require('assert'),
  WEBSITE_URL = 'https://my-website.com/';

console.log('Hello world.');
//Load the website specified in `WEBSITE_URL`
await $webDriver.get(WEBSITE_URL);
//Log our success to the console
console.log('Success for', WEBSITE_URL);

Recherchez ces résultats:

// ----------------------------------- Console log
Hello world.
Success for https://my-website.com/

Débloquer les services d'analyse

Synthetics bloque l'exécution par défaut du script des services d'analyse populaires . Vous pouvez autoriser l'exécution d'un script pour un ou plusieurs services spécifiés. Cela permet au script du service de s'exécuter et de collecter des données comme il le ferait pour un véritable utilisateur.

//Allow Google Analytics scripts to run
await $urlFilter.addToAllowList(['google-analytics.com']);

//Visit https://my-website.com
await $webDriver.get('https://my-website.com');

Personnaliser l'agent utilisateur

Vous pouvez personnaliser l'agent utilisateur du navigateur scripté pour garantir que tous les correctifs spécifiques au navigateur dans votre application fonctionnent correctement, ou pour contourner un mécanisme de sécurité afin de filtrer un site interne.

//Simulate Internet Explorer 10.6
$headers.add('User-Agent', 'Mozilla/5.0 (compatible; MSIE 10.6; Windows NT 6.1; Trident/5.0; InfoPath.2; SLCC1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 2.0.50727) 3gpp-gba UNTRUSTED/1.0');

//Visit http://httpbin.org/user-agent
await $webDriver.get('http://httpbin.org/user-agent');

Important

Cela usurpe uniquement l'en-tête HTTP de l'agent utilisateur pour la requête adressée au serveur. Cela ne change pas la valeur de navigator.userAgent.

Importer des modules optionnels

Vous pouvez également importer de nombreux modules Node.js populaires pour améliorer votre suite de tests, automatiser l'insertion de données de test et simplifier les fonctions complexes. Pour plus d'informations, voir Importation de modules Node.js.

Important

For Non-Legacy Runtimes

L'environnement de script contient des répertoires protégés en écriture. Si votre script nécessite le stockage de fichiers, ajoutez l'un des chemins suivants au nom de fichier :

runtime/input-output/input/
runtime/input-output/output/

Cette traduction automatique est fournie pour votre commodité.

Introduction au moniteur de navigateur scripté

Comment créer un moniteur de navigateur scripté

Visiter une URL

Actions de séquence

Localiser les éléments

Localiser par classe CSS

Localiser par ID HTML

Localiser par texte de lien

Localiser par nom

Localiser par XPath

Conseil

Interagir avec les éléments

Cliquez sur l'élément de page

Conseil

Entrer du texte

Conseil

Attente et délais d'attente

Important

Attendre le titre de la page

Attendre un élément spécifique

Important

manuellement les log résultats dans le script log

Important

Log texte statique

Passer une variable à la fonction log

Débloquer les services d'analyse

Personnaliser l'agent utilisateur

Important

Importer des modules optionnels

Important

Cette traduction automatique est fournie pour votre commodité.

Introduction au moniteur de navigateur scripté

Comment créer un moniteur de navigateur scripté .css-21sua1{background:none;border:none;width:0;padding:0;}

Visiter une URL

Actions de séquence

Localiser les éléments

Localiser par ID HTML

Localiser par texte de lien

Localiser par nom

Localiser par XPath

Interagir avec les éléments

Cliquez sur l'élément de page

Entrer du texte

Attente et délais d'attente

Important

Attendre le titre de la page

Attendre un élément spécifique

manuellement les log résultats dans le script log

Important

Log texte statique

Passer une variable à la fonction log

Débloquer les services d'analyse

Personnaliser l'agent utilisateur

Important

Importer des modules optionnels

Important

Comment créer un moniteur de navigateur scripté