Pruebas de automatización a gran escala utilizando Cypress

En este artículo, aprenderemos cómo configurar Cypress y ejecutar pruebas de automatización web (en serie y en paralelo) en la grilla de la nube de LambdaTest.

Cypress es un marco de automatización de JavaScript de código abierto que puede realizar pruebas de unidad, integración, componentes y de extremo a extremo. Es un marco de pruebas de front-end de próxima generación construido para aplicaciones web modernas y permite ejecutar pruebas cruzadas y paralelas al alcance de tus manos.

Con Cypress, los equipos pueden crear fácilmente pruebas de automatización web, depurarlas de manera visual y ejecutarlas automáticamente en los pipelines de CI/CD, ayudando así con la Integración Continua (CI) y el desarrollo.

Aunque Cypress se compara a menudo con Selenium WebDriver, es fundamental y arquitectónicamente diferente. No utiliza Selenium WebDriver para pruebas de automatización. Esto permite a los usuarios escribir pruebas más rápidas, más fáciles y más confiables.

La instalación y configuración de Cypress también es más fácil en comparación con otros marcos de automatización de pruebas, ya que es un paquete de nodo. Solo necesitas ejecutar el comando npm npm install cypress y luego usar el framework Cypress.

En este artículo, aprenderemos cómo configurar Cypress y ejecutar pruebas de automatización web (en serie y en paralelo) en la nube de LambdaTest.

¡Así que empecemos!

Características clave de Cypress

Cypress ofrece algunas características incorporadas para ejecutar pruebas de automatización a gran escala. Veamos algunas de ellas.

Time Travel: Cypress te permite “viajar en el tiempo” a través de la aplicación web, lo que significa que verificará qué sucede en cada paso cuando se ejecutan las pruebas. Podemos avanzar, retroceder e incluso pausar la ejecución de las pruebas en tiempo de ejecución. Esto nos brinda la flexibilidad de inspeccionar el estado de la aplicación en tiempo real durante la ejecución de las pruebas.
Auto Waits: Cypress tiene una funcionalidad interna de espera automática que espera automáticamente el comando y la aserción antes de pasar al siguiente paso. Por lo tanto, no es necesario agregar esperas o pausas a las pruebas de automatización web. Aunque Cypress tiene el comando de espera, no es necesario utilizarlo explícitamente en las pruebas.
Administración de Pruebas Inestables: Una prueba inestable es aquella que pasa y falla en varios intentos de repetición sin cambios en el código. Por ejemplo, cuando la prueba se ejecuta por primera vez, falla; cuando se ejecuta nuevamente sin realizar cambios en el código, pasa.
Cypress tiene la función de volver a intentar automáticamente las pruebas fallidas. Esto puede ayudar a que el conjunto de pruebas esté libre de inestabilidad. La administración de pruebas inestables puede evitar que el pipeline automatizado falle debido a pruebas inestables.
Capturas de pantalla, Videos y Reproducción Fácil de Pruebas: Cypress permite tomar capturas de pantalla y videos automáticamente durante la ejecución de las pruebas. Esto se puede configurar utilizando el archivo de configuración de Cypress. Cuando el conjunto de pruebas se ejecuta en modo sin cabeza a través de la CLI y se habilita la configuración de videos y capturas de pantalla, Cypress creará un video y tomará capturas de pantalla de toda la ejecución de las pruebas.
Las capturas de pantalla y los videos pueden ayudar a analizar las fallas de las pruebas y reproducir problemas.
Pruebas en Múltiples Navegadores: Cypress proporciona la capacidad de ejecutar las pruebas en múltiples navegadores. Admite navegadores familiares de Chrome como Chrome, Microsoft Edge basado en Chromium y Electron. También incluye Safari y Firefox.
Necesitamos instalar el navegador respectivo (excluyendo Electron) en el que deseamos ejecutar las pruebas en la máquina local o en el entorno de CI. Se puede utilizar la opción --browser junto con el comando cypress para ejecutar las pruebas en el navegador requerido. Por ejemplo, para ejecutar la prueba en el navegador Firefox, podemos usar el siguiente comando:
```
cypress run --browser firefox
```
Ejecución de Pruebas en Paralelo: Cypress puede realizar pruebas en paralelo. Esto ayuda a reducir el tiempo total de ejecución de las pruebas y proporciona una respuesta rápida.
Depuración Fácil: Con el modo interactivo de la CLI de Cypress, puedes depurar fácilmente las pruebas y encontrar los problemas que causan el fallo de las pruebas. Sus errores fácilmente legibles y las trazas de la pila permiten una depuración rápida.
Simulación y Espionaje de Red: Cypress permite a los usuarios elegir si deben simular las respuestas o permitir que realmente se conecten al servidor y obtengan una respuesta. También se puede combinar en la misma prueba, por lo que se pueden simular algunas solicitudes y permitir que otras se conecten al servidor real y obtengan una respuesta.
Soporte para Pruebas de API: Cypress también brinda soporte adicional para realizar pruebas de API y una gran experiencia para desarrolladores al probar APIs. Se puede utilizar de forma extensiva para probar APIs y escribir pruebas efectivas de API e integración.
Cypress Test Runner: Cypress tiene una interfaz de usuario integrada para correr pruebas que proporciona una interfaz interactiva que se puede iniciar usando el comando Cypress open. Se puede utilizar para ejecutar y depurar las pruebas de automatización web. El comando Cypress open abre una ventana del test runner que se puede utilizar para seleccionar y ejecutar pruebas individuales, depurar el código y ver los resultados de las pruebas.

Configurando el framework Cypress

Antes de comenzar a configurar el framework, hablemos sobre la pila tecnológica que utilizamos en este artículo para la demostración. Se utilizarán los siguientes lenguajes de programación/herramientas/framework:

Lenguaje de Programación/ Herramientas/ Framework	Versión
NodeJS	18.17.1
Cypress	13.3.0
@faker-js/faker	8.1.0
LambdaTest Cypress CLI	3.0.18

Ejecutaremos las pruebas en la cuadrícula de nube de Cypress proporcionada por LambdaTest, una plataforma de orquestación y ejecución de pruebas impulsada por IA. Con LambdaTest, puedes realizar pruebas automatizadas con Cypress en varios navegadores y sistemas operativos. Es una buena opción para equipos que necesitan realizar pruebas de compatibilidad entre navegadores, pruebas en navegadores reales y pruebas en paralelo.

Paso 1: Instalando NodeJS

Para comenzar con el proceso de instalación, comencemos con NodeJS. Podemos instalarlo utilizando su sitio web oficial. Puedes descargar e instalar el archivo adecuado según tu sistema operativo.

Una vez instalado NodeJS, podemos verificar su instalación exitosa ejecutando el siguiente comando en la terminal o el símbolo del sistema:

node - v

Imagen 1

Paso 2: Instalando Cypress

Cypress se puede instalar de dos formas diferentes: utilizando CLI y descargando el archivo ZIP.

Utilizando CLI

Descargando directamente el archivo ZIP

Se recomienda instalar Cypress utilizando CLI, ya que es simple y fácil. El CLI maneja todo el proceso de instalación, por lo que no se requiere intervención manual.

El siguiente comando se puede ejecutar en la terminal para instalar Cypress.

npm install cypress --save-dev

Para verificar que Cypress se ha instalado correctamente, podemos ejecutar el siguiente comando para verificar su versión.

npx cypress --version

Paso 3: Instalando LambdaTest Cypress CLI

CLI de LambdaTest Cypress es la interfaz de línea de comandos que ayuda a ejecutar pruebas de Cypress en la cuadrícula de nube de LambdaTest. El siguiente comando se puede ejecutar en la terminal para instalar el paquete lambdatest-cypress-cli:

npm install -g lambdatest-cypress-cli

Para verificar su instalación exitosa, verifica su versión ejecutando el siguiente comando en la terminal.

lambdatest-cypress --version

El paquete lambdatest-cypress-cli requiere un archivo de configuración que contiene todos los detalles de configuración como el nombre del navegador, los detalles del sistema operativo, los detalles de autenticación de LambdaTest, la configuración de ejecución y el túnel. Se puede generar un archivo de configuración predeterminado utilizando el siguiente comando. Este comando debe ejecutarse después de navegar hasta la carpeta raíz del proyecto.

lambdatest-cypress init --cv=10

Una vez que el comando se ejecuta correctamente, se generará un archivo llamado lambdatest-config.json en la carpeta raíz del proyecto.

Nombre de archivo: lambdatest-config.json

{   "lambdatest_auth": {      "username": "NOMBRE_DE_USUARIO_LT",      "access_key": "CLAVE_DE_ACCESO_LT"   },   "browsers": [      {         "browser": "Chrome",         "platform": "macOS Ventura",         "versions": [            "latest-1"         ]      },      {         "browser": "MicrosoftEdge",         "platform": "Windows 10",         "versions": [            "latest-1"         ]      }   ],   "run_settings": {      "reporter_config_file": "",      "build_name": "cypress-demo-run",      "parallels": 2,      "specs": "./cypress/e2e/*.cy.js",      "ignore_files": "",      "network": false,      "headless": false,      "npm_dependencies": {         "cypress": "13.2.0",         "@faker-js/faker": "^8.1.0"      }   },   "tunnel_settings": {      "tunnel": false,      "tunnel_name": null   }}

El paquete lambdatest-cypress-cli ayudará a ejecutar la prueba en la nube de LambdaTest. Utilizará el archivo lambdatest-config.json para obtener las configuraciones de la prueba.

El archivo lambdatest-config.json contiene lo siguiente:

lambdatest_auth

Esta sección incluye las credenciales de LambdaTest para realizar pruebas de Cypress en la nube de LambdaTest. Puedes dejar los campos por defecto, podemos proporcionar estos valores utilizando el parámetro CLI --user=<Usuario de LambdaTest> y --ak=<Clave de acceso de LambdaTest> en la terminal.

Según la documentación de CLI de LambdaTest Cypress, se utiliza el siguiente orden de precedencia para determinar qué credenciales de autenticación usar en caso de que el usuario utilice más de una opción para pasar las credenciales de autenticación de LambdaTest:

Argumentos de CLI > Opciones establecidas en lambdatest-config.json > Variables de entorno.

navegadores

Esta sección se utiliza para proporcionar el navegador, el sistema operativo y la versión en los que se ejecutará la automatización de pruebas de Cypress. Podemos tener varias combinaciones de navegador y sistema operativo en una matriz. Suministraremos el navegador y el sistema operativo como se discutió en la sección anterior.

run_settings

Esta sección contiene las capacidades deseadas del conjunto de pruebas de Cypress. build_name indica el nombre de la compilación que se utilizará al realizar pruebas de Cypress en LambdaTest. parallels indica el número de pruebas de Cypress que se ejecutarán en paralelo en la nube de LambdaTest. El valor de parallels debe establecerse según el número de sesiones paralelas admitidas en nuestro plan de LambdaTest.

También hay un objeto llamado npm_dependencies en el que debemos proporcionar las dependencias que utilizaremos en nuestro proyecto. Por defecto se proporciona Cypress. Sin embargo, debemos actualizar manualmente aquí los nombres de las otras dependencias. Por ejemplo, la dependencia @faker-js/faker se utiliza en este proyecto para la gestión de datos de prueba.

Usando ignore_files, podemos ignorar o excluir cualquier archivo de prueba de Cypress de la ejecución.

tunnel_settings

Esta sección incluye la configuración del túnel de LambdaTest. Si el valor para la clave "tunnel" se establece en "true", significa que se usará el túnel; de lo contrario, false significa que no se utilizará el túnel.

tunnelName es el nombre del túnel que conecta el sistema local con los servidores de LambdaTest a través del túnel de integración SSH.

De forma predeterminada, el túnel de LambdaTest está desactivado, ya que su valor se establece en false. El túnel con el nombre especificado se iniciará automáticamente una vez que se active la prueba de Cypress. Por lo tanto, no es necesario iniciar el túnel de LambdaTest manualmente.

Ahora, pasemos a escribir la primera prueba utilizando Cypress.

Escribir el Primer Caso de Prueba Utilizando Cypress

Utilizaremos la página de demostración del formulario de entrada en el Selenium Playground de LambdaTest para demostrar cómo escribir pruebas de automatización web utilizando Cypress. A continuación se muestra el escenario de prueba en el que trabajaremos

Escenario de Prueba

Abrir el Selenium Playground de LambdaTest
Hacer clic en el enlace de Demostración del Formulario de Entrada
Localizar e ingresar valores en todos los campos de la página de Demostración del Formulario de Entrada
Hacer clic en el botón de Enviar
Verificar el mensaje “Gracias por contactarnos, nos pondremos en contacto contigo en breve.” que se muestra después de enviar el formulario correctamente.

Estructura del Proyecto

La estructura del proyecto debería verse como en la captura de pantalla de abajo una vez que se complete la instalación.

Implementación de los Escenarios de Prueba

Para escribir la prueba, creemos un nuevo archivo dentro de la carpeta e2e en el proyecto y nombremoslo “seleniumplaygroundtests.spec.cy.js” y escribamos la prueba en este archivo.

Nombre de archivo: seleniumplaygroundtests.spec.cy.js

import mainPage from "../pages/MainPage.js";import formDemoPage from "../pages/FormDemoPage.js";describe("Pruebas de Demostración del Selenium Playground para la Página de Demostración del Formulario", () => {  it("debería completar el formulario en la página de demostración del formulario y verificar el mensaje de éxito", () => {    cy.visit('https://www.lambdatest.com/selenium-playground/');    mainPage.navigateToFormDemoPage();    formDemoPage.fillForm();    formDemoPage      .getSuccessMessageText()      .should(        "have.text",        "Gracias por contactarnos, nos pondremos en contacto contigo en breve."      );  });});

Recorrido del Código

El método cy.visit() ayudará a navegar al sitio web del campo de juegos de Selenium de LambdaTest.

En la siguiente línea, se llamará al método navigateToFormDemoPage() desde la clase MainPage. Este método abrirá la página de demostración de formularios.

Nombre de archivo: MainPage.js

class MainPage {    webElements = {    inputFormDemoLink: () => cy.get(":nth-child(18) > .text-black")  };  navigateToFormDemoPage() {    this.webElements.inputFormDemoLink().click();  }}module.exports = new MainPage();

En la clase MainPage, se ha creado un mapa de elementos web para mantener todos los localizadores de la Página principal del campo de juegos de Selenium de LambdaTest. La propiedad inputFormDemoLink localiza el enlace Submit del formulario de entrada en la Página principal.

Usar el modo interactivo de Cypress facilita la localización de los selectores para los elementos web. Para ejecutar Cypress en modo interactivo, se debe ejecutar el siguiente comando en la terminal

Paso 1 – Ejecutar el siguiente comando

npx cypress open

Después de ejecutar el comando, Cypress debería abrirse en modo interactivo

Paso 2 – Seleccionar Pruebas E2E

Paso 3 – Seleccionar el navegador para ejecutar la prueba; seleccionaremos Chrome

Paso 4 – Seleccionar la especificación de prueba para ejecutar la prueba

Paso 5 – Localizar el elemento web utilizando el buscador de elementos web incorporado de Cypress

Para localizar el elemento web en el modo interactivo, debemos realizar los siguientes pasos:

Hacer clic en el botón Seleccionar elemento.
Seleccionar el elemento web que necesitamos localizar.
Cypress localizará automáticamente el elemento web y proporcionará su selector en el cuadro de texto que se muestra en la parte superior junto al botón Seleccionar elemento.
El selector mostrado en el cuadro de texto se puede copiar utilizando el botón Copiar al portapapeles.

Aquí, podemos ver que para el enlace “Submit del formulario de entrada”, Cypress nos ha proporcionado el selector – cy.get(':nth-child(18) > .text-black').

Este localizador se puede utilizar en la clase del objeto de la página para localizar el enlace y hacer clic en él.

La propiedad inputFormDemoLink se llama en el método navigateToFromDemoPage() para realizar la acción de clic en él.

La siguiente línea en la prueba es completar el formulario proporcionado en la página de Formulario de demostración.

En la clase FormDemoPage, se ha creado un mapa de elementos web que contiene todos los objetos de página para la página de formularios. El método fillForm() en la clase FormDemoPage realiza todas las interacciones para completar el formulario.

Al igual que usamos el modo interactivo de Cypress para localizar el enlace Submit del formulario de entrada del elemento web. De manera similar, podemos usar el modo interactivo para localizar todos los campos en esta página de demostración de formularios.

Ubiquemos el campo Nombre en esta página de demostración de formularios.

Cypress proporciona el selector junto con el comando para localizar el campo Nombre en la página: “cy.get('#name)“. De manera similar, podemos localizar los otros campos en la página.

Se ha creado un mapa de elementos web para todos los campos en la página, y en consecuencia, todas las propiedades del mapa webElements se utilizan en el método fillForm() para interactuar con todos los campos respectivos.

Los datos de prueba juegan un papel vital en la prueba de cualquier formulario. Estos datos deben generarse automáticamente para no tener que administrarlos cada vez que ejecutamos las pruebas. Teniendo esto en cuenta, la biblioteca @faker-js/faker genera datos de prueba.

Nombre de archivo: FormDemoPage.js

import { faker } from '@faker-js/faker';class FormDemoPage {  webElements = {    nameField: () => cy.get("#name"),    emailField: () => cy.get("#inputEmail4"),    passwordField: () => cy.get("#inputPassword4"),    companyField: () => cy.get("#company"),    websiteField: () => cy.get("#websitename"),    countryField: () => cy.get(":nth-child(3) > .pr-20 > .w-full"),    cityField: () => cy.get("#inputCity"),    addressLineOneField: () => cy.get("#inputAddress1"),    addressLineTwoField: () => cy.get("#inputAddress2"),    stateField: () => cy.get("#inputState"),    zipCodeField: () => cy.get("#inputZip"),    submitBtn: () => cy.get(".bg-lambda-900"),    successMessageText: () => cy.get(".success-msg"),  };  fillForm() {    this.webElements.nameField().type(faker.person.fullName());    this.webElements.emailField().type(faker.internet.email());    this.webElements.passwordField().type("Password@1234");    this.webElements.companyField().type(faker.company.name());    this.webElements.websiteField().type(faker.internet.domainName());    this.webElements.countryField().select("India");    this.webElements.cityField().type(faker.location.city());    this.webElements      .addressLineOneField()      .type(faker.location.streetAddress(false));    this.webElements.addressLineTwoField().type(faker.location.street());    this.webElements.stateField().type(faker.location.state());    this.webElements.zipCodeField().type(faker.location.zipCode());    this.webElements.submitBtn().click();  }  getSuccessMessageText() {    return this.webElements.successMessageText();  }}module.exports = new FormDemoPage();

Línea siguiente en la prueba después de llenar el formulario es realizar la aserción para verificar el texto del mensaje de éxito. Cypress proporciona la capacidad de realizar aserciones en línea mediante el uso del método should() y la coincidencia del texto.

El método getSuccessMessageText() es llamado desde la clase FormDemoPage. Este método devuelve el texto del mensaje en formato String.

Nombre de archivo: FormDemoPage.js

Esto marca la finalización de nuestra prueba.

Ahora vamos a discutir cómo ejecutar las pruebas en la cuadrícula en la nube de LambdaTest.

Ejecución de pruebas de automatización usando Cypress en la cuadrícula en la nube

Ejecutaremos las pruebas en la cuadrícula en la nube de LambdaTest utilizando la siguiente combinación de sistema operativo y navegador.

Sistema Operativo	Nombre del Navegador	Versión del Navegador
MacOS Ventura	Chrome	116 (Última)
Windows 10	Microsoft Edge	116 (Última)

Realizaremos la ejecución de la prueba en paralelo, ya que necesitamos ejecutar la misma prueba en dos navegadores diferentes, es decir, Chrome y Microsoft Edge. La ejecución en paralelo de las pruebas ayuda a ahorrar tiempo de ejecución porque todas las pruebas se realizan simultáneamente.

Para ejecutar las pruebas en paralelo, necesitamos actualizar el valor parallels en la sección run_settings en el archivo de configuración lambdatest-config.json para ejecutar las pruebas en paralelo.

Utilizaremos el paquete lambdatest-cypress-cli para ejecutar las pruebas en la cuadrícula en la nube de LambdaTest. Para ejecutar las pruebas, debemos ejecutar el siguiente comando desde la terminal:

lambdatest-cypress run --user=<"TU NOMBRE DE USUARIO DE LAMBDATEST"> --ak=< "TU CLAVE DE ACCESO DE LAMBDATEST">

El Nombre de Usuario y la Clave de Acceso de LambdaTest se pueden obtener iniciando sesión en el sitio web de LambdaTest y navegando a Perfil > Configuración de Cuenta > Contraseña y Seguridad.

Las pruebas ejecutadas en la cuadrícula en la nube de LambdaTest se pueden ver en el Panel de Control de LambdaTest. Proporciona una visibilidad completa de la ejecución de la prueba al brindar detalles granulares paso a paso de la ejecución de la prueba en LambdaTest Test Analytics. También se pueden ver detalles como grabaciones de video, registros de dispositivos, capturas de pantalla, etc.

Echa un vistazo a las capturas de pantalla a continuación, que te darán una idea clara del panel de control para pruebas de automatización web.

Los detalles de la compilación y las pruebas realizadas son visibles en las siguientes capturas de pantalla. Cada prueba incluye el nombre de la prueba, el nombre del navegador, la versión del navegador, el nombre del sistema operativo, la versión respectiva del sistema operativo y la resolución de la pantalla.

También tiene el video de la prueba que se ejecutó, lo que da una mejor idea de cómo se ejecutaron las pruebas en los navegadores.

Ejecutando la prueba de Cypress en la máquina local

El siguiente comando se puede utilizar para ejecutar las pruebas de Cypress en el navegador Chrome en la máquina local.

npx cypress run --browser=chrome

De forma predeterminada, todas las pruebas locales se ejecutan en modo headless. Después de la ejecución, tenemos una salida de video en la carpeta de videos. También podemos ver la ruta del archivo de video que se muestra en la consola.

De manera similar, para ejecutar las pruebas en el navegador Microsoft Edge, se puede utilizar el siguiente comando:

npx cypress run --browser=edge

También podemos agregar el comando de ejecución de la prueba en la sección “scripts” en el archivo package.json. De esta manera, podemos ejecutar un comando abreviado para ejecutar las pruebas y no tenemos que recordar los comandos largos para ejecutar las pruebas.

Una vez que se actualizan los comandos en la sección “scripts”, en lugar de ejecutar el comando

npx cypress run --browser=chrome podemos ejecutar el comando npm run cypress:chrome para ejecutar las pruebas en el navegador Chrome.

De manera similar, ahora se puede utilizar el comando npm run cypress:edge para ejecutar las pruebas en el navegador Microsoft Edge.

Conclusión

Cypress es un marco de automatización web popular que permite automatizar pruebas de navegador web ejecutando pruebas unitarias, de integración, de componentes y de extremo a extremo.

Al integrar Cypress con plataformas de prueba en la nube como LambdaTest, puedes ejecutar pruebas de automatización web a gran escala en diferentes plataformas, navegadores y sus respectivas versiones sin preocuparte por la instalación del sistema operativo y el navegador, ya que toda la infraestructura se proporciona a pedido.

Después de que la ejecución de las pruebas se haya completado con éxito, se pueden ver detalles detallados de las pruebas que pueden ayudar con la generación de informes para los equipos de software y los interesados.