Cómo automatizar las pruebas del navegador con Selenium en JavaScript

Las pruebas automatizadas del navegador son imprescindibles para que cualquier desarrollador web garantice que sus aplicaciones funcionen correctamente. En esta publicación, explicaremos cómo configurar Selenium con JavaScript para automatizar una tarea simple del navegador: abrir una página web y hacer clic en un botón.

Requisitos previos

Para seguirlo, necesitarás:

• Node.js y npm instalados.
• Google Chrome y ChromeDriver instalados (u otro navegador y su respectivo controlador).

Paso 1: configura tu proyecto

Primero, crea una nueva carpeta para tu proyecto. Abre tu terminal y ejecuta:

mkdir selenium-test
cd selenium-test

A continuación, inicialice un nuevo proyecto de Node.js:

npm init -y

Este comando genera un archivo package.json que realiza un seguimiento de las dependencias de su proyecto.

Paso 2: Instale Selenium WebDriver

Usaremos npm para instalar Selenium WebDriver y ChromeDriver:

npm install selenium-webdriver chromedriver --save

Estos paquetes proporcionan las bibliotecas y herramientas necesarias para automatizar Chrome con Selenium.

Paso 3: escriba su script de Selenium

Cree un nuevo archivo llamado test.js en la carpeta de su proyecto. Este script abrirá una página web, esperará a que se pueda hacer clic en un botón y luego hará clic en él.

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

Paso 4: ejecutar el script

Para ejecutar su script, ejecute:

node test.js

Chrome se abrirá y realizará las acciones definidas en tu script. Mire la consola para ver los registros que indican el progreso de cada paso.

Solución de problemas

• StaleElementReferenceError: Esto sucede cuando el DOM cambia después de encontrar un elemento. Para evitar esto, siempre reubique los elementos justo antes de interactuar con ellos.
• Tiempos de espera: Si un elemento tarda más en cargarse, aumenta el tiempo de espera en driver.wait().

Conclusión

Ahora tienes una configuración básica para pruebas automatizadas del navegador usando Selenium y JavaScript. Esta configuración se puede ampliar fácilmente para incluir interacciones, comprobaciones y pasos de validación más complejos.

Recuerde mantener sus controladores actualizados para que coincidan con las versiones de su navegador y considere usar un modo sin cabeza para entornos CI/CD.

Si desea alojarlo en Azure, consulte mi otra publicación: https://dev.to/iamrule/how-to-azure-host-a-selenium-javascript-node-application-in-azure-and -enviar-notificaciones-por-correo-electrónico-en-fallas-2aio

¡Felices pruebas!