Como Usar o JavaScriptExecutor no Selenium

O Selenium é um conjunto de ferramentas e bibliotecas de código aberto que permite interagir com navegadores para realizar diversas operações, como enviar texto, clicar em um botão, selecionar dropdowns, etc.

No entanto, existem cenários em que os comandos reais do Selenium WebDriver não funcionam conforme o esperado, pois o Selenium não consegue interagir diretamente com os WebElements. É aí que o JavaScriptExecutor entra em cena.

Neste blog, discutimos o JavaScriptExecutor no Selenium e como começar com casos de uso e exemplos práticos.

O que é JavaScriptExecutor no Selenium?

O JavaScriptExecutor é uma interface fornecida pelo Selenium que ajuda a executar comandos JavaScript. Esta interface fornece métodos para executar JavaScript na janela selecionada ou na página web atual. Está disponível para todas as linguagens suportadas pelo Selenium.

O JavaScriptExecutor no Selenium pode ser usado diretamente importando o seguinte pacote nos scripts de teste de automação:

org.openqa.selenium.JavascriptExecutor

JavaScriptExecutor no Selenium fornece dois métodos para interagir com os WebElements:

• executeScript() – Este método executa JavaScript no contexto da janela ou frame atualmente selecionado no Selenium. O script será executado como o corpo de uma função anônima.
• executeAsyncScript() – Este método executa um trecho assíncrono de JavaScript no contexto da janela ou quadro atualmente selecionado no Selenium. O script será executado como o corpo de uma função anônima.

Nota: A principal diferença entre os métodos executeScript() e executeAsyncScript() é que o script invocado usando o executeAsyncScript() deve sinalizar sobre a conclusão da execução usando a função callback().

Invocar métodos usando executeAsyncScript() é amplamente utilizado quando é necessário realizar uma pausa no navegador em teste ou quando os testes precisam ser sincronizados dentro de uma aplicação AJAX.

Por que usar JavaScriptExecutor no Selenium?

Existem cenários onde alguns comandos do WebDriver não funcionam como esperado devido a múltiplas razões, conforme segue:

1. Selenium não interagindo diretamente com os WebElements
2. Realizando ações como rolar para visualizar, clicar nos WebElements que estão ocultos atrás da sobreposição ou definir valores nos campos somente leitura
3. Executando comportamentos específicos do navegador, como modificar o DOM dinamicamente

Nesses casos, utilizamos a ajuda do JavaScriptExecutor no Selenium.

Tradicionalmente, usamos localizadores do Selenium como ID, Name, Seletor CSS, XPath, etc., para localizar um WebElement. Se esses localizadores não funcionarem, ou se você estiver lidando com um XPath complicado, nesses casos, o JavaScriptExecutor ajuda a localizar o WebElement desejado.

Há casos em que o método click() pode não funcionar em todos os navegadores da web, ou os controles da web podem se comportar de maneira diferente em navegadores diferentes. Para superar tais situações, o JavaScriptExecutor deve ser usado para realizar uma ação de clique.

Como sabemos, os navegadores possuem implementação JavaScript em seu interior e podem entender comandos JavaScript. Portanto, entender o JavaScriptExecutor no Selenium nos permitirá realizar uma série de operações de forma mais eficiente.

Noções básicas do JavaScriptExecutor no Selenium

O objetivo desta seção é fornecer uma ideia geral sobre os passos de implementação do JavaScriptExecutor no Selenium. Para a demonstração, estaremos utilizando Java como a linguagem de programação preferida.

Vamos dar uma olhada nos passos principais.

1. Importe o pacote associado ao JavaScriptExecutor:

import org.openqa.selenium.JavascriptExecutor;

2. Use o JavaScriptExecutor, crie uma referência para a interface e atribua-a à instância do WebDriver por type-casting:

JavascriptExecutor js = (JavascriptExecutor) driver;

3. Chame os métodos executeAsyncScript() ou executeScript() . Por exemplo, a sintaxe para executeScript() é dada abaixo:

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

Demonstração: Usando JavaScriptExecutor no Selenium

Antes de vermos como usar JavaScriptExecutor no Selenium, siga estes pré-requisitos:

• Crie um novo projeto Maven usando o IntelliJ IDE
• Adicione a dependência mais recente do Selenium WebDriver no pom.xml
• Adicione a dependência mais recente do TestNG no pom.xml

Vamos usar o site LambdaTest eCommerce Playground para demonstrar o funcionamento do JavaScriptExecutor no Selenium executando os testes no navegador Chrome Local.

Cenário de Teste 1

Nosso objetivo é escrever um código simples para ilustrar um exemplo usando o método executeScript() seguindo o seguinte cenário de teste.

1. Navegue até a página de Login de Conta do site LambdaTest eCommerce Playground.
2. Insira credenciais de login válidas e clique no botão Login destacando o campo com uma borda vermelha.
3. Imprima o título da página e o nome do domínio.
4. Assegure que o cabeçalho da página “Minha Conta” é exibido em um login bem-sucedido.

Implementação

Crie uma nova classe TestJavaScriptExecutor para implementar o cenário de teste. Primeiramente, criaremos dois métodos nesta classe de teste que nos permitirão configurar e encerrar as sessões do Selenium WebDriver.

Vamos declarar o WebDriver em nível de classe, pois precisaremos dele em ambos os métodos, ou seja, no método setup(), para iniciar a sessão do driver e no método tearDown(), para encerrar a sessão de forma adequada.

public class TestJavaScriptExecutor {

​

    private WebDriver driver;

    //...

}

Vamos criar um novo método setup() que instanciará um objeto da classe WebDriver e configurará adequadamente para executar os testes no 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á o navegador Chrome, maximizará sua janela e aplicará um tempo de espera implícito de 30 segundos. Este tempo de espera implícito permitirá que todo o conteúdo do site seja carregado com sucesso antes do início da execução do teste.

@AfterTest

    public void tearDown () {

        driver.quit ();

    }

Por fim, quando o teste for executado, o método tearDown() será chamado, o qual encerrará a sessão do RemoteWebDriver de forma adequada.

Agora, vamos adicionar um método testJavaScriptExecutorCommand() na mesma classe de teste para implementar o cenário de teste que discutimos.

@Test

    public void testJavaScriptExecutorCommand () {

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

​

        JavascriptExecutor js = (JavascriptExecutor) driver;

        //....

      }

O código navega até a página de Login do site LambdaTest eCommerce Playground. A próxima linha faz um cast da instância do WebDriver para JavascriptExecutor para que comandos JavaScript possam ser executados no 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);

Em seguida, localiza o emailAddressField usando a estratégia de localização id. Depois, utiliza o comando do JavaScriptExecutor para destacar a borda do campo de endereço de e-mail em vermelho.

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

Em seguida, o campo de senha é localizado e destacado com uma borda vermelha. Este destaque ajuda a saber quais passos estão sendo executados no momento da execução do teste de automação.

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

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

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

Da mesma forma, o botão de Login é localizado usando a estratégia do Seletor CSS e também é destacado.

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

O título da página e o nome de domínio são localizados em seguida usando o JavaScriptExecutor e impressos no console.

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

assertEquals (myAccountHeader, "My Account");

Por fim, o cabeçalho da página da Minha Conta, que é exibido após um login bem-sucedido, é localizado e uma asserção é realizada para verificar se ele exibe o texto “Minha Conta“.

Aqui está o código completo da 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");

    }

Execução do Teste

A captura de tela a seguir do IDE IntelliJ mostra que o teste foi executado com sucesso.

Cenário de Teste 2

Nosso objetivo é escrever um código simples para ilustrar um exemplo usando o método executeAsyncScript() seguindo o cenário de teste a seguir.

1. Acesse o site Playground de Comércio Eletrônico da LambdaTest.
2. Role até o final da página inicial.
3. Assegure que o texto “DO BLOG” seja exibido na seção inferior da página.

Implementação:

Crie um novo método testExecuteAsyncScript() na classe 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");

    }

O código navegará até a página inicial do site LambdaTest eCommerce Playground. O método executeAsyncScript() do JavaScriptExecutor será chamado em seguida, onde ele realizará a ação de rolar a janela.

No método executeAsyncScript(), os scripts executados precisam sinalizar explicitamente que terminaram invocando o método callback() fornecido.

JavascriptExecutor js = (JavascriptExecutor) driver;

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

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

Após rolar até o final da janela, o texto “FROM THE BLOG” será localizado, e uma asserção será realizada sobre ele.

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

 assertEquals(fromTheBlogText, "FROM THE BLOG");

Execução do Teste

A captura de tela a seguir mostra que o teste foi executado com sucesso.

Comandos para Usar o JavaScriptExecutor no Selenium

Vamos examinar alguns cenários que poderíamos lidar usando a Interface JavaScriptExecutor para automação de teste no Selenium.

Para clicar em um botão:

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

//or

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

Para digitar texto em uma caixa de texto sem usar o método sendKeys() :

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

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

Para lidar com a caixa de seleção passando o valor como verdadeiro ou falso:

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

Para gerar uma janela de alerta pop no Selenium WebDriver:

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

Para atualizar a janela do navegador usando JavaScript:

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

Para obter o texto interno de toda a página da web no Selenium:

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

System.out.println(innerText);

Para obter o título da página da web:

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

System.out.println(titleText);

Para obter o nome de domínio:

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

System.out.println(domainName);

​

Para obter a URL de uma página da web:

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

System.out.println(url);

Para obter a altura e largura de uma página da web:

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

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

Para navegar para uma página diferente usando JavaScript:

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

Para realizar scroll em um aplicativo usando o Selenium:

• Para rolar a página verticalmente por 500px:
  Java

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

• Para rolar a página verticalmente até o final:
  Java

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

Adicionando um elemento no Modelo de Objeto de Documento (DOM):

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

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

​

Para obter o shadow root no DOM:

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

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

Conclusão

O Selenium possui uma interface chamada JavaScriptExecutor que é utilizada quando os comandos do WebDriver não se comportam conforme o esperado. Com a ajuda do JavaScriptExecutor, podemos usar o WebDriver para executar código JavaScript no site, permitindo lidar com uma variedade de tarefas de maneira elegante e eficaz, o que seria impossível usando apenas Java.

Neste blog, exploramos como usar o JavaScriptExecutor no Selenium e seus diferentes métodos. Além disso, abordamos vários cenários para obter uma solução eficaz usando diferentes métodos juntamente com exemplos práticos.