Mejora tus pruebas web con nuestro tutorial del framework Cypress

 

¿Qué es Cypress?

En nuestro entorno DevOps y la era de la nube, en la que las aplicaciones web están en continuo desarrollo y despliegue continuo En el contexto actual de la automatización de procesos, existe una creciente necesidad de innovación en los frameworks de automatización de pruebas. Cypress es un framework de automatización de pruebas de extremo a extremo que se adapta a los entornos de aplicaciones web modernas. Es un framework de JavaScript que se ejecuta en Node.js. Con Cypress, puedes escribir y ejecutar pruebas de integración, unitarias y de extremo a extremo de forma rápida y sencilla.

Cypress incluye un ejecutor de pruebas de código abierto, fácil de configurar y usar. Con él, puedes escribir y ejecutar pruebas localmente a diario. Una vez que los conjuntos de pruebas estén listos, puedes integrarlo con la herramienta de integración continua (CI) y registrar las pruebas mediante el panel de control. El ejecutor de pruebas te permite supervisar la ejecución de los comandos. No es necesario instalar servidores, dependencias ni controladores. Cypress es ideal para desarrolladores y las pruebas son fáciles de comprender.

Al tomar instantáneas de las pruebas, Cypress te permite saber qué sucede en cada paso. Cuando una prueba falla, puedes depurarla directamente con herramientas como Chrome DevTools. A medida que realizas cambios en la prueba, Cypress la recarga automáticamente. No hay problemas de asincronía.

¿En qué se diferencia Cypress de Selenium?

Dado que Selenium es el framework de automatización de pruebas más popular en el ámbito del código abierto, Cypress se compara frecuentemente con él. Sin embargo, ambas herramientas difieren fundamentalmente en arquitectura y funcionalidad. Mientras que las pruebas de Selenium se ejecutan fuera del navegador y lo controlan mediante el protocolo JWP, Cypress se ejecuta en el mismo bucle de la aplicación web. Por lo tanto, tiene acceso nativo a todos los objetos de la aplicación.

Debido a la naturaleza de la diferencia arquitectónica, Selenium es más adecuado para pruebas de extremo a extremo, mientras que Cypress es más rápido y, en algunos casos, más fiable.

Instalación de Cypress

Instalar Cypress es bastante sencillo. El framework ofrece dos opciones para instalar Cypress.

1. Herramienta de línea de comandos
2. Aplicación de escritorio

Paso 1: Instalar Node.js y el administrador de paquetes de Node (npm)

Cypress es un framework de JavaScript que se ejecuta en Node.js. Por lo tanto, primero debes instalar Node.js antes de instalar Cypress. La versión LTS actual es la 12.8.1. Ahora, npm también viene incluido con Node.js, así que no tienes que instalarlo por separado. La versión actual de npm es la 6.14.5. Puedes visitar el sitio web de Node.js y descargar la versión LTS aquí: https://nodejs.org/en/download/

Instala Node.js usando el archivo .msi

Acepte el contrato de licencia.

Selecciona la carpeta de node js y haz clic en siguiente.

En la configuración personalizada, elige las funciones que deseas instalar. Puedes hacer clic en Siguiente e instalar los elementos predeterminados.

Si quieres ejecutar módulos npm desde C/C++, necesitas instalar las herramientas para módulos nativos. De lo contrario, simplemente haz clic en Siguiente.

En la siguiente pantalla, haga clic en Instalar.

Completa el proceso de instalación.

Para comprobar si node.js y npm se han instalado correctamente, abre la línea de comandos y escribe los siguientes comandos:

• nodo –v
• npm –v

Paso 2: Crear una carpeta de proyecto

Para guardar todo el trabajo en una sola carpeta, cree una nueva carpeta y acceda a ella.

• mkdir experitestcypress
• cd experitestcypress

Paso 3: Cree un archivo package.json

Para crear un archivo package.json, escriba el siguiente comando en la línea de comandos.

• npm inicializar -y

Paso 4: Instalar Cypress usando npm

Navegue hasta la carpeta del proyecto y escriba el siguiente comando para instalar Cypress desde la CLI.

• npm install cypress --save-dev

Espere un par de minutos mientras se descargan e instalan los archivos binarios necesarios.

Paso 5: Abrir Cypress

Cypress ya está instalado correctamente. Para abrir Cypress Test Runner, escriba el siguiente comando en la línea de comandos.

• .node_modules.bincypress abierto

Cuando lo abras por primera vez, creará una carpeta de ejemplo con archivos de script de prueba.

Cypress ya está listo para su uso.

Crea tu primera prueba

Para ejecutar tu primera prueba, crea un archivo de prueba en la carpeta de integración creada por Cypress. En este caso, el archivo de prueba se llama experitest_sample.js.

• Toca experitestcypress/cypress/integration/experitest_sample.js

Como Windows no reconoce el comando táctil, cree el archivo .js manualmente en la carpeta de integración. Para ello, abra un archivo de texto y guárdelo con la extensión .js.

Al abrir el Test Runner, se mostrará el archivo experitest_sample.js que has creado.

Ejecutando la primera prueba

Para ejecutar la primera prueba, puedes usar cualquier IDE para editar el archivo experitest_sample.js. Para esta prueba, abre el archivo .js, agrega este sencillo código y guarda el archivo.

[javascript] describe('Primera prueba de Experience', () => { it('¡La primera prueba fue exitosa!', () => { expect(true).to.equal(true) }) }) [/javascript]

Ahora, haga clic en el archivo en el Ejecutor de pruebas y se abrirá el navegador y se ejecutará la prueba.

Aquí, el navegador Chrome está siendo controlado por un software de prueba automatizado.

Ahora abre el archivo experitest_sample.js y cambia 'Primera prueba' por 'Segunda prueba'. Al guardar el archivo, el navegador se actualizará automáticamente y mostrará los nuevos resultados.

Aquí tienes otro ejemplo. Abre el archivo experitest_sample.js, escribe este código y guárdalo:

[javascript] describe('Sitio web de Experitest', () => { it('Abre el sitio web de Experitest', () => { cy.visit('https://experitest.com') }) }) [/javascript]

Al guardarlo, el Test Runner abrirá el sitio web de Experitest en el navegador.

Así pues, el ejecutor de pruebas funciona a la perfección. ¡Puedes escribir diferentes scripts de prueba y ejecutarlos!

Ejecuta tu prueba desde la línea de comandos.

Para ejecutar este script de prueba desde la línea de comandos, escriba el siguiente comando en el símbolo del sistema:

• npx cypress run --record --spec “cypress/integration/experitest_sample.js”

Tras ejecutar la prueba correctamente, la herramienta mostrará los resultados.

Instalación de la herramienta de escritorio Cypress

Para instalar la herramienta de escritorio, abra el sitio web de Cypress y descargue el software de escritorio de Cypress:

https://www.cypress.io/

Este es el enlace directo para descargar la herramienta de escritorio:

https://download.cypress.io/desktop

Tras descargar el archivo zip, descomprima el software y abra la aplicación Cypress.

Ahora, seleccione la carpeta de su proyecto y comience a usar el Ejecutor de pruebas.

Simplemente haga clic en el archivo JavaScript y la herramienta ejecutará la prueba.

Utilizando el framework Cypress para la automatización de pruebas

El framework de Cypress, que como hemos demostrado funciona de maravilla para la automatización de pruebas de extremo a extremo, es una excelente solución para probar aplicaciones web modernas. Al ser un framework de JavaScript que se ejecuta en Node.js, todas las pruebas se pueden escribir fácilmente. En este artículo, también analizamos el Test Runner. Vimos lo sencillo que es trabajar con él y cómo se pueden observar los comandos a medida que se ejecutan sin necesidad de instalar servidores, dependencias ni controladores. Por supuesto, si desea ver cómo funciona con nuestra plataforma SeeTest, puede consultar la documentación. Haz clic aquí y regístrate para una prueba gratuita de SeeTest. para que lo pruebes tú mismo. Visita también Digital.ai Continuous Testing Para obtener más información sobre cómo nuestro producto de pruebas puede beneficiar a su empresa.

Guy Arieli – Director de Tecnología