Las 7 principales funciones avanzadas de Cypress que debe conocer


ciprés es de lejos que crecimiento más rápido Marco de interfaz de usuario amigable para desarrolladores en varios navegadores para la automatización de pruebas. Es un proyecto de código abierto con licencia del MIT que cuenta con el respaldo de una comunidad sólida y una empresa comercial que ofrece servicios opcionales adicionales. Cypress se está desarrollando rápidamente para llenar algunas de las dolorosas lagunas en las pruebas entre navegadores.

Cypress está creciendo tan rápido por muchas razones.

Cypress está repleto de una serie de características que lo hacen posible Fácil de usar lo que es atractivo desarrollador y QA a quienes les gusta usar JavaScript o TypeScript. Desde las pruebas ejecutar en el navegador Un beneficio adicional de Cypress es el Velocidad de ejecución y Funciones de depuración. Mientras las pruebas se ejecutan en el navegador, Cypress también usa un servidor de nodo como proxy. El navegador y el proceso de Cypress Node están en constante comunicación para realizar tareas entre sí, como: B. burlarse de los requisitos de red de las pruebas y mucho más.

Cypress es compatible con la mayoría de los navegadores populares, como Chrome, Firefox y el nuevo navegador Microsoft Edge. El corredor de prueba es independiente del marco; Por lo tanto, puede funcionar con los dos principales marcos de desarrollo web, como Vue.JS, React, Angular, Elm, pero con la misma facilidad puede probar cualquier sitio.

Los equipos de desarrollo y prueba pueden integrar fácilmente sus conjuntos de pruebas Cypress en cualquier canal de CI / CD para ejecutar las pruebas de un extremo a otro como parte de sus ciclos nocturnos por solicitud de extracción u otro evento desencadenado.

Cypress es un corredor de pruebas con todas las funciones que crea informes de prueba y guarda videos y capturas de pantalla durante las pruebas. Esto permite a empresas como Cypress.io (los autores y mantenedores del ejecutor de pruebas de código abierto Cypress), Perfecto, AWS Amplify y Browserstack proporcionar servicios de control de calidad adicionales como: B. Ejecute pruebas a gran escala, guarde y muestre los resultados de las pruebas e integre con el proveedor de código fuente.

Si bien hemos enumerado las capacidades y los beneficios básicos de Cypress anteriormente, existe una variedad de capacidades avanzadas adicionales del marco que los equipos deben comprender para maximizar el valor de esta tecnología.

1. Las pruebas se ejecutan en la misma ventana del navegador que la propia aplicación.

Sé cuál es el problema, ¿verdad? Bueno, los corredores de pruebas unitarias más populares, como Jest y Mocha, ejecutan las pruebas en el terminal de nodo utilizando la emulación del navegador JavaScript y, por lo tanto, no pueden mostrar el comportamiento real del navegador. Los otros corredores de prueba de extremo a extremo como Selenium y WebDriver.io ejecutan la aplicación en el navegador, mientras que las pruebas se ejecutan en un proceso separado fuera del navegador y envían los comandos al navegador a través de un controlador. Al ejecutar las pruebas en el mismo ciclo de eventos que la propia aplicación, Cypress puede repetir sincrónicamente sus comandos de prueba mientras la aplicación espera la continuación. Si un botón se desactiva temporalmente mientras la aplicación extrae más datos, no es gran cosa. Cypress volverá a intentarlo automáticamente y le dará un giro al código de la aplicación. El botón se activa y la prueba hace clic en él. Los reintentos incorporados son una gran razón por la que los desarrolladores encuentran que las pruebas de Cypress son más confiables porque se eliminan algunas de las escamas de prueba (no todas las escamas, por supuesto).

La ejecución de pruebas en el navegador también le da al redactor de la prueba un superpoder: puede acceder a cualquier API del navegador directamente desde la prueba. Eche un vistazo a la captura de pantalla a continuación: esta es una prueba de Cypress para una página web que muestra el estado de la batería que obtiene la aplicación del objeto window.navigator.battery que proporciona el navegador.

La prueba «simplemente» captura el objeto del navegador que utilizará la aplicación, simula los valores deseados, luego carga la aplicación y confirma que devuelve los valores esperados.

Este es solo un ejemplo de lo que se puede detener durante la prueba. Hay muchos otros, al igual que hay muchas API de navegador y métodos de aplicación a los que es posible que debamos acceder durante las pruebas. Cypress contiene el sinon.js Biblioteca con su poderoso arsenal de stubs y espías que Cypress puede usar para expandir sus escenarios de automatización de pruebas existentes.

2. Pruebe el control de la red y las solicitudes periódicas de la red con Cypress

A medida que ejecuta las pruebas de E2E, puede confirmar que la aplicación realiza las llamadas de red esperadas. Cypress tiene todas las capacidades de espionaje y burla de la red, por lo que los desarrolladores pueden ejecutar el front-end incluso sin el back-end o con solo unas pocas llamadas stub. Las llamadas de red HTTP interceptadas u observadas se muestran en el registro de comandos y la prueba puede hacer afirmaciones en las llamadas para confirmar la solicitud y los datos de respuesta.

Con las funciones adicionales en cy.clock () Los equipos también pueden utilizar las API para revisar sus aplicaciones web estableciendo intervalos de tiempo. Recuerde crear una prueba que valide alguna funcionalidad en la web y luego agregue un temporizador para ejecutar esa prueba cada vez (por ejemplo, cada 30 segundos). Esto permite que las aplicaciones web se verifiquen con contenido dinámico y entradas o eventos de usuario basados ​​en el contexto, lo que cambia la salida en la aplicación pero continúa ejecutando las pruebas en milisegundos.

Por ejemplo, la prueba anterior confirma que la aplicación realiza una llamada de red cada 30 segundos para obtener la nueva lista de elementos del back-end. ¡Al controlar el reloj de la aplicación desde la prueba, podemos terminar toda la prueba en 300 ms!

Esta es la prueba Cypress, que utiliza un reloj sintético para acelerar la ejecución de la prueba y observar las llamadas de red con el comando cy.intercept.

3. Depurar con Cypress y la consola de comandos

Una de las características y beneficios más importantes para los desarrolladores que utilizan Cypress es su funcionalidad avanzada. Depurar Habilidades. Las pruebas de Cypress se ejecutan en el navegador, por lo que los desarrolladores pueden usar el poderoso navegador DevTools para observar los mensajes de la aplicación, encontrar información sobre el localizador de elementos, recorrer los seguimientos de la pila de errores y mucho más. Estas partes integrales del marco contribuyen a la estabilidad del código de prueba y a la rápida eliminación de pruebas de escamas y / o errores.

La imagen de arriba muestra cómo al hacer clic en un comando de prueba en el registro de comandos, se imprime información de depuración adicional en DevTools.

4. Ejecución de Cypress en servicios de integración continua

Cypress es una aplicación basada en Electron (al igual que las aplicaciones de escritorio VSCode y Spotify) que puede ejecutarse en cualquier sistema operativo: Mac, Linux y Windows. El desarrollador puede instalar Cypress con los comandos estándar “npm install –save-dev cypress” o “yarn add -D cypress”. Los mismos comandos de instalación y ejecución funcionan en la mayoría de los sistemas de CI listos para usar o cuando se usa una de las imágenes de Docker proporcionadas por Cypress.

La empresa no necesita plataformas o servicios de CI adicionales para ejecutar pruebas de un extremo a otro. Cypress se ejecuta en sus servicios de CI. Sin embargo, hay una gran ventaja: en cada plataforma, el comando «Cypress Run» guardará automáticamente el video de toda la prueba. El video contiene la ventana completa del navegador, que muestra los comandos de prueba en el registro de comandos y en la aplicación. Con el video, cualquiera puede depurar rápidamente una prueba que falla en CI.

Además del video de la ejecución de la prueba, Cypress guarda automáticamente la captura de pantalla de cada prueba fallida en el momento de la falla. Las capturas de pantalla proporcionan ayuda adicional para depurar los errores de CI.

Si bien todos los servicios de CI deberían funcionar con Cypress, existen varios servicios de CI que brindan una integración adicional más estrecha con Cypress Test Runner. CircleCI, GitHub Actions y Netlify Build tienen módulos específicos de Cypress administrados por el equipo de Cypress que permiten que la instalación, el almacenamiento en caché y la ejecución de Cypress en estos proveedores se configuren correctamente con una configuración mínima. Ver la presentación https://slides.com/bahmutov/ci-triple para detalles.

5. Pruebas en la nube para cobertura y escalabilidad multiplataforma

Con Cypress como una plataforma abierta y de código abierto, otros proveedores de la nube como Cypress.io y Perfecto pueden expandir la cobertura de la prueba y la velocidad de ejecución de la prueba. La forma en que funciona es a través de una nueva modernidad. SDK Esto empaqueta, carga y ejecuta las pruebas de cypress (JavaScript, TypeScript, Cucumber y JavaScript) en la nube a través de plataformas y geografías, según lo especificado por los desarrolladores en un archivo de configuración JSON. Entre las ventajas de la misma integración Este no solo es el alcance y la capacidad de maximizar las pruebas paralelas en un número infinito de navegadores, sino que también permite a los equipos mantenerse al día de forma independiente con las últimas versiones y beta de cada navegador a medida que llegan al mercado.

La imagen de arriba es una captura de pantalla de la plataforma Perfecto Cloud que ejecuta pruebas de Cypress para su sitio y guarda los artefactos de prueba para que el equipo acceda más tarde.

6. Pruebas visuales en navegadores con Cypress

Un aspecto adicional e importante a la hora de probar aplicaciones web, especialmente en la era de la digitalización, es la aparición de la aplicación en diferentes plataformas, tamaños de pantalla, resoluciones y tecnologías. Cypress puede realizar varias pruebas visuales basadas en capturas de pantalla y otras, pero también se puede integrar con herramientas como Applitools, Percy.io, Happo.io y otros para pruebas visuales de escala. Usando la tecnología ocular en Applitools SDK, los equipos pueden capturar varias capturas de pantalla del DOM de la aplicación web y compararlas con otras plataformas virtuales para identificar errores visuales y funcionales en la aplicación.

7. Expande el ciprés con complementos.

Hay tantas formas de aprovechar los complementos existentes que ya se han desarrollado, como la sintaxis de pepino, los paquetes acumulativos, las bibliotecas de cobertura de código y más, pero también crear nuevos complementos y contribuir al directorio en crecimiento a continuación. https://on.cypress.io/plugins.

El código anterior muestra cómo agregar el complemento de cobertura de código al proyecto Cypress. La mayoría de los complementos solo toman una línea de código y pueden cambiar el comportamiento de Cypress de manera significativa.

Mientras ejecuta las pruebas E2E con el complemento de cobertura de código instalado, Cypress mostrará pasos de prueba adicionales que ejecutará para guardar la información de cobertura de código y generar el informe de cobertura de código después de la ejecución de la prueba.

El resultado final

Es importante comprender que, como con cualquier tecnología, existen pocas limitaciones y Compromiso que los usuarios deben conocer. Algunos de estos son temporales, como el soporte del navegador Safari, otros son permanentes (soporte para la automatización de múltiples pestañas). El equipo de Cypress está lanzando activamente nuevas versiones con capacidades innovadoras. Actualmente el equipo está enfocado en un Prueba de unidad Característica que permite probar los componentes React y Vue de forma aislada. En lugar de renderizar componentes en una terminal, Cypress renderiza componentes en un navegador real. Debido a que los componentes que los usuarios están probando están visibles en el navegador, es más fácil probarlos y depurarlos cuando falla una prueba.

El futuro de Cypress es brillante y aporta mucha innovación, facilidad de uso y productividad a los usuarios finales. Si no ha estudiado ciprés antes, este es el lugar para ir. Una vez que haya comenzado a presentar Cypress, es un buen momento para explorar algunas de las habilidades avanzadas y geniales mencionadas anteriormente.

tecnologia1020

Sobre el autor

Añadir comentario

Tu dirección de correo electrónico no será publicada.