Como usar o JavaScriptExecutor no Selenium

O Selenium é uma suíte de ferramentas e bibliotecas de código aberto que permite interagir com navegadores para realizar várias operações, como enviar texto, clicar em um botão, selecionar opções de lista suspensa, etc.

No entanto, existem cenários em que os comandos reais do Selenium WebDriver não funcionam conforme o esperado, já que o Selenium não pode 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 práticos e exemplos.

O que é o JavaScriptExecutor no Selenium?

O JavaScriptExecutor é uma interface fornecida pelo Selenium que ajuda na execução de comandos JavaScript. Esta interface fornece métodos para executar JavaScript na janela selecionada ou na página da web atual. Está disponível para todas as bibliotecas de 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 frame 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() precisa sinalizar a conclusão da execução usando a função callback().

A invocação de métodos usando executeAsyncScript() é principalmente usada quando é necessário realizar um atraso no navegador em teste ou quando os testes precisam ser sincronizados em uma aplicação AJAX.

Por que usar o JavaScriptExecutor no Selenium?

Há cenários em que alguns comandos do WebDriver não funcionam como esperado devido a várias razões, como a seguir:

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

Nesses casos, recorremos ao JavaScriptExecutor no Selenium.

Tradicionalmente, usamos localizadores Selenium como ID, Nome, 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, ou os controles da web podem se comportar de maneira diferente em diferentes navegadores. Para superar tais situações, o JavaScriptExecutor deve ser usado para realizar uma ação de clique.

Como sabemos, os navegadores têm implementação de JavaScript dentro deles e podem entender comandos JavaScript. Portanto, entender o JavaScriptExecutor no Selenium nos permitirá realizar uma variedade de operações de forma mais eficiente.

Fundamentos 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, usaremos Java como a linguagem de programação preferida.

Vamos dar uma olhada nos passos-chave.

1. Importar o pacote associado ao JavaScriptExecutor:

import org.openqa.selenium.JavascriptExecutor;

2. Usar o JavaScriptExecutor, criar uma referência para a interface e atribuí-la à instância do WebDriver fazendo um type-casting:

JavascriptExecutor js = (JavascriptExecutor) driver;

3. Chamar 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 olharmos como usar o JavaScriptExecuter no Selenium, siga estes pré-requisitos:

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

Usaremos o LambdaTest eCommerce Playground para demonstrar o funcionamento do JavaScriptExecutor no Selenium executando os testes no navegador Chrome local.

Cenário de Teste 1

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

1. Navegue até a página de Login da Conta do site LambdaTest eCommerce Playground.
2. Digite credenciais de login válidas e clique no botão de Login destacando o campo com uma borda vermelha.
3. Imprima o título da página e o nome do domínio.
4. Afirme 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. Primeiro, criaremos dois métodos nesta classe de teste que nos permitirão configurar e encerrar as sessões do Selenium WebDriver de forma adequada.

Vamos declarar o WebDriver a 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á uma instância da classe WebDriver e configurará adequadamente a configuração 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));

    }

Esse método abrirá o navegador Chrome, maximizará sua janela e também aplicará uma espera implícita de 30 segundos. Essa espera implícita permitirá que todo o conteúdo do site seja carregado com sucesso antes que a execução do teste comece.

@AfterTest

    public void tearDown () {

        driver.quit ();

    }

Finalmente, quando o teste for executado, o método tearDown() será chamado, que fechará 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 converte a instância do WebDriver em 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 localizador id. Depois, utiliza o comando JavaScriptExecutor para destacar a borda do campo de endereço de e-mail na cor vermelha.

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. Esse destaque ajuda a saber quais etapas estão sendo executadas 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 de 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 do 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");

Finalmente, o cabeçalho da página Minha Conta, que é exibido após um login bem-sucedido, é localizado e uma asserção é realizada para verificar se 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 IntelliJ IDE 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() com o seguinte cenário de teste.

1. Navegue até o site LambdaTest eCommerce Playground.
2. Role para baixo até o final da página inicial.
3. Asserte que o texto “DO BLOG” é 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 irá navegar até a página inicial do site LambdaTest eCommerce Playground. O método executeAsyncScript() do JavaScriptExecutor será chamado em seguida, onde ele irá 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 nele.

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 testes do 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 true ou false:

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

Para gerar uma janela de alerta pop no WebDriver do Selenium:

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 como pretendido. Com a ajuda do JavaScriptExecutor, podemos usar o WebDriver para executar código JavaScript no site, permitindo-nos 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.