Pruebas de selenio automatizadas con Jest y LambdaTest | Programar Plus

0

¿Sabes qué es lo mejor de crear y ejecutar pruebas de navegador automatizadas? Significa que el sitio en el que lo estás haciendo realmente importa. Significa que está tratando de cuidar ese sitio asegurándose de que no se rompa, y vale la pena el tiempo para poner protectores contra esas roturas. Eso es genial. Significa que estás en el camino correcto.

Lo segundo que más me gusta de las pruebas automáticas de navegadores es la cantidad de cobertura que obtienes con tan poco código. Por ejemplo, si escribe un script que va a su página de inicio, hace clic en un botón y prueba si ocurrió un cambio, eso cubre mucho terreno. Por un lado, su sitio web funciona. No produce errores cuando se carga. ¡El botón está ahí! ¡El JavaScript se ejecutó! Si esa prueba pasa, muchas cosas salieron bien. Si eso falla, acaba de detectar un problema importante.

Entonces de eso es de lo que estamos hablando aquí:

  1. El selenio es la herramienta que automatiza los navegadores. ¡Ven aquí! ¡Haga clic en esto!
  2. Jest es el marco de prueba que adoran los desarrolladores. Espero this ser – estar that, ¿era que? ¿Sí? APROBAR. ¿No? ERROR.
  3. LambdaTest es la plataforma de prueba en la nube entre navegadores en la que lo ejecuta todo.

¿Es usted una de esas personas a las que les gusta el concepto de pruebas automatizadas, pero es posible que no sepan por dónde empezar? Eso es lo que vamos a ver en esta publicación. Al unir algunos recursos, podemos eliminar el trabajo pesado de las pruebas entre navegadores y sentirnos más seguros de que el código que escribimos no está rompiendo otras cosas.

Serenity Selenium ahora!

Si eres nuevo en Selenium, te espera un capricho. Es un conjunto de herramientas de prueba automatizadas de código abierto que pueden ejecutar pruebas en diferentes navegadores y plataformas en máquinas virtuales. Y cuando decimos que puede ejecutar pruebas, estamos hablando de ejecutarlas todas en paralelo. Llegaremos a eso.

Es capaz de hacerlo gracias a uno de sus componentes, Selenium Grid. La cuadrícula es una herramienta autohospedada que crea una red de máquinas de prueba. Al igual que en los navegadores y sistemas operativos que queremos probar automáticamente. Todas esas máquinas proporcionan los entornos que queremos probar y pueden ejecutarse simultáneamente. Muy guay.

Broma, espera hasta que veas esto

Donde Selenium es el jefe en la ejecución de pruebas, Jest es el marco de prueba. Jest encabeza las listas de satisfacción, interés y conciencia de los desarrolladores. Proporciona una biblioteca que lo ayuda a ejecutar código, señalando no solo dónde se desmoronan las cosas, sino también la cobertura de ese código como una forma de saber qué código afecta qué pruebas. Esta es una característica asombrosa. ¿Cuántas veces ha realizado un cambio en una base de código y no está seguro de qué partes se verán afectadas? Eso es lo que proporciona Jest: confianza.

Jest está repleto de una gran cantidad de potencia de prueba y su API sencilla hace que escribir pruebas unitarias sea relativamente fácil. Viene del equipo de Facebook, que lo desarrolló como una forma de probar aplicaciones React, pero es capaz de probar más que React. Es literalmente para cualquier JavaScript y, como veremos, el navegador se prueba a sí mismo.

Entonces, hagamos que Jest sea parte de nuestra pila de pruebas.

Selenio para máquinas, Jest para código de prueba

Si combinamos los superpoderes de Selenium con Jest, obtenemos un entorno de prueba bastante hábil. Jest ejecuta las pruebas unitarias y Selenium proporciona y automatiza las bases para las pruebas entre navegadores. ¡Realmente no es más que eso!

Hagamos una pausa en el desarrollo de nuestra pila de pruebas automatizadas por un momento para obtener Selenium y Jest. Van a ser requisitos previos para nosotros, por lo que también podemos engancharlos.

Empiece por crear un nuevo proyecto y cd-entre en ello. Si ya tiene un proyecto, puede cd en eso en su lugar.

Una vez que estemos en la carpeta del proyecto, asegurémonos de tener Node y npm listos.

## Run this or download the package yourself at: https://nodejs.org/brew install node

## Then we'll install the latest version of npm
npm install [email protected] -g

Okey-dokey, ahora instalemos Jest. Si está ejecutando un proyecto de React que se creó con create-react-app, entonces está de suerte: Jest ya está incluido, ¡así que está listo para comenzar!

Para el resto de los mortales, volveremos a la línea de comandos:

## Yarn is also supported
npm install --save-dev jest

Bien, tenemos las dependencias centrales que necesitamos para ponernos manos a la obra, pero hay una cosa más a considerar …

Escalabilidad!

Sí, escala. Si está ejecutando un sitio grande y complejo, entonces no es descabellado pensar que podría necesitar ejecutar miles de pruebas. Y, si bien Selenium Grid es un recurso fantástico, está alojado en cualquier entorno en el que lo coloque, lo que significa que es muy posible que lo supere y necesite algo más sólido.

Ahí es donde entra en juego LambdaTest. Si no ha oído hablar de él, LambdaTest es una herramienta de prueba entre navegadores basada en la nube con más de 2000 navegadores reales para pruebas manuales y de automatización de Selenium. Sin mencionar que funciona bien con muchos otros servicios, desde herramientas de comunicación como Slack y Trello hasta herramientas de gestión de proyectos como Jira y Asana, y GitHub, Bitbucket, etc. Es extensible así.

Esto es algo importante que debe saber: Jest no admite la ejecución de pruebas en paralelo por sí solo, lo cual es realmente necesario cuando tiene muchas pruebas y las está ejecutando en varios navegadores. Pero en LambdaTest, puede ejecutar sesiones simultáneas, lo que significa que se pueden ejecutar diferentes scripts de Jest en diferentes sesiones al mismo tiempo. Así es, puede ejecutar varias pruebas juntas, lo que significa que el tiempo para ejecutar las pruebas se reduce drásticamente en comparación con ejecutarlas secuencialmente.

Integración de LambdaTest en la pila

Ya hemos instalado Jest. Digamos que el selenio ya está instalado en alguna parte. Lo primero que debemos hacer es registrarnos en LambdaTest y obtener las credenciales de la cuenta. Tendremos que configurarlos como variables de entorno en nuestro proyecto.

Desde la línea de comando:

## Mac/Linuxexport LT_USERNAME=<your lambdatest username> export LT_ACCESS_KEY=<your lambdatest access_key>

## Windowsset LT_ACCESS_KEY=<your lambdatest access_key>set LT_ACCESS_KEY=<your lambdatest access_key>

LambdaTest tiene un repositorio que contiene una muestra de cómo configurar las cosas desde aquí. Podrías clonar eso como punto de partida si solo estás interesado en probar cosas.

Ejecutando pruebas

Los documentos de LambdaTest usan esto como un script de prueba de muestra:

const webdriver = require('selenium-webdriver');
const { until } = require('selenium-webdriver');
const { By } = require('selenium-webdriver');
const LambdaTestRestClient = require('@lambdatest/node-rest-client');

const username = process.env.LT_USERNAME || '<your username>';
const accessKey = process.env.LT_ACCESS_KEY || '<your accessKey>';

const AutomationClient = LambdaTestRestClient.AutomationClient({
  username,
  accessKey
});
const capabilities = {
  build: 'jest-LambdaTest-Single',
  browserName: 'chrome',
  version: '72.0',
  platform: 'WIN10',
  video: true,
  network: true,
  console: true,
  visual: true
};

const getElementById = async (driver, id, timeout = 2000) => {
  const el = await driver.wait(until.elementLocated(By.id(id)), timeout);
  return await driver.wait(until.elementIsVisible(el), timeout);
};

const getElementByName = async (driver, name, timeout = 2000) => {
  const el = await driver.wait(until.elementLocated(By.name(name)), timeout);
  return await driver.wait(until.elementIsVisible(el), timeout);
};

const getElementByXpath = async (driver, xpath, timeout = 2000) => {
  const el = await driver.wait(until.elementLocated(By.xpath(xpath)), timeout);
  return await driver.wait(until.elementIsVisible(el), timeout);
};

let sessionId = null;

describe('webdriver', () => {
  let driver;
  beforeAll(async () => {
    driver = new webdriver.Builder()
      .usingServer(
        'https://' + username + ':' + accessKey + '@hub.lambdatest.com/wd/hub'
      )
      .withCapabilities(capabilities)
      .build();
    await driver.getSession().then(function(session) {
      sessionId = session.id_;
    });
    // eslint-disable-next-line no-undef
    await driver.get(`https://lambdatest.github.io/sample-todo-app/`);
  }, 30000);

  afterAll(async () => {
    await driver.quit();
  }, 40000);

  test('test', async () => {
    try {
      const lnk = await getElementByName(driver, 'li1');
      await lnk.click();

      const lnk1 = await getElementByName(driver, 'li2');
      await lnk1.click();

      const inpf = await getElementById(driver, 'sampletodotext');
      await inpf.clear();
      await inpf.sendKeys("Yey, Let's add it to list");

      const btn = await getElementById(driver, 'addbutton');
      await btn.click();

      const output = await getElementByXpath(
        driver,
        '//html/body/div/div/div/ul/li[6]/span'
      );
      const outputVal = await output.getText();
      expect(outputVal).toEqual("Yey, Let's add it to list");
      await updateJob(sessionId, 'passed');
    } catch (err) {
      await webdriverErrorHandler(err, driver);
      throw err;
    }
  }, 35000);
});

async function webdriverErrorHandler(err, driver) {
  console.error('Unhandled exception! ' + err.message);
  if (driver && sessionId) {
    try {
      await driver.quit();
    } catch (_) {}
    await updateJob(sessionId, 'failed');
  }
}
function updateJob(sessionId, status) {
  return new Promise((resolve, reject) => {
    AutomationClient.updateSessionById(
      sessionId,
      { status_ind: status },
      err => {
        if (err) return reject(err);
        return resolve();
      }
    );
  });
}

¿El objeto ‘Capacidades’ parece confuso? En realidad, es mucho más fácil escribir este tipo de cosas utilizando el generador de capacidades deseadas de selenio que proporciona el equipo de LambdaTest. Ese script de muestra define un conjunto de pruebas que se pueden ejecutar en una máquina en la nube que tiene la configuración del navegador Chrome 72 y el sistema operativo Windows 10. Puede ejecutar el script desde la línea de comandos, así:

npm test .single.test.js

El script de muestra también tiene un ejemplo que puede usar para ejecutar las pruebas en su máquina local de esta manera:

npm test .local.test.js

Genial, pero ¿qué pasa con los resultados de las pruebas?

¿No sería fantástico tener un registro de todas sus pruebas, cuáles se están ejecutando, registros de cuándo se ejecutaron y cuáles fueron sus resultados? Aquí es donde LambdaTest es difícil de superar porque tiene una interfaz de usuario para todo eso a través de su panel de automatización.

El panel proporciona todos esos detalles y más, incluidos análisis que muestran cuántas compilaciones se ejecutaron en un día determinado, cuánto tiempo tomó ejecutarlas y cuáles aprobaron o fallaron. Es bueno tener eso cerca. LambdaTest incluso tiene documentación muy útil para la API de automatización de Selenium que se puede usar para extraer todos estos datos de ejecución de pruebas que puede usar para cualquier marco de informes personalizado que pueda tener.

¡Prueba todas las cosas!

Esa es la pila: Selenium para máquinas virtuales, Jest para pruebas unitarias y LambdaTest para automatización, alojamiento e informes. Eso es mucha cobertura de solo unas pocas piezas en movimiento.

Si alguna vez ha utilizado herramientas de varios navegadores en línea, es como tener eso … pero ejecutándose en su propia máquina local. O un entorno de producción.

LambdaTest es gratis para probar y vale la pena cada minuto de la prueba.

Empezar