Pruebas automatizadas de selenio con Jest y LambdaTest

¿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ás tratando de cuidar ese sitio asegurándote de que no se rompa, y vale la pena dedicar tiempo a poner protecciones contra esas roturas. Eso es genial. Significa que estás en el camino correcto.

Lo segundo que más me gusta de las pruebas automatizadas de navegador es cuánta cobertura se obtiene 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 se produjo un cambio, eso cubre mucho terreno. Por un lado, su sitio web funciona. No da error cuando se carga. ¡El botón está ahí! ¡Se ejecutó JavaScript! Si esa prueba pasa, muchas cosas salieron bien. Si eso falla, acaba de detectar un problema importante.

Entonces de eso estamos hablando aquí:

1. Selenium es la herramienta que automatiza los navegadores. ¡Ven aquí! ¡Haz clic en esto!
2. Jest es el marco de prueba que les encanta a los desarrolladores. Espero thisserlo that, ¿verdad? ¿Sí? APROBAR. ¿No? ERROR.
3. LambdaTest es la plataforma de pruebas en la nube para varios navegadores en la que lo ejecuta todo.

¿Es usted una de esas personas a las que les gusta el concepto de pruebas automatizadas pero quizás no saben por dónde empezar? Eso es lo que vamos a comprobar 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.

Serenidad¡Selenio ahora!

Si eres nuevo en Selenium, te espera un placer. Es un conjunto de herramientas de prueba automatizadas de código abierto que puede 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 . El grid es una herramienta autohospedada que crea una red de máquinas de prueba. Es decir, 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.

Sólo 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 le ayuda a ejecutar código, señalando no sólo dónde fallan 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 sorprendente. ¿Cuántas veces has realizado un cambio en una base de código y no estás completamente seguro de qué partes se verán afectadas? Eso es lo que proporciona Jest: confianza.

Jest está repleto de una gran capacidad de prueba y su sencilla API hace que escribir pruebas unitarias sea relativamente fácil. Proviene 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, los navegadores se prueban a sí mismos.

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

Selenio para máquinas, Jest para probar código

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

Hagamos una pausa en el desarrollo de nuestra pila de pruebas automatizadas por un momento para aprovechar Selenium y Jest. Serán requisitos previos para nosotros, por lo que también podemos aprovecharlos.

Comience creando un nuevo proyecto y cdentrando en él. Si ya tienes un proyecto, puedes cdhacerlo.

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 npmnpm install npm@latest -g

Bien, ahora instalemos Jest. Si estás ejecutando un proyecto de React creado con create-react-app, entonces estás de suerte: Jest ya está incluido, así que ¡estás listo!

Para el resto de los mortales, volvemos a la línea de comando:

## Yarn is also supportednpm install --save-dev jest

Bien, tenemos las dependencias principales que necesitamos para empezar a trabajar, pero hay una cosa más a considerar…

¡Escalabilidad!

Sí, escala. Si está ejecutando un sitio grande y complejo, 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 coloques, lo que significa que es muy posible que te quedes pequeño y necesites 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 de automatización manual y 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 y demás. Es extensible así.

Aquí hay algo importante que debes saber: Jest no admite la ejecución de pruebas en paralelo por sí solo, lo cual es realmente necesario cuando tienes muchas pruebas y las ejecutas 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 ejecutarlas se reduce drásticamente en comparación con ejecutarlas secuencialmente.

Integrando LambdaTest en la pila

Ya hemos instalado Jest. Digamos que Selenium ya está instalado en alguna parte. Lo primero que debemos hacer es registrarnos en LambdaTest y obtener las credenciales de la cuenta. Necesitaremos 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_keyset 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 clonarlo como punto de partida si solo estás interesado en probar cosas.

Ejecución de pruebas

Los documentos de LambdaTest utilizan 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 Selenium 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 llevó ejecutarlas y cuáles pasaron o fallaron. Es muy agradable tener eso cerca. LambdaTest incluso tiene documentación muy útil para la API de Selenium Automation 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 con sólo unas pocas piezas en movimiento.

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

LambdaTest es una prueba gratuita y vale la pena cada minuto de la prueba.

Empezar