Come utilizzare JavaScriptExecutor in Selenium

Selenium è un insieme di strumenti e librerie open-source che ti permettono di interagire con i browser per eseguire varie operazioni come inviare testo, fare clic su un pulsante, selezionare menu a discesa, ecc.

Tuttavia, ci sono scenari in cui i comandi effettivi di Selenium WebDriver non funzionano come previsto, poiché Selenium non può interagire direttamente con gli elementi Web. È qui che entra in gioco JavaScriptExecutor.

In questo blog, discutiamo di JavaScriptExecutor in Selenium e di come iniziare con casi d’uso pratici ed esempi.

Cos’è JavaScriptExecutor in Selenium?

JavaScriptExecutor è un’interfaccia fornita da Selenium che aiuta nell’esecuzione di comandi JavaScript. Questa interfaccia fornisce metodi per eseguire JavaScript sulla finestra selezionata o sulla pagina web corrente. È disponibile per tutti i binding linguistici supportati da Selenium.

Il JavaScriptExecutor in Selenium può essere utilizzato direttamente importando il seguente pacchetto negli script di test di automazione:

org.openqa.selenium.JavascriptExecutor

JavaScriptExecutor in Selenium fornisce due metodi per interagire con gli elementi Web:

• executeScript() – Questo metodo esegue JavaScript nel contesto della finestra o frame attualmente selezionato in Selenium. Lo script verrà eseguito come corpo di una funzione anonima.
• executeAsyncScript() – Questo metodo esegue un frammento di JavaScript asincrono nel contesto della finestra o del frame attualmente selezionato in Selenium. Lo script verrà eseguito come il corpo di una funzione anonima.

Nota: La principale differenza tra i metodi executeScript() e executeAsyncScript() è che lo script invocato utilizzando executeAsyncScript() deve segnalare il completamento dell’esecuzione utilizzando la funzione callback().

Invocare metodi utilizzando executeAsyncScript() è principalmente usato quando è necessario eseguire un’attesa nel browser sotto test o quando i test devono essere sincronizzati all’interno di un’applicazione AJAX.

Perché usare JavaScriptExecutor in Selenium?

Ci sono scenari in cui alcuni comandi WebDriver non funzionano come previsto per molteplici motivi, come segue:

1. Selenium non interagisce direttamente con i WebElements
2. Eseguire azioni come scorrere nell’area visibile, cliccare sui WebElements che sono nascosti dietro un overlay, o impostare valori nei campi di sola lettura
3. Eseguire comportamenti specifici del browser come modificare dinamicamente il DOM

In questi casi, ci avvaliamo dell’aiuto di JavaScriptExecutor in Selenium.

Tradizionalmente, utilizziamo i localizzatori di Selenium come ID, Nome, Selettore CSS, XPath, ecc., per localizzare un WebElement. Se questi localizzatori non funzionano, o se stai gestendo un XPath complicato, in tali casi, JavaScriptExecutor aiuta a localizzare il WebElement desiderato.

Ci sono casi in cui il metodo click() potrebbe non funzionare su tutti i browser web, o i controlli web potrebbero comportarsi in modo diverso su browser diversi. Per superare tali situazioni, dovrebbe essere utilizzato JavaScriptExecutor per eseguire un’azione di clic.

Come sappiamo, i browser hanno un’implementazione di JavaScript al loro interno e possono comprendere i comandi JavaScript. Pertanto, comprendere JavaScriptExecutor in Selenium ci permetterà di eseguire una serie di operazioni in modo più efficiente.

Fondamenti di JavaScriptExecutor in Selenium

Lo scopo di questa sezione è fornire un’idea ad alto livello sui passi di implementazione di JavaScriptExecutor in Selenium. Per la dimostrazione, utilizzeremo Java come linguaggio di programmazione preferito.

Esaminiamo i passaggi chiave.

1. Importa il pacchetto associato a JavaScriptExecutor:

import org.openqa.selenium.JavascriptExecutor;

2. Usa JavaScriptExecutor, crea un riferimento per l’interfaccia e assegnalo all’istanza di WebDriver effettuando un casting:

JavascriptExecutor js = (JavascriptExecutor) driver;

3. Chiama i metodi executeAsyncScript() o executeScript() La sintassi per executeScript() è la seguente:

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

Demo: Utilizzo di JavaScriptExecutor in Selenium

Prima di vedere come utilizzare JavaScriptExecutor in Selenium, seguire questi prerequisiti:

• Creare un nuovo progetto Maven utilizzando IntelliJ IDE
• Aggiungere la dipendenza più recente di Selenium WebDriver nel file pom.xml
• Aggiungere la dipendenza più recente di TestNG nel file pom.xml

Utilizzeremo il sito web LambdaTest eCommerce Playground per dimostrare il funzionamento di JavaScriptExecutor in Selenium eseguendo i test sul browser Chrome locale.

Scenario di Test 1

Il nostro obiettivo è scrivere un codice semplice per illustrare un esempio utilizzando il metodo executeScript() con il seguente scenario di test.

1. Navigare alla pagina Account Login del sito web LambdaTest eCommerce Playground.
2. Inserire le credenziali di accesso valide e fare clic sul pulsante di login evidenziando il campo con un bordo rosso.
3. Stampare il titolo della pagina e il nome di dominio.
4. Verificare che l’intestazione della pagina “Il mio Account” venga visualizzata in caso di accesso riuscito.

Implementazione

Crea una nuova classe TestJavaScriptExecutor per implementare lo scenario di test. Inizialmente creeremo due metodi in questa classe di test che ci permetteranno di configurare e chiudere correttamente le sessioni di Selenium WebDriver.

Dichiariamo il WebDriver a livello di classe poiché ne avremo bisogno in entrambi i metodi, cioè nel metodo setup(), per avviare la sessione del driver, e nel metodo tearDown(), per chiudere correttamente la sessione.

public class TestJavaScriptExecutor {

​

    private WebDriver driver;

    //...

}

Creiamo un nuovo metodo setup() che istanzierà un’istanza della classe WebDriver e configurerà di conseguenza l’esecuzione dei test sul browser Chrome locale.

@BeforeTest

    public void setup () {

        driver = new ChromeDriver ();

        driver.manage ()

            .window ()

            .maximize ();

        driver.manage ()

            .timeouts ()

            .implicitlyWait (Duration.ofSeconds (30));

    }

Questo metodo aprirà il browser Chrome, massimizzerà la sua finestra e applicherà anche un’attesa implicita di 30 secondi. Questa attesa implicita permetterà a tutti i contenuti del sito web di caricarsi correttamente prima che inizi l’esecuzione del test.

@AfterTest

    public void tearDown () {

        driver.quit ();

    }

Infine, quando il test viene eseguito, verrà chiamato il metodo tearDown(), che chiuderà correttamente la sessione di RemoteWebDriver.

Aggiungiamo ora un metodo testJavaScriptExecutorCommand() nella stessa classe di test per implementare lo scenario di test di cui abbiamo discusso.

@Test

    public void testJavaScriptExecutorCommand () {

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

​

        JavascriptExecutor js = (JavascriptExecutor) driver;

        //....

      }

Il codice naviga verso la pagina di accesso del sito web LambdaTest eCommerce Playground. La riga successiva cast il’istanza del WebDriver a JavascriptExecutor in modo che i comandi JavaScript possano essere eseguiti nel browser.

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

Successivamente, localizza il emailAddressField utilizzando la strategia di localizzazione id. Poi, utilizza il comando JavaScriptExecutor per evidenziare il bordo del campo dell’indirizzo email in rosso.

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

Successivamente, il campo password viene individuato e evidenziato con un bordo rosso. Questo evidenzia aiuta a capire quali passaggi vengono eseguiti durante l’esecuzione del test di automazione.

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

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

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

Allo stesso modo, il pulsante di accesso viene individuato utilizzando la strategia del selettore CSS ed è anch’esso evidenziato.

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

Il titolo della pagina e il nome di dominio vengono successivamente individuati utilizzando il JavaScriptExecutor e stampati sulla console.

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

assertEquals (myAccountHeader, "My Account");

Infine, l’intestazione della pagina del Mio Account, che viene visualizzata dopo un accesso riuscito, viene individuata e viene eseguita un’asserzione per verificare che visualizzi il testo “Il Mio Account“.

Ecco il codice completo della 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");

    }

Esecuzione del Test

La seguente schermata dall’IDE IntelliJ mostra che il test è stato eseguito correttamente.

Scenario di Test 2

Il nostro obiettivo è scrivere un codice semplice per illustrare un esempio utilizzando il metodo executeAsyncScript() seguendo lo scenario di test seguente.

1. Navigare sul sito LambdaTest eCommerce Playground.
2. Scorrere fino in fondo alla pagina iniziale.
3. Verificare che il testo “DAL BLOG” sia visualizzato nella sezione inferiore della pagina.

Implementazione:

Creare un nuovo metodo testExecuteAsyncScript() nella classe di test esistente 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");

    }

Il codice navigherà alla homepage del sito web del LambdaTest eCommerce Playground. Successivamente verrà chiamato il metodo executeAsyncScript() del JavaScriptExecutor, dove verrà eseguita l’azione per scorrere la finestra.

Nel metodo executeAsyncScript(), gli script eseguiti devono segnalare esplicitamente di aver terminato invocando il metodo callback() fornito.

JavascriptExecutor js = (JavascriptExecutor) driver;

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

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

Dopo lo scorrimento fino in fondo alla finestra, verrà individuato il testo “FROM THE BLOG”, su cui verrà eseguita un’asserzione.

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

 assertEquals(fromTheBlogText, "FROM THE BLOG");

Esecuzione del Test

Lo screenshot seguente mostra che il test è stato eseguito con successo.

Comandi per l’utilizzo di JavaScriptExecutor in Selenium

Esaminiamo alcuni scenari che potremmo gestire utilizzando l’Interfaccia JavaScriptExecutor per l’automazione dei test Selenium.

Per fare clic su un pulsante:

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

//or

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

Per digitare del testo in una casella di testo senza utilizzare il metodo sendKeys() :

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

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

Per gestire la casella di controllo passando il valore come true o false:

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

Per generare una finestra di avviso pop-up in Selenium WebDriver:

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

Per aggiornare la finestra del browser utilizzando JavaScript:

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

Per ottenere il testo interno dell’intera pagina web in Selenium:

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

System.out.println(innerText);

Per ottenere il titolo della pagina web:

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

System.out.println(titleText);

Per ottenere il nome di dominio:

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

System.out.println(domainName);

​

Per ottenere l’URL di una pagina web:

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

System.out.println(url);

Per ottenere l’altezza e la larghezza di una pagina web:

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

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

Per navigare verso una pagina diversa utilizzando JavaScript:

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

Per eseguire lo scroll su un’applicazione utilizzando Selenium:

• Per scorrere la pagina verticalmente di 500px:
  Java

   js.executeScript("window.scrollBy(0,500)");

• Per scorrere la pagina verticalmente fino alla fine:
  Java

   

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

Aggiungere un elemento nel Document Object Model (DOM):

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

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

​

Per ottenere il shadow root nel DOM:

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

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

Conclusione

Selenium ha un’interfaccia chiamata JavaScriptExecutor che viene utilizzata quando i comandi WebDriver non si comportano come previsto. Con l’aiuto di JavaScriptExecutor, possiamo utilizzare WebDriver per eseguire codice JavaScript sul sito web, consentendoci di gestire una varietà di compiti in modo elegante ed efficace che altrimenti sarebbero impossibili utilizzando solo Java.

In questo blog, abbiamo esplorato come utilizzare JavaScriptExecutor in Selenium e i suoi diversi metodi. Inoltre, abbiamo affrontato vari scenari per ottenere una soluzione efficace utilizzando diversi metodi insieme a esempi pratici.