Como automatizar testes de navegador com Selenium em JavaScript

O teste automatizado do navegador é obrigatório para qualquer desenvolvedor web para garantir que seus aplicativos funcionem corretamente. Nesta postagem, veremos como configurar o Selenium com JavaScript para automatizar uma tarefa simples do navegador: abrir uma página da web e clicar em um botão.

Pré-requisitos

Para acompanhar, você precisará de:

• Node.js e npm instalados.
• Google Chrome e ChromeDriver instalados (ou outro navegador e seu respectivo driver).

Etapa 1: configure seu projeto

Primeiro, crie uma nova pasta para o seu projeto. Abra seu terminal e execute:

mkdir selenium-test
cd selenium-test

Em seguida, inicialize um novo projeto Node.js:

npm init -y

Este comando gera um arquivo package.json que rastreia as dependências do seu projeto.

Etapa 2: Instale o Selenium WebDriver

Usaremos npm para instalar Selenium WebDriver e ChromeDriver:

npm install selenium-webdriver chromedriver --save

Esses pacotes fornecem as bibliotecas e ferramentas necessárias para automatizar o Chrome com Selenium.

Etapa 3: escreva seu script Selenium

Crie um novo arquivo chamado test.js na pasta do seu projeto. Este script abrirá uma página da web, aguardará até que um botão se torne clicável e, em seguida, clique nele.

const { Builder, By, until } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

// Helper function to pause the script
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function runTest() {
  // Configure Chrome to suppress unwanted prompts
  let options = new chrome.Options();
  options.addArguments('--no-default-browser-check', '--no-first-run', '--disable-default-apps', '--disable-infobars');

  let driver = await new Builder()
    .forBrowser('chrome')
    .setChromeOptions(options)
    .build();

  try {
    // Open the target webpage
    await driver.get('https://example.com'); // Change this URL to the site you want to test

    // Wait for an element to load
    await driver.wait(until.elementLocated(By.className('sample-class')), 10000);
    console.log('Found element with class "sample-class".');

    // Generic wait for 6 seconds to handle any dynamic content
    await sleep(6000);

    // Wait for the button to be clickable
    await driver.wait(until.elementLocated(By.id('sample-button')), 10000);

    // Re-locate the button to ensure it’s still in the DOM
    let button = await driver.findElement(By.id('sample-button'));
    console.log('Button located:', button);

    // Click the button
    await button.click();
    console.log('Button clicked successfully.');

    // Wait for the next page or action to load
    await driver.wait(until.urlContains('new-page'), 10000);
    console.log('Navigation to new page was successful.');

  } catch (error) {
    console.error('Error during the test:', error);
  } finally {
    // Always close the browser
    await driver.quit();
  }
}

runTest();

Etapa 4: execute o script

Para executar seu script, execute:

node test.js

O Chrome abrirá e executará as ações definidas em seu script. Observe o console para obter registros indicando o progresso de cada etapa.

Solução de problemas

• StaleElementReferenceError: Isso acontece quando o DOM muda após encontrar um elemento. Para evitar isso, sempre reposicione os elementos antes de interagir com eles.
• Timeouts: Se um elemento demorar mais para carregar, aumente o tempo limite em driver.wait().

Conclusão

Agora você tem uma configuração básica para testes automatizados de navegador usando Selenium e JavaScript. Essa configuração pode ser facilmente expandida para incluir interações, verificações e etapas de validação mais complexas.

Lembre-se de manter seus drivers atualizados para corresponder às versões do seu navegador e considere usar um modo headless para ambientes CI/CD.

Se você quiser hospedá-lo no Azure, confira meu outro post: https://dev.to/iamrule/how-to-azure-host-a-selenium-javascript-node-application-in-azure-and -enviar notificações por e-mail sobre falhas-2aio

Bom teste!