Comment utiliser JavaScriptExecutor dans Selenium

Selenium est une suite d’outils et de bibliothèques open source qui vous permet d’interagir avec les navigateurs pour effectuer diverses opérations telles que l’envoi de texte, le clic sur un bouton, la sélection de menus déroulants, etc.

Cependant, il existe des scénarios où les commandes réelles Selenium WebDriver ne fonctionnent pas comme prévu, car Selenium ne peut pas interagir directement avec les éléments Web. C’est là que JavaScriptExecutor entre en jeu.

Dans ce blog, nous discutons de JavaScriptExecutor dans Selenium et de la manière de commencer avec des cas d’utilisation pratiques et des exemples.

Qu’est-ce que JavaScriptExecutor dans Selenium?

JavaScriptExecutor est une interface fournie par Selenium qui aide à exécuter des commandes JavaScript. Cette interface fournit des méthodes pour exécuter du JavaScript sur la fenêtre sélectionnée ou la page Web actuelle. Elle est disponible pour tous les liens de langage pris en charge par Selenium.

Le JavaScriptExecutor dans Selenium peut être utilisé directement en important le package suivant dans les scripts de test d’automatisation:

org.openqa.selenium.JavascriptExecutor

JavaScriptExecutor dans Selenium fournit deux méthodes pour interagir avec les éléments Web:

• executeScript() – Cette méthode exécute du JavaScript dans le contexte de la fenêtre ou du cadre actuellement sélectionné dans Selenium. Le script sera exécuté comme le corps d’une fonction anonyme.
• executeAsyncScript() – Cette méthode exécute un extrait asynchrone de JavaScript dans le contexte de la fenêtre ou du cadre actuellement sélectionné dans Selenium. Le script sera exécuté en tant que corps d’une fonction anonyme.

Note : La principale différence entre les méthodes executeScript() et executeAsyncScript() est que le script invoqué à l’aide de executeAsyncScript() doit signaler la fin de l’exécution en utilisant la fonction callback().

L’invocation des méthodes à l’aide de executeAsyncScript() est principalement utilisée lorsque l’attente doit être effectuée dans le navigateur en cours de test ou lorsque les tests doivent être synchronisés dans une application AJAX.

Pourquoi utiliser JavaScriptExecutor dans Selenium?

Il existe des scénarios où certaines commandes WebDriver ne fonctionnent pas comme prévu pour diverses raisons, notamment :

1. Selenium n’interagit pas directement avec les éléments Web
2. Effectuer des actions telles que faire défiler la vue, cliquer sur les éléments Web cachés derrière l’overlay, ou définir des valeurs dans les champs en lecture seule
3. Effectuer des comportements spécifiques au navigateur comme la modification dynamique du DOM

Dans ces cas, nous faisons appel à JavaScriptExecutor dans Selenium.

Traditionnellement, nous utilisons les localisateurs Selenium comme l’ID, le nom, le sélecteur CSS, XPath, etc., pour localiser un WebElement. Si ces localisateurs ne fonctionnent pas, ou si vous manipulez un XPath complexe, dans de tels cas, JavaScriptExecutor aide à localiser le WebElement souhaité.

Il arrive que la méthode click() ne fonctionne pas sur tous les navigateurs web, ou que les contrôles web se comportent différemment sur différents navigateurs. Pour surmonter de telles situations, il est recommandé d’utiliser JavaScriptExecutor pour effectuer une action de clic.

Comme nous le savons, les navigateurs intègrent une implémentation JavaScript et peuvent comprendre les commandes JavaScript. Ainsi, comprendre JavaScriptExecutor dans Selenium nous permettra d’effectuer toute une gamme d’opérations de manière plus efficace.

Principes de base de JavaScriptExecutor dans Selenium

Le but de cette section est de fournir une idée générale des étapes d’implémentation de JavaScriptExecutor dans Selenium. Pour la démonstration, nous utiliserons Java comme langage de programmation préféré.

Jetons un œil aux étapes clés.

1. Importez le package associé à JavaScriptExecutor:

import org.openqa.selenium.JavascriptExecutor;

2. Utilisez JavaScriptExecutor, créez une référence pour l’interface, et assignez-la à l’instance de WebDriver en la convertissant par type-casting:

JavascriptExecutor js = (JavascriptExecutor) driver;

3. Appelez les méthodes executeAsyncScript() ou executeScript() . Par exemple, la syntaxe de executeScript() est donnée ci-dessous:

js.executeScript(java.lang.String script, java.lang.Object... args)

Démo : Utilisation de JavaScriptExecutor dans Selenium

Avant d’examiner comment utiliser JavaScriptExecutor dans Selenium, suivez ces prérequis :

• Créez un nouveau projet Maven en utilisant IntelliJ IDE
• Ajoutez la dernière dépendance Selenium WebDriver dans le fichier pom.xml
• Ajoutez la dernière dépendance TestNG dans le fichier pom.xml

Nous allons utiliser le site LambdaTest eCommerce Playground pour illustrer le fonctionnement du JavaScriptExecutor dans Selenium en exécutant les tests sur le navigateur Chrome local.

Scénario de test 1

Notre objectif est d’écrire un code simple pour illustrer un exemple en utilisant la méthode executeScript() en suivant le scénario de test suivant.

1. Accédez à la page de Connexion au compte du site LambdaTest eCommerce Playground.
2. Entrez des identifiants de connexion valides et cliquez sur le bouton de connexion en mettant en surbrillance le champ avec une bordure rouge.
3. Affichez le titre de la page et le nom de domaine.
4. Vérifiez que l’en-tête de page « Mon compte » est affiché lors d’une connexion réussie.

Implémentation

Créez une nouvelle classe TestJavaScriptExecutor pour implémenter le scénario de test. Nous allons d’abord créer deux méthodes dans cette classe de test qui nous permettront de configurer et de quitter correctement les sessions du WebDriver Selenium.

Déclarons le WebDriver au niveau de la classe car nous en aurons besoin dans les deux méthodes, c’est-à-dire la méthode setup() pour démarrer la session du pilote et la méthode tearDown() pour quitter la session correctement.

public class TestJavaScriptExecutor {

​

    private WebDriver driver;

    //...

}

Créons maintenant une nouvelle méthode setup() qui instanciera une instance de la classe WebDriver et configurera en conséquence l’exécution des tests sur le navigateur Chrome local.

@BeforeTest

    public void setup () {

        driver = new ChromeDriver ();

        driver.manage ()

            .window ()

            .maximize ();

        driver.manage ()

            .timeouts ()

            .implicitlyWait (Duration.ofSeconds (30));

    }

Cette méthode ouvrira le navigateur Chrome, maximisera sa fenêtre et appliquera également un délai d’attente implicite de 30 secondes. Ce délai implicite permettra à tous les contenus du site Web de se charger avec succès avant le début de l’exécution du test.

@AfterTest

    public void tearDown () {

        driver.quit ();

    }

Enfin, lorsque le test est exécuté, la méthode tearDown() sera appelée, ce qui fermera la session RemoteWebDriver correctement.

Ajoutons maintenant une méthode testJavaScriptExecutorCommand() dans la même classe de test pour implémenter le scénario de test que nous avons discuté.

@Test

    public void testJavaScriptExecutorCommand () {

        driver.get ("https://ecommerce-playground.lambdatest.io/index.php?route=account/login");

​

        JavascriptExecutor js = (JavascriptExecutor) driver;

        //....

      }

Le code navigue vers la page de connexion du site Web LambdaTest eCommerce Playground. La ligne suivante caste l’instance du WebDriver en JavascriptExecutor afin que des commandes JavaScript puissent être exécutées dans le navigateur.

WebElement emailAddressField = driver.findElement (By.id ("input-email"));

js.executeScript ("arguments[0].style.border='3px solid red'", emailAddressField);

emailAddressField.sendKeys ("[email protected]");

js.executeScript ("arguments[0].style.border='2px solid #ced4da'", emailAddressField);

Ensuite, il localise le champ emailAddressField en utilisant la stratégie de localisation id. Ensuite, il utilise la commande JavaScriptExecutor pour mettre en évidence la bordure du champ d’adresse e-mail en rouge.

WebElement passwordField = driver.findElement (By.id ("input-password"));

js.executeScript ("arguments[0].style.border='3px solid red'", passwordField);

passwordField.sendKeys ("Password123");

js.executeScript ("arguments[0].style.border='2px solid #ced4da'", passwordField);

Ensuite, le champ de mot de passe est localisé et mis en surbrillance avec une bordure rouge. Cette mise en surbrillance aide à savoir quelles étapes sont exécutées au moment de l’exécution du test d’automatisation.

WebElement loginBtn = driver.findElement (By.cssSelector ("input.btn"));

js.executeScript ("arguments[0].style.border='3px solid red'", loginBtn);

js.executeScript ("arguments[0].click();", loginBtn);

De même, le bouton de connexion est localisé en utilisant la stratégie du sélecteur CSS et est également mis en surbrillance.

String titleText = js.executeScript ("return document.title;").toString ();

System.out.println ("Page Title is: " + titleText);

​

String domainName = js.executeScript ("return document.domain;").toString ();

System.out.println ("Domain is: " + domainName);

Le titre de la page et le nom de domaine sont ensuite localisés en utilisant le JavaScriptExecutor et affichés dans la console.

String myAccountHeader = driver.findElement (By.cssSelector ("#content h2")).getText ();

assertEquals (myAccountHeader, "My Account");

Enfin, l’en-tête de la page de Mon Compte, qui s’affiche après une connexion réussie, est localisé, et une assertion est effectuée pour vérifier qu’il affiche le texte « Mon Compte« .

Voici le code complet de la classe TestJavaScriptExecutor:

public class TestJavaScriptExecutor {

​

    private WebDriver driver;

​

    @BeforeTest

    public void setup () {

        driver = new ChromeDriver ();

        driver.manage ()

            .window ()

            .maximize ();

        driver.manage ()

            .timeouts ()

            .implicitlyWait (Duration.ofSeconds (30));

    }

​

    @AfterTest

    public void tearDown () {

        driver.quit ();

    }

​

    @Test

    public void testJavaScriptExecutorCommand () {

        driver.get ("https://ecommerce-playground.lambdatest.io/index.php?route=account/login");

​

        JavascriptExecutor js = (JavascriptExecutor) driver;

        WebElement emailAddressField = driver.findElement (By.id ("input-email"));

        js.executeScript ("arguments[0].style.border='3px solid red'", emailAddressField);

        emailAddressField.sendKeys ("[email protected]");

        js.executeScript ("arguments[0].style.border='2px solid #ced4da'", emailAddressField);

​

        WebElement passwordField = driver.findElement (By.id ("input-password"));

        js.executeScript ("arguments[0].style.border='3px solid red'", passwordField);

        passwordField.sendKeys ("Password123");

        js.executeScript ("arguments[0].style.border='2px solid #ced4da'", passwordField);

​

        WebElement loginBtn = driver.findElement (By.cssSelector ("input.btn"));

        js.executeScript ("arguments[0].style.border='3px solid red'", loginBtn);

        js.executeScript ("arguments[0].click();", loginBtn);

​

        String titleText = js.executeScript ("return document.title;")

            .toString ();

        System.out.println ("Page Title is: " + titleText);

​

        String domainName = js.executeScript ("return document.domain;")

            .toString ();

        System.out.println ("Domain is: " + domainName);

​

        String myAccountHeader = driver.findElement (By.cssSelector ("#content h2"))

            .getText ();

        assertEquals (myAccountHeader, "My Account");

    }

Exécution du Test

La capture d’écran suivante de l’IDE IntelliJ montre que le test a été exécuté avec succès.

Scénario de Test 2

Notre objectif est d’écrire un code simple pour illustrer un exemple en utilisant la méthode executeAsyncScript() en utilisant le scénario de test suivant.

1. Accéder au site LambdaTest eCommerce Playground.
2. Faire défiler jusqu’au bas de la page d’accueil.
3. Vérifier que le texte « FROM THE BLOG » est affiché dans la section inférieure de la page.

Implémentation:

Créer une nouvelle méthode testExecuteAsyncScript() dans la classe de texte existante TestJavaScriptExecutor.

@Test

    public void testExecuteAsyncScript() {

        driver.get("https://ecommerce-playground.lambdatest.io");

        JavascriptExecutor js = (JavascriptExecutor) driver;

        js.executeAsyncScript("var callback = arguments[arguments.length - 1];" + "window.scrollBy(0,document.body.scrollHeight); + callback()");

​

        String fromTheBlogText = driver.findElement(By.cssSelector("#entry_217991 > h3")).getText();

        assertEquals(fromTheBlogText, "FROM THE BLOG");

    }

Le code naviguera vers la page d’accueil du site Web LambdaTest eCommerce Playground. Ensuite, la méthode executeAsyncScript() du JavaScriptExecutor sera appelée, où elle effectuera l’action de faire défiler la fenêtre.

Dans la méthode executeAsyncScript(), les scripts exécutés doivent signaler explicitement qu’ils ont terminé en invoquant la méthode callback() fournie.

JavascriptExecutor js = (JavascriptExecutor) driver;

 js.executeAsyncScript("var callback = arguments[arguments.length - 1];" 

+ "window.scrollBy(0,document.body.scrollHeight); + callback()");

Après avoir fait défiler jusqu’au bas de la fenêtre, le texte « FROM THE BLOG » sera localisé, et une assertion sera effectuée dessus.

String fromTheBlogText = driver.findElement(By.cssSelector("#entry_217991 > h3")).getText();

 assertEquals(fromTheBlogText, "FROM THE BLOG");

Exécution du Test

La capture d’écran suivante montre que le test a été exécuté avec succès.

Commandes pour Utiliser JavaScriptExecutor dans Selenium

Examinons quelques scénarios que nous pourrions gérer en utilisant l’Interface JavaScriptExecutor pour l’automatisation des tests Selenium.

Pour cliquer sur un bouton :

js.executeScript("document.getElementById('enter element id').click();");

//or

js.executeScript("arguments[0].click();", okButton);

Pour saisir du texte dans une zone de texte sans utiliser la méthode sendKeys()  :

js.executeScript("document.getElementById(id').value='someValue';");

js.executeScript("document.getElementById('Email').value='SeleniumTesting.com';");

Pour gérer la case à cocher en passant la valeur true ou false :

js.executeScript("document.getElementById('enter element id').checked=false;");

Pour générer une fenêtre contextuelle d’alerte dans Selenium WebDriver :

js.executeScript("alert('Welcome To Selenium Testing');");

Pour rafraîchir la fenêtre du navigateur en utilisant JavaScript :

js.executeScript("history.go(0)");

Pour obtenir le texte intérieur de la page entière en Selenium :

String innerText = js.executeScript(" return document.documentElement.innerText;").toString();

System.out.println(innerText);

Pour obtenir le titre de la page web :

String titleText =  js.executeScript("return document.title;").toString();

System.out.println(titleText);

Pour obtenir le nom de domaine :

String domainName=  js.executeScript("return document.domain;").toString();

System.out.println(domainName);

​

Pour obtenir l’URL d’une page web :

String url=  js.executeScript("return document.URL;").toString();

System.out.println(url);

Pour obtenir la hauteur et la largeur d’une page web :

js.executeScript(“return window.innerHeight;”).toString();

js.executeScript(“return window.innerWidth;”).toString();

Pour naviguer vers une autre page en utilisant JavaScript :

js.executeScript("window.location = 'https://www.google.com");

Pour effectuer un défilement sur une application en utilisant Selenium :

• Pour faire défiler la page verticalement de 500px :
  Java

   js.executeScript(“window.scrollBy(0,500)”);

• Pour faire défiler la page verticalement jusqu’à la fin:
  Java

  js.executeScript(“window.scrollBy(0,document.body.scrollHeight)”);

Ajout d’un élément dans le Modèle d’Objet de Document (DOM):

js.executeScript("var btn=document.createElement('newButton');"

+ "document.body.appendChild(btn);");

​

Pour obtenir l’élément racine de l’ombre dans le DOM:

WebElement element = driver.findElement(By.id("shadowroot"));

js.executeScript("return arguments[0].shadowRoot", element);

Conclusion

Selenium dispose d’une interface appelée JavaScriptExecutor qui est utilisée lorsque les commandes WebDriver ne se comportent pas comme prévu. Avec l’aide de JavaScriptExecutor, nous pouvons utiliser WebDriver pour exécuter du code JavaScript sur le site Web, nous permettant de gérer une variété de tâches de manière élégante et efficace, ce qui serait autrement impossible en utilisant uniquement Java.

Dans ce blog, nous avons exploré comment utiliser JavaScriptExecutor dans Selenium et ses différentes méthodes. De plus, nous avons couvert divers scénarios pour atteindre une solution efficace en utilisant différentes méthodes avec des exemples pratiques.