En este tutorial, analizaremos el marco de automatización de Cypress en detalle. Cubriremos qué es Cypress, en qué se diferencia de otros marcos de prueba, la arquitectura de Cypress y el procedimiento de instalación en este artículo. Cypress es un tema emocionante y también es divertido de aprender. ¡Vamos a empezar!

Marco de automatización de Cypress

Cypress Automation Framework es una herramienta de prueba pura basada en Javascript que se centra principalmente en las pruebas de front-end en aplicaciones web modernas. Con Cypress, las aplicaciones son fáciles de probar con la interfaz visual para presenciar la ejecución de la prueba. Por lo tanto, Cypress es una bendición tanto para los desarrolladores como para los ingenieros de control de calidad al facilitar la escritura de scripts y la ejecución de pruebas. Además, viene con un corredor de pruebas distintivo, que facilita la manipulación del DOM y se ejecuta directamente en el navegador.

Tabla de Contenido

¿Qué es Cypress?

Cypress es más rápido, mejor y proporciona pruebas definitivas que se ejecutan en un navegador. Cypress se compara principalmente con Selenium, pero es completamente diferente. Cypress no se ejecuta sobre Selenium, lo que significa que es completamente independiente. En cambio, Cypress se ejecuta sobre Mocha, que nuevamente es un marco de prueba rico en Javascript. Es compatible solo con la biblioteca de afirmaciones Chai, que puede acceder a una amplia gama de afirmaciones BDD y TDD.

Cypress se centra principalmente en tres tipos diferentes de pruebas. Son pruebas de extremo a extremo, pruebas unitarias y pruebas de integración. Cypress puede ejecutar cualquier prueba que se pueda ejecutar en un navegador. Además, viene con diferentes capacidades de simulación y validaciones que están cautivadas por las pruebas de front-end.

Los navegadores compatibles con Cypress son Chrome, Firefox, Edge, Electron y Brave. Además, las pruebas en varios navegadores se pueden realizar fácilmente con Cypress. Finalmente, aunque Cypress solo admite Javascript, también se puede escribir con Typecript, principalmente escrito con Javascript.

Automatización Cypress

Cypress es una herramienta de código abierto con un corredor de prueba gratuito, pero tiene un rango de precios para equipos y empresas donde le cobran por el Tablero. Sin embargo, Dashboard es gratuito hasta cierto punto, a menos que tenga funciones adicionales como detección de Flake, soporte por correo electrónico, integración de Jira y muchas más.

Cypress se utiliza principalmente para automatizar scripts en la web (puede automatizar cualquier cosa que se ejecute en un navegador). Nunca se puede ejecutar en aplicaciones móviles nativas, pero puede automatizar algunas de las funcionalidades de las aplicaciones móviles si se desarrollan en un navegador.

Caracteristicas

Hay muchas funciones increíbles disponibles en Cypress que se destacan de cualquier otra herramienta de automatización. Aquí, analicemos algunas de las características principales, ¡y nos presentaremos otras partes más adelante una vez que comencemos a escribir nuestros casos de prueba!

1. Espera automática - Cypress tiene la ventaja de esperar automáticamente. Nunca necesitaremos agregar esperas forzadas y durmientes para esperar a que el DOM recupere el elemento. Cypress espera automáticamente cualquier interacción con los elementos y la ejecución de afirmaciones. ¡Por lo tanto, las pruebas son rápidas!
2. Viaje en el tiempo - Cypress captura capturas de pantalla durante la ejecución de la prueba. Podemos ver los resultados visualmente en tiempo real simplemente colocando el cursor sobre los comandos ejecutados en el Panel de control. De esta forma, las pruebas son más fáciles de depurar.
3. Pruebas de depuración - Cypress puede depurar pruebas de herramientas populares como herramientas de desarrollo. Los errores son legibles y las pilas se pueden rastrear fácilmente.
4. Solicitudes de stub - Cypress tiene opciones para confirmar y controlar los comportamientos de las funciones, las respuestas de la red o los temporizadores utilizados por los stubs y los espías.
5. Integración continua - Cypress no depende de ningún otro servicio de CI adicional. Sin embargo, al ejecutar el comando para la prueba, la integración es fácilmente accesible.

Mito sobre Cypress

Existe el mito de que Cypress solo puede ejecutarse en aplicaciones web compatibles con Javascript. Sin embargo, Cypress puede probar cualquier aplicación web construida con Django, Ruby on Rails, Laravel, etc. Además, Cypress admite cualquiera de los lenguajes de programación como PHP, Python, Ruby, C #, etc. Sin embargo, escribimos nuestras pruebas en Javascript ; más allá de eso, Cypress funciona en cualquier aplicación.

Componentes de Cypress

Hay dos componentes principales en Cypress. Ellos son Corredor de prueba y Panel De Control.

Corredor de prueba - Cypress proporciona este corredor de prueba único, donde el usuario puede ver los comandos durante la ejecución y la aplicación bajo prueba.

Hay algunos subcomponentes en Test runner. Ellos son

1. Registro de comandos - Ésta es una representación visual del conjunto de pruebas. Puede ver los comandos ejecutados en la prueba, los detalles de la aserción y los bloques de prueba.
2. Menú de estado de prueba - Este menú muestra el número de casos de prueba que pasaron o fallaron y el tiempo necesario para su ejecución.
3. Vista previa de URL - Esto le brinda información sobre la URL que está probando para realizar un seguimiento de todas las rutas de URL.
4. Tamaño de la ventana gráfica - Puede configurar el tamaño de la ventana gráfica de la aplicación para probar diferentes diseños receptivos
5. Vista previa de la aplicación - Esta sección muestra los comandos que se ejecutan en tiempo real. Aquí puede usar Devtools para depurar o inspeccionar cada base.

Tablero o Dashboard: Cypress Dashboard ofrece la posibilidad de acceder a las pruebas que se están registrando. Con el servicio Dashboard, podemos presenciar la cantidad de pruebas aprobadas, fallidas o omitidas. Además, podemos ver instantáneas de las pruebas fallidas usando cy. comando screenshot (). También puede presenciar el video de toda la prueba o el clip de las pruebas fallidas.

Arquitectura de ciprés

La mayoría de las herramientas de prueba se ejecutan en el servidor fuera del navegador y ejecutan comandos a través de la red. Pero Cypress se ejecuta en el navegador donde también se ejecuta la aplicación. De esta manera, puede acceder a todos los elementos DOM y todo lo que se encuentra dentro del Navegador.

El servidor de nodo se ejecuta detrás de Cypress en el lado del cliente. Así, el servidor de nodo y Cypress interactúan entre sí, se acompañan y realizan tareas de apoyo a la ejecución. Dado que tiene acceso tanto al front-end como al back-end, la capacidad de respuesta a la aplicación en tiempo real durante la ejecución está bien lograda y también puede realizar tareas que incluso se ejecutan fuera del navegador.

Cypress también interactúa con la capa de red y captura comandos leyendo y cambiando el tráfico web. Finalmente, Cypress envía solicitudes y respuestas HTTP desde el servidor del nodo al navegador. Dado que Cypress opera en la capa de red, ayuda a modificar el código que podría interferir con la automatización del navegador web. La comunicación entre el servidor Node y el navegador se realiza a través de WebSocket, que comienza a ejecutarse una vez que se inicia el proxy.

Cypress controla todos los comandos que se ejecutan dentro y fuera de los navegadores. Dado que está instalado en una máquina local, interactúa directamente con el sistema operativo para grabar videos, capturar instantáneas, acceder a la capa de red y realizar operaciones del sistema de archivos con facilidad. Cypress puede acceder a todo, desde DOM, objetos de ventana, almacenamiento local, capa de red y DevTools.

Instalar Cypress

Esta sección discutirá el proceso de instalación que debe seguirse antes de escribir nuestros casos de prueba. Hay dos formas diferentes de descargar Cypress. Ellos son

1. Instalar a través de npm
2. Descarga directa

Antes de instalar Cypress, es posible que necesitemos algunos requisitos previos para comenzar a instalar a través de npm. Veámoslos en detalle.

Pre-requisitos

Requeriremos ciertos requisitos previos antes de escribir nuestros casos de prueba.

• Como se mencionó anteriormente, Cypress se ejecuta en un servidor de nodo; por lo tanto tendremos que instalar Node.js.
• Además, para escribir nuestros casos de prueba, necesitamos un editor de código o IDE.

En este ejemplo, usaremos Visual Studio Code. Así que profundicemos en los detalles.

Instalación de Node.js en Mac

Aquí, discutiremos los pasos para descargar Node.js en Mac. Navegar a https://nodejs.org/en/download/. Ahora aterrizará en la página de descarga.

1.Haga clic en el instalador de macOS. Al hacer clic, puede encontrar un archivo de paquete descargado a continuación. Haga clic en el archivo pkg para instalar Node.js

2. Una vez que haga clic en el archivo .pkg, se abrirá el instalador de Node. La sección de introducción le brinda las versiones de Node.js y npm. Haga clic en Continuar

3. Haga clic en el botón Aceptar y luego en Continuar. Aparecerá una ventana emergente para permitir el acceso a sus archivos en la carpeta de descargas. Haga clic en Aceptar.

4. En esta sección, puede seleccionar el destino al que se debe descargar Node.js. Nuevamente, puede elegir de acuerdo con el espacio de su sistema. Aquí elijo la ubicación predeterminada.

5. Haga clic en el botón Instalar. Una vez que haga clic, aparecerá una ventana emergente que le preguntará la contraseña de su sistema. Ingrese su contraseña y haga clic en Instalar software.

6. ¡Viva! Hemos instalado Node.js y el paquete npm. Haga clic en Cerrar para finalizar la instalación.

Instalación de código de Visual Studio en Mac

Hemos instalado correctamente Node.js. Ahora instalemos nuestro editor de código Visual Studio Code. El código VS es una herramienta poderosa que tiene todas las funcionalidades integradas de Javascript. Así que profundicemos en los pasos de instalación de Visual Studio Code.

Aquí discutiremos los pasos para descargar el código VS en Mac. Primero, navega a https://code.visualstudio.com/download para aterrizar en la página de descarga del código VS.

1. Haga clic en el icono de Mac. Puede ver un paquete que se descarga a continuación.

2. Haga clic en el archivo descargado para descomprimir el paquete. Una vez descomprimido, puede encontrar el código de Visual Studio en sus Descargas en Finder.

3. ¡Viva! Hemos descargado nuestro editor de código. Haga clic en el icono para abrir Visual Studio Code.

Creación de un nuevo proyecto Cypress

Ahora veremos cómo crear un nuevo proyecto de nodo en nuestro código de Visual Studio. Una vez que haga clic en el icono del código VS, llegará a la página de bienvenida. A continuación, haga clic en la carpeta Agregar espacio de trabajo para crear una nueva carpeta.

Una vez que haga clic en la carpeta, aparecerá una ventana emergente que le pedirá que agregue una nueva carpeta. Ahora haga clic en la ubicación donde desea agregar el espacio de trabajo. A continuación, haga clic en Nueva carpeta y agregue el nombre de la carpeta como CypressProject y haga clic en Abrir.

Ahora hemos creado una carpeta para nuestra prueba de Cypress. Antes de comenzar a escribir nuestras pruebas, debemos instalar el archivo package.json. Antes de la instalación, comprendamos qué es el archivo package.json.

¿Cuál es el archivo Package.json?

Package.json comprende todos los paquetes npm en un archivo, generalmente ubicado en la raíz del proyecto. Normalmente se encuentra en el directorio raíz del proyecto Node.js. Este archivo contiene todos los metadatos aplicables necesarios para el proyecto. Proporciona toda la información a npm y ayuda a identificar el proyecto y manejar las dependencias. El archivo Package.json contiene información como el nombre del proyecto, las versiones, la licencia, las dependencias y muchos más.
Ahora hemos entendido qué es el archivo package.json. Entonces, comencemos los pasos para descargar el archivo en nuestro código de Visual Studio.

1. Para ejecutar nuestros comandos, necesitamos abrir la Terminal. En la parte superior del código VS, haga clic en el terminal. Una vez que se abra el menú desplegable, haga clic en Nueva terminal.

2. Una vez que se abra la terminal, escriba el siguiente comando en el directorio del proyecto y presione Entrar.

npm init

3. Una vez que presione Entrar, puede ver cierta información que se muestra. Puede escribir los detalles requeridos en la Terminal y presionar Enter para obtener todos los campos.

• Nombre del paquete: Puede proporcionar cualquier nombre a su paquete. Lo dejé en blanco, ya que está precargado con el nombre de la carpeta que creamos.
• Versión: Esto da la información de la versión de npm. Puede omitir esto y presionar Enter.
• Descripción: Aquí puede proporcionar información adicional al paquete. Si es necesario, puede escribir la descripción y presionar Enter nuevamente.
• Punto de entrada: Esto representa el punto de entrada de la aplicación. Dado que está precargado con index.js, podemos omitir este campo y presionar Enter.
• Comando de prueba: Comando que se da para ejecutar la prueba. Aquí no es necesario dar ningún comando, pero si es necesario, definitivamente puede proporcionar cualquier comando.
• Repositorio de Git: Este campo requiere la ruta al repositorio de git. También puede dejar este campo en blanco.
• Palabras clave: Palabras clave únicas para ayudar a identificar el proyecto. También puede omitir este campo.
• Autor: Suele ser el nombre de usuario de la persona. Puede agregar su nombre y presionar Enter.
• Licencia: La licencia se completa previamente con ISC. Puede continuar presionando Enter.

• 4. Una vez que presione Entrar, la Terminal le pedirá confirmación enumerando todos los detalles que proporcionó. Escribe Sí y presione Enter nuevamente.

Ahora hemos generado un archivo package.json. Puede ver el archivo en su editor de código con la información que le proporcionamos.

Pasos de instalación de Cypress

Hemos instalado todos los requisitos previos para nuestra descarga de Cypress, nodo y npm inicializado. Como se mencionó anteriormente, hay dos formas de descargar Cypress.

Descarga Cypress a través de npm

Tendrá que pasar el comando mencionado a continuación en la Terminal para instalar Cypress. Además, deberá dar el comando en el directorio del proyecto para instalar el nodo y generar el archivo package.json.

npm install cypress --save-dev

Una vez que pase el comando, descargará todas las dependencias relevantes requeridas para el proyecto. En el momento de redactar este artículo, la última versión de Cypress está 7.7.0. La versión puede diferir en el momento de la descarga.

Con referencia a la imagen de arriba, puede ver que hemos descargado Cypress. Puede verificar mediante la representación descargada en Terminal y la adición de devDependencies en el archivo package.json.

Descarga directa

Podemos descargar Cypress directamente desde su CDN si no está utilizando el paquete Node o npm en el proyecto. Sin embargo, no es posible grabar las pruebas en el Panel de control mediante descarga directa.

Puede descargar haciendo clic en descargar Cypress directamente desde este liga. Esto ahora descargará directamente el paquete. Una vez descargado el paquete, abra el archivo zip y haga doble clic. Cypress se ejecutará sin necesidad de instalar dependencias. Esta descarga siempre recogerá la última versión basada y la plataforma se detectará automáticamente. Sin embargo, se recomienda descargar Cypress a través de npm en lugar de una descarga directa.

Para obtener más publicaciones sobre tecnología, visite nuestro Página de tecnología.

Aishwarya Lakshmi

Hola... Soy Aishwarya Lakshmi, completé mi B.Tech y tengo casi más de 2 años de experiencia en el ámbito de las pruebas. Soy un entusiasta de las pruebas y un apasionado de las pruebas y me encanta explorar cosas nuevas en mi campo y compartirlas con mis compañeros. Disfruto escribiendo blogs durante mi tiempo libre de la forma más sencilla pero eficaz. Como tester, me gusta tener las cosas a la perfección, por eso deseo que mis lectores comprendan perfectamente la tecnología. Me mantengo actualizado con las nuevas tecnologías relacionadas con las pruebas y dedico tiempo a comprenderlas. Me complace ayudar a los estudiantes a comprender los conceptos de las pruebas.