Cómo usar JavaScriptExecutor en Selenium

Selenium es un conjunto de herramientas y bibliotecas de código abierto que te permite interactuar con navegadores para realizar diversas operaciones como enviar texto, hacer clic en un botón, seleccionar elementos de una lista desplegable, etc.

Sin embargo, hay escenarios en los que los comandos reales de Selenium WebDriver no funcionan como se esperaba, ya que Selenium no puede interactuar directamente con los WebElements. Aquí es donde entra en juego JavaScriptExecutor.

En este blog, discutimos JavaScriptExecutor en Selenium y cómo comenzar con casos de uso prácticos y ejemplos.

¿Qué es JavaScriptExecutor en Selenium?

JavaScriptExecutor es una interfaz proporcionada por Selenium que ayuda a ejecutar comandos de JavaScript. Esta interfaz proporciona métodos para ejecutar JavaScript en la ventana seleccionada o en la página web actual. Está disponible para todos los enlaces de lenguaje compatibles con Selenium.

El JavaScriptExecutor en Selenium se puede utilizar directamente importando el siguiente paquete en los scripts de prueba de automatización:

org.openqa.selenium.JavascriptExecutor

JavaScriptExecutor en Selenium proporciona dos métodos para interactuar con los WebElements:

• executeScript() – Este método ejecuta JavaScript en el contexto de la ventana o marco actualmente seleccionado en Selenium. El script se ejecutará como el cuerpo de una función anónima.
• executeAsyncScript() – Este método ejecuta un fragmento de JavaScript asíncrono en el contexto de la ventana o marco actualmente seleccionado en Selenium. El script se ejecutará como el cuerpo de una función anónima.

Nota: La diferencia principal entre los métodos executeScript() y executeAsyncScript() es que el script invocado usando executeAsyncScript() debe señalar la finalización de la ejecución utilizando la función callback().

La invocación de métodos usando executeAsyncScript() se utiliza principalmente cuando se debe realizar una pausa en el navegador bajo prueba o cuando las pruebas deben sincronizarse dentro de una aplicación AJAX.

¿Por qué usar JavaScriptExecutor en Selenium?

Hay escenarios donde algunos comandos de WebDriver no funcionan como se espera debido a varias razones, como las siguientes:

1. Selenium no interactúa directamente con los elementos web
2. Realizar acciones como desplazarse a la vista, hacer clic en los elementos web ocultos detrás de la superposición o establecer valores en los campos de solo lectura
3. Realizar comportamientos específicos del navegador como modificar el DOM dinámicamente

En estos casos, recurrimos al JavaScriptExecutor en Selenium.

Tradicionalmente, usamos localizadores de Selenium como ID, Nombre, Selector CSS, XPath, etc., para localizar un WebElement. Si estos localizadores no funcionan, o si estás manejando un XPath complicado, en tales casos, JavaScriptExecutor ayuda a localizar el WebElement deseado.

Existen casos en los que el método click() puede no funcionar en todos los navegadores web, o los controles web pueden comportarse de manera diferente en diferentes navegadores. Para superar tales situaciones, se debe usar JavaScriptExecutor para realizar una acción de clic.

Como sabemos, los navegadores tienen implementación de JavaScript en su interior y pueden entender comandos de JavaScript. Por lo tanto, comprender JavaScriptExecutor en Selenium nos permitirá realizar una variedad de operaciones de manera más eficiente.

Conceptos básicos de JavaScriptExecutor en Selenium

El propósito de esta sección es brindar una idea general sobre los pasos de implementación del JavaScriptExecutor en Selenium. Para la demostración, utilizaremos Java como lenguaje de programación preferido.

Vamos a ver los pasos clave.

1. Importar el paquete asociado con JavaScriptExecutor:

import org.openqa.selenium.JavascriptExecutor;

2. Usar JavaScriptExecutor, crear una referencia para la interfaz, y asignarla a la instancia de WebDriver mediante un tipo de conversión:

JavascriptExecutor js = (JavascriptExecutor) driver;

3. Llamar a los métodos executeAsyncScript() o executeScript() . Por ejemplo, la sintaxis para executeScript() se muestra a continuación:

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

Demo: Uso de JavaScriptExecutor en Selenium

Antes de ver cómo usar JavaScriptExecutor en Selenium, siga estos requisitos previos:

• Cree un nuevo proyecto Maven usando IntelliJ IDE
• Agregue la última dependencia de Selenium WebDriver en el archivo pom.xml
• Agregue la última dependencia de TestNG en el archivo pom.xml

Usaremos el sitio web LambdaTest eCommerce Playground para demostrar el funcionamiento del JavaScriptExecutor en Selenium ejecutando las pruebas en el navegador Chrome local.

Escenario de prueba 1

Nuestro objetivo es escribir un código simple para ilustrar un ejemplo usando el método executeScript() siguiendo el siguiente escenario de prueba.

1. Navegar a la página de Iniciar sesión en la cuenta del sitio web LambdaTest eCommerce Playground.
2. Ingresar credenciales de inicio de sesión válidas y hacer clic en el botón de inicio de sesión resaltando el campo con un borde rojo.
3. Imprimir el título de la página y el nombre de dominio.
4. Comprobar que el encabezado de la página “Mi cuenta” se muestra en un inicio de sesión exitoso.

Implementación

Crear una nueva clase TestJavaScriptExecutor para implementar el escenario de prueba. Primero crearemos dos métodos en esta clase de prueba que nos permitirán configurar y cerrar las sesiones de Selenium WebDriver.

Declararemos el WebDriver a nivel de clase ya que lo necesitaremos en ambos métodos, es decir, en el método setup() para iniciar la sesión del controlador y en el método tearDown() para cerrar la sesión de forma adecuada.

public class TestJavaScriptExecutor {

​

    private WebDriver driver;

    //...

}

Creemos un nuevo método setup() que instanciará una instancia de la clase WebDriver y configurará la ejecución de las pruebas en el navegador Chrome local.

@BeforeTest

    public void setup () {

        driver = new ChromeDriver ();

        driver.manage ()

            .window ()

            .maximize ();

        driver.manage ()

            .timeouts ()

            .implicitlyWait (Duration.ofSeconds (30));

    }

Este método abrirá el navegador Chrome, maximizará su ventana y aplicará una espera implícita de 30 segundos. Esta espera implícita permitirá que todos los contenidos del sitio web se carguen correctamente antes de que comience la ejecución de la prueba.

@AfterTest

    public void tearDown () {

        driver.quit ();

    }

Finalmente, cuando se ejecute la prueba, se llamará al método tearDown(), el cual cerrará la sesión de RemoteWebDriver de forma adecuada.

Ahora agreguemos un método testJavaScriptExecutorCommand() en la misma clase de prueba para implementar el escenario de prueba que discutimos.

@Test

    public void testJavaScriptExecutorCommand () {

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

​

        JavascriptExecutor js = (JavascriptExecutor) driver;

        //....

      }

El código navega a la página de inicio de sesión del sitio web LambdaTest eCommerce Playground. La siguiente línea convierte la instancia de WebDriver en JavascriptExecutor para que se puedan ejecutar comandos de JavaScript en el navegador.

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

A continuación, localiza el campo emailAddressField utilizando la estrategia de localización id. Luego, utiliza el comando de JavascriptExecutor para resaltar el borde del campo de dirección de correo electrónico en color rojo.

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

A continuación, se localiza el campo de contraseña y se resalta con un borde rojo. Este resaltado ayuda a saber qué pasos se están ejecutando en el momento de la ejecución de la prueba de automatización.

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

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

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

Del mismo modo, el botón de inicio de sesión se localiza utilizando la estrategia de Selector CSS y también se resalta.

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

El título de la página y el nombre de dominio se localizan a continuación utilizando el JavaScriptExecutor y se imprimen en la consola.

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

assertEquals (myAccountHeader, "My Account");

Finalmente, se localiza el encabezado de la página de Mi Cuenta, que se muestra después de un inicio de sesión exitoso, y se realiza una aserción para verificar que muestra el texto “Mi Cuenta“.

Aquí está el código completo de la clase 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");

    }

Ejecución de Prueba

La siguiente captura de pantalla del IDE IntelliJ muestra que la prueba se ejecutó correctamente.

Escenario de Prueba 2

Nuestro objetivo es escribir un código simple para ilustrar un ejemplo utilizando el método executeAsyncScript() con el siguiente escenario de prueba.

1. Ir al sitio web LambdaTest eCommerce Playground.
2. Desplazarse hacia abajo hasta el final de la página de inicio.
3. Comprobar que el texto “DESDE EL BLOG” se muestra en la sección inferior de la página.

Implementación:

Crear un nuevo método testExecuteAsyncScript() en la clase de texto existente 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");

    }

El código navegará a la página de inicio del sitio web LambdaTest eCommerce Playground. A continuación, se llamará al método executeAsyncScript() del JavaScriptExecutor, donde se realizará la acción de desplazar la ventana.

En el método executeAsyncScript(), los scripts ejecutados necesitan señalar explícitamente que han finalizado invocando el método proporcionado callback().

JavascriptExecutor js = (JavascriptExecutor) driver;

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

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

Después de desplazarse hasta el final de la ventana, se localizará el texto “FROM THE BLOG”, y se realizará una aserción sobre él.

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

 assertEquals(fromTheBlogText, "FROM THE BLOG");

Ejecución de Prueba

La siguiente captura de pantalla muestra que la prueba se ejecutó con éxito.

Comandos para Usar JavaScriptExecutor en Selenium

Examinemos algunos escenarios que podríamos manejar utilizando la Interfaz JavaScriptExecutor para la automatización de pruebas de Selenium.

Para hacer clic en un botón:

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

//or

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

Para escribir texto en un cuadro de texto sin usar el método sendKeys():

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

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

Para manejar el checkbox pasando el valor como true o false:

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

Para generar una ventana emergente de alerta en Selenium WebDriver:

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

Para refrescar la ventana del navegador usando JavaScript:

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

Para obtener el texto interno de toda la página web en Selenium:

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

System.out.println(innerText);

Para obtener el título de la página web:

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

System.out.println(titleText);

Para obtener el nombre de dominio:

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

System.out.println(domainName);

​

Para obtener la URL de una página web:

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

System.out.println(url);

Para obtener la altura y anchura de una página web:

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

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

Para navegar a una página diferente utilizando JavaScript:

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

Para realizar un desplazamiento en una aplicación usando Selenium:

• Para desplazar la página verticalmente por 500px:
  Java

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

• Para desplazar la página verticalmente hasta el final:
  Java

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

Añadiendo un elemento en el Modelo de Objetos del Documento (DOM):

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

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

​

Para obtener el shadow root en el DOM:

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

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

Conclusión

Selenium tiene una interfaz llamada JavaScriptExecutor que se utiliza cuando los comandos de WebDriver no se comportan como se espera. Con la ayuda de JavaScriptExecutor, podemos utilizar WebDriver para ejecutar código JavaScript en el sitio web, lo que nos permite manejar una variedad de tareas de manera elegante y efectiva que de otro modo serían imposibles usando solo Java.

En este blog, exploramos cómo utilizar JavaScriptExecutor en Selenium y sus diferentes métodos. Además, cubrimos varios escenarios para lograr una solución efectiva utilizando diferentes métodos junto con ejemplos prácticos.