New Relic Synthetics est un outil de monitoring qui vous permet de créer des tests de navigateur scriptés et de monitorer la disponibilité, le temps de disponibilité et les performances de votre site web. Avec Synthetics, vous pouvez monitorer les performances de votre site web ou de votre application web depuis différents endroits dans le monde entier. Vos utilisateurs ont ainsi accès à votre site depuis différentes régions et profitent de performances cohérentes.
Avec New Relic Synthetics, vous pouvez créer des tests scriptés qui simulent des interactions utilisateur avec votre site web ou votre application web, comme cliquer sur des boutons, remplir des formulaires et naviguer sur les pages. Ces tests peuvent être programmés ou déclenchés manuellement et les résultats s'affichent dans le dashboard New Relic.
Dans cet article, vous découvrirez comment écrire des tests synthétiques avec Selenium 4 via des études de cas intéressantes impliquant un code asynchrone, des éléments obsolètes, des composants animés et plus encore. Notre objectif est d'apporter une réponse aux obstacles courants que vous pourriez rencontrer. En vous fournissant des solutions, nous espérons vous aider à surmonter ces obstacles et à profiter au maximum des nouvelles fonctions et capacités que vous offre Selenium 4.
Tests de navigateur scriptés New Relic avec Selenium 4
Selenium est depuis longtemps une structure de tests open source appréciée pour les applications web et, avec la sortie de Selenium 4, elle consolide son statut de norme du secteur. Cette dernière version présente bon nombre de nouvelles fonctions et améliorations pour aider les équipes de développement à automatiser plus facilement leurs processus de tests web. Vous pourrez trouver le guide de transition de l'ancien runtime Synthetics vers le nouveau runtime avec Selenium 4 dans la documentation New Relic.
Si vous ne connaissez pas le terme « navigateur scripté », c'est en gros une fonctionnalité fournie par New Relic Synthetics. Elle aide les utilisateurs à scripter et simuler des workflows et interactions utilisateur personnalisées sur leurs sites web ou dans leurs applications. Vous pouvez ainsi tester comment vos utilisateurs réels interagissent avec votre site, p. ex. pendant la connexion, la navigation sur différentes pages et le remplissage de formulaires, le tout automatisé grâce à un script utilisant les bindings WebDriver JavaScript de Selenium.
Pour configurer un moniteur de navigateurs scripté, suivez ces étapes :
- Naviguez jusqu'à
one.newrelic.com > Synthetics. - Choisissez
scripted browser(Navigateur scripté) comme type de moniteur. - Remplissez le nom et les détails du moniteur (p. ex., navigateur scripté nomdesite.com).
- Choisissez les endroits où votre moniteur doit s'exécuter (p. ex. Mumbai, Séoul, Colombus et Montréal).
- Sélectionnez une fréquence à laquelle le moniteur doit s'exécuter (p. ex. toutes les cinq minutes).
Une fois ces étapes effectuées, vous pouvez créer votre script pour tester les performances de votre site web et garantir le chargement de certains éléments.
Implémenter Async/Await dans les scripts
Lorsque vous utilisez New Relic et Selenium 4, vous devez gérer vos propres fonctions et promesses asynchrones. Vous pouvez donc écrire vos scripts d'une manière beaucoup compréhensible et lisible.
Examinons la syntax Async/Await :
// specify variables
const By = $selenium.By
const until = $selenium.until
// navigate to page
await $webDriver.get('https://automationintesting.com/selenium/testpage/')
// wait for dropdown to be located
const dropdown = await $webDriver.wait(until.elementLocated(By.id('gender')))
// click dropdown
await dropdown.click()
// select dropdown option
const option = await dropdown.findElement(By.xpath("//option[. = 'Female']"))
// check if option is selected
const optionSelected = await option.isSelected()
// if option is not selected, select it
if (!optionSelected) {
await option.click()
}Ce qui fait la beauté de la syntaxe async/await ? Elle est séquentielle et on peut la lire simplement de haut en bas.
Étudier l'exception Stale Element Reference
L'exception Stale Element Reference se produit lorsqu'un élément web présent auparavant et avec lequel le script Selenium a interagi n'est plus présent ou connecté au DOM en raison de changements dans la structure de la page web. Lorsque le script essaie d'interagir avec l'élément, l'opération échoue.
Dans la nouvelle version de Selenium WebDriver, certains utilisateurs ont rencontré des problèmes pour s'adapter au runtime mis à jour. L'exception Stale Element Reference est l'un de ces problèmes. Cette exception, décrite dans la documentation Selenium, survient lorsqu'un élément web présent précédemment est déconnecté du DOM ou n'est plus disponible. Il devient donc difficile d'interagir avec l'élément.
La solution est d'attendre que l'élément devienne obsolète, puis de retrouver l'élément pour que le webdriver puisse le détecter, cette fois sans problème, de cette manière :
const stalledSearchInput = await
$webDriver.wait(until.elementLocated(By.name("search-input")));
// the following line will wait for the stalled element to be removed from the DOM
await $webDriver.wait(until.stalenessOf(stalledSearchInput), DefaultTimeout);
// the following line locates the element again
const newSearchInput = await $webDriver.wait(until.elementLocated(By.name("search-input")));
await newSearchInput.click();Interagir avec des éléments animés
Certaines pages utilisent des animations ou activent/désactivent des éléments de la page selon les actions de l'utilisateur ou d'autres événements survenant sur la page.
Pour résoudre ce problème, nous pouvons utiliser la méthode elementIsEnabled. La voici en action :
const button = await $webDriver.wait(until.elementLocated(By.xpath("//button[div[text()='Button']]")));
await $webDriver.wait(until.elementIsEnabled(button));
await button.click();Dans cet exemple, le script attend l'activation d'un bouton animé après la fin de l'animation. Si le script n'avait pas attendu le bouton, l'opération aurait échoué, car le script aurait essayé d'interagir avec un élément qui n'était pas encore activé (visible au webdriver).
Dépanner l'erreur Element not clickable at point
Une autre erreur courante qui peut se produire lors de l'utilisation de Selenium WebDriver est l'erreur Element not clickable at point. Cette dernière survient généralement lorsque Selenium WebDriver tente d'interagir avec un élément qui est « caché derrière » un autre élément. Par exemple, une conception médiocre ou complexe du site web peut impliquer qu'un élément input avec lequel Selenium essaie d'interagir est recouvert par un élément p ou tout autre élément HTML. Cette erreur peut également se produire lorsqu'un script est généré automatiquement avec un recorder qui sélectionne le mauvais élément.
Pour résoudre ce problème, nous devons examiner le document HTML de la page et cibler correctement l'élément avec lequel Selenium doit interagir. Cela implique en général d'être plus spécifique quant à l'élément même ou son sélecteur.
Cette erreur peut se produire pour d'autres raisons :
- lorsque Selenium trouve plusieurs éléments avec le même sélecteur
- un élément ne se trouve pas dans la vue (de WebDriver). Une solution simple à ce problème est d'utiliser la fonction de rappel pour cliquer sur un élément qui instruit WebDriver d'aller à un élément automatiquement pour qu'il soit tout le temps dans la vue.
.then(function (el) {
el.click();
});Nous espérons que ces quelques exemples vous feront gagner beaucoup de temps lorsque vous passerez au prochain runtime.
Étapes suivantes
Une fois familiarisé avec le monitoring web à l'aide de Selenium 4 et des tests de navigateur scriptés de New Relic, vous pourrez envisager plusieurs autres étapes :
- Vous inscrire pour obtenir un compte New Relic gratuit. Vous recevrez 100 Go/mois d'ingestion gratuite des données, un utilisateur Full Platform et un nombre illimité d'utilisateurs Basic.
- Définir des alertes pour vos moniteurs scriptés pour rester informé des anomalies qui surviennent ou de tout moniteur détectant des échecs.
- Améliorer votre site web en recueillant les données des utilisateurs réels pour compléter vos nouvelles données synthétiques.
- Envie de savoir comment tout cela fonctionne ? Lisez une présentation générale des moniteurs synthétiques
Les opinions exprimées sur ce blog sont celles de l'auteur et ne reflètent pas nécessairement celles de New Relic. Toutes les solutions proposées par l'auteur sont spécifiques à l'environnement et ne font pas partie des solutions commerciales ou du support proposés par New Relic. Veuillez nous rejoindre exclusivement sur l'Explorers Hub (discuss.newrelic.com) pour toute question et assistance concernant cet article de blog. Ce blog peut contenir des liens vers du contenu de sites tiers. En fournissant de tels liens, New Relic n'adopte, ne garantit, n'approuve ou n'approuve pas les informations, vues ou produits disponibles sur ces sites.
