¿Alguna vez has querido refactorizar sin piedad pero no quieres romper la frágil torre? ¿O has enviado a producción solo para pasar los siguientes días limpiando las regresiones? Necesitas pruebas de extremo a extremo, y Cypress es una excelente y rápida manera de construirlas. Con una interfaz simple de JavaScript o TypeScript, puedes automatizar los navegadores para probar esas funciones críticas en tu aplicación y demostrar que funciona como se espera, esta vez y siempre. Únete a nosotros para sumergirte en la construcción de pruebas Cypress y salir con la confianza para refactorizar a la grandeza.
Ganando confianza con pruebas Cypress
Video Summary and Transcription
Bienvenido a React Advanced London, donde aprenderemos sobre cómo ganar confianza con las pruebas Cypress. Exploraremos las pruebas de navegador, incluyendo pruebas para unidades de trabajo específicas, servicios empresariales, APIs y componentes utilizando diferentes herramientas. Cypress proporciona selectores para una fácil selección de objetos en las pruebas. Aprendimos cómo seleccionar objetos en nuestras pruebas y volver a ejecutarlas para verificar los éxitos y fracasos. También discutimos las mejores prácticas para las pruebas Cypress, incluyendo el uso de elementos data-cy, comandos, mocks y fixtures.
1. Introducción a las pruebas de Cypress
Bienvenidos a React Advanced London. Aprenderemos sobre cómo ganar confianza con las pruebas de Cypress. Publicaré las diapositivas en mi sitio web esta noche. Visita RobRich.org para obtener más información. Soy un defensor del desarrollo de SIRL, Microsoft MVP, capitán de Docker y amigo de RedGate. AZ Give Camp es un evento divertido donde construimos software gratuito para organizaciones benéficas. Únete a nosotros en el próximo AZ Give Camp o contáctame para organizar un campamento de regalos en tu área. He contribuido a Gulp y fui destacado en un episodio del podcast .NET Rocks.
Bienvenidos a React Advanced London. Soy Rob Richardson y vamos a aprender sobre cómo ganar confianza con las pruebas de Cypress. Aquí es donde les digo que definitivamente voy a publicar las diapositivas en mi sitio web esta noche. He sido esa persona persiguiendo al orador y nunca me ha funcionado muy bien a mí tampoco, por eso pueden ir a RobRich.org ahora mismo, hacer clic en Presentaciones aquí en la parte superior y aquí está cómo ganar confianza con las pruebas de Cypress. Las diapositivas y el código están disponibles en línea.
Mientras estamos aquí en RobRich.org, hagamos clic en Acerca de mí y veremos algunas de las cosas que he hecho recientemente. Soy un defensor del desarrollo de SIRL. Si tienes problemas para controlar tu data mesh, hablemos. También soy un Microsoft MVP, capitán de Docker, amigo de RedGate y AZ Give Camp es realmente divertido. AZ Give Camp reúne a desarrolladores voluntarios con organizaciones benéficas para construir software gratuito. Comenzamos el viernes después del trabajo. El domingo por la tarde, entregamos el software completo a las organizaciones benéficas. Dormir es opcional, se proporciona cafeína. Si estás en Phoenix, únete a nosotros en el próximo AZ Give Camp, o si quieres un campamento de regalos aquí en Londres, o donde sea que te estés conectando, contáctame por correo electrónico o Twitter y organicemos un campamento de regalos en tu vecindario también. Algunas de las otras cosas que he hecho. Fui un contribuyente principal de Gulp en la versión dos y tres, y respondí a un episodio del podcast .NET Rocks. Leyeron mi comentario en el aire y me enviaron una taza. ¡Woo-hoo!
2. Ganando confianza con las pruebas de Cypress Tess
Vamos a adentrarnos en cómo ganar confianza con las pruebas de Cypress Tess. Comenzaremos con una compilación de TypeScript y luego ejecutaremos nuestras pruebas. Cypress es una aplicación de electron y un complemento del navegador construido sobre Mocha y Chai. Exploraremos las pruebas de navegador, incluyendo pruebas para unidades de trabajo específicas, servicios empresariales, APIs y componentes utilizando diferentes herramientas.
3. Validando Pruebas y Opciones de Extremo a Extremo
Si quisiera validar pruebas, usaría Karma. Para la validación de componentes, incluya la biblioteca de utilidades de prueba. Para las pruebas de API, no se necesita un navegador. Para las pruebas de extremo a extremo, las opciones incluyen Selenium, Cypress, Test Cafe o Playwright. Selenium es conocido por pruebas frágiles y quebradizas. Cypress espera al DOM o a la llamada de la API. Test Café se siente familiar si usas DevExpress. Playwright es el siguiente.
4. Explorando las Pruebas con Cypress
Hoy vamos a echar un vistazo a Cypress. El primer paso es instalar Cypress y crear el contenido necesario. Por defecto, Cypress utiliza JavaScript, pero yo prefiero TypeScript. Puedo elegir el navegador en el que ejecutar las pruebas y descubrirá los navegadores instalados en mi máquina. Puedo ejecutar todas las pruebas o seleccionar las específicas. Cypress abre un nuevo perfil para asegurar una ejecución de pruebas limpia y puedo seguir utilizando mi máquina mientras las pruebas se ejecutan. Puedo depurar y ver la salida en la consola utilizando las herramientas de desarrollo F12. También puedo examinar el contenido y realizar acciones como hacer clic. Cypress proporciona selectores para una fácil selección de objetos en las pruebas.
5. Explorando el Proyecto y las Configuraciones de Cypress
Aprendimos cómo seleccionar objetos en nuestras pruebas y volver a ejecutarlas para verificar éxitos y fallos. También exploramos el contenido detrás del sitio To-Do MVC y la estructura del proyecto Cypress. Además, discutimos el uso de TypeScript para las pruebas y la configuración de Cypress para ejecutarse desde TypeScript. Por último, examinamos los atajos en el archivo package.json para iniciar el IDE y ejecutar compilaciones sin cabeza.
Hicimos clic justo aquí para poder realizar esa tarea. Ahora, puedo usar esta herramienta para poder seleccionar cosas. Volveremos a los selectores, pero aquí está el código exacto que necesito para poder seleccionar este objeto si lo pongo en mi prueba. También puedo elegir volver a ejecutar mis pruebas y ver éxitos y fallos. Ahora, eso es genial. Pudimos ver cómo funcionaba este IDE, y funcionó muy bien. Ahora, echemos un vistazo al contenido detrás de esto. Ahora, estábamos probando el sitio To-Do MVC. Ahora, está un poco desactualizado, pero tenemos ejemplos de MVC en varios frameworks y el proyecto To-Do MVC recopila estos para que podamos comenzar a comparar frameworks. Así que tengo mis pruebas, y abramos nuestro proyecto Cypress. Aquí está Cypress.json, y ese es el primer archivo que vamos a ver. Ahora, el trabajo de Cypress.json es dirigirnos a este archivo de complementos. En este caso, lo tengo en un proyecto TypeScript, así que iré a test/Cypress, complementos, y aquí está mi archivo plugins.index.html. Y esto definirá las carpetas para todo el resto del contenido en mi proyecto Cypress. Mis fixtures están aquí en la carpeta fixtures, mi carpeta de integración, ahí es donde están todas mis pruebas unitarias. Tengo capturas de pantalla y videos en la carpeta de resultados para asegurarme de que estén excluidos del control de código fuente. Y volveremos a los archivos de soporte que están aquí. A continuación, he elegido hacer mis pruebas en TypeScript. Este es el archivo de configuración base de TS en mi proyecto, y no tiene ningún detalle de TypeScript. Esto es solo la definición de TypeScript, la definición de compilación que tendría como parte de mi proyecto. Ahora, aquí dentro de la carpeta de pruebas de Cypress, también tengo un archivo de configuración de TS. Estas son las anulaciones específicas que necesito para poder iniciar Cypress desde TypeScript. Ten en cuenta que he extendido el archivo de configuración TypeScript anterior, por lo que solo necesito anular aquellas partes que son específicas de TypeScript. En mi archivo package.json, he elegido crear algunos atajos para poder hacer npx cypress open. Diré npm run cy:open, y eso iniciará el IDE. También puedo ejecutar cy:run desde mi compilación automatizada, y eso ejecutará la compilación sin cabeza. Puedo identificar navegadores específicos y luego concatenarlos. Entonces, si digo npm test, se ejecutará Chrome, Firefox y Edge, y validar que mis pruebas funcionen en los tres navegadores. Eso es perfecto. Así que echemos un vistazo a la prueba que escribimos para lograr esto.
6. Testing the To-Do MVC Project
Ahora estoy probando el proyecto To-Do MVC y alternando entre diferentes implementaciones. Valido la URL del sitio y verifico el contenido esperado. A continuación, examino la lista de tareas, interactúo con la página escribiendo en el cuadro de tareas y valido la nueva tarea. Luego, marco una tarea como completada y confirmo su estado. Ahora podemos interactuar con la página de manera elegante.
Ahora estoy probando el proyecto To-Do MVC y alternando entre diferentes implementaciones. En este caso, estoy viendo la versión de AngularJS. Obtengo los nombres de los sitios para poder ponerlos en mi bloque de descripción de una manera realmente elegante y, antes de cada prueba, visitaré ese sitio. Lo hago para validarlo y no tener que hacer esto CY.visit al comienzo de cada prueba, pero definitivamente podría hacerlo si quisiera. Ahora, hagamos una prueba de hola mundo, donde simplemente obtenemos la URL y debería ser igual a la URL del sitio. Esto fue realmente útil. Cuando originalmente escribí esta charla, este sitio era HTTP, no HTTPS, por lo que fue realmente útil darme cuenta de que no estaba probando lo que esperaba. Si refactorizas tu sitio web, podría ser bueno saber si este contenido es 301 o 302 a una nueva página que no estás probando lo que esperas. Ahora, a continuación, echemos un vistazo a la lista de tareas. No hemos ingresado ninguna tarea, por lo que esta lista de tareas no debería existir. Perfecto. Dependiendo de esta implementación de SPAT, podría existir pero estar en blanco, pero en última instancia, estamos buscando los elementos li dentro de la lista, por lo que podría ser una suposición segura. A continuación, subamos de nivel y comencemos a interactuar con la página. Tengo un contenido y quiero escribirlo en el cuadro de tareas. Entonces, seleccionemos el nuevo cuadro de tareas y escribamos ese contenido y presionemos enter. Observa que hay un signo de dólar aquí y no aquí. Este enter es para que podamos ingresar comandos únicos. Mayús, opción, control, teclas F, cualquier cosa que podamos escribir de esta manera. Una vez que haya terminado, obtendré la lista de tareas y validaré que contenga mi nueva tarea. Observa que no hay esperas aquí. Tan pronto como terminemos de escribir ese contenido, esperará a que todos los eventos del navegador terminen antes de que Cypress pase a la siguiente línea. Entonces, vamos a validar que nuestro cuadro de tareas ahora esté en blanco y ahora hemos agregado una tarea. ¡Eso es perfecto! Marquemos una tarea como completada. Comenzaré creando esta tarea irrelevante, porque quiero asegurarme de completar la correcta. Luego marcaré mi nueva tarea que quiero hacer y validaré que pueda llegar allí. Entonces, obtendré esa vista que coincide con esta nueva tarea y obtendré los hijos del botón de alternancia. Ahora, haré clic en ese botón de alternancia y eso marcará esa tarea como terminada. Entonces, ¿qué significa estar terminado? Bueno, debería tener esta clase de completado y lo validaré seleccionando ese elemento de la tarea. Perfecto. Ahora hemos podido comenzar a
7. Eliminando una tarea
Vamos a eliminar una tarea encontrando el botón de eliminar y haciendo clic en él, incluso si no está visible. Después de eliminarla, solo debería quedar una tarea.
8. Creando una nueva tarea y probando interacciones en red
Vamos a crear un nuevo comando llamado agregar tarea. Este comando podrá realizar los pasos asociados con la creación de una nueva tarea. En mi prueba, describo las interacciones del usuario y agrego tres nuevas tareas. También tengo una acción completa que marca una tarea como completada. Validamos el filtrado de tareas activas y tareas completadas. A continuación, discutimos las interacciones en red con la aplicación web progresiva de Hacker News, un sucesor espiritual de TodoMVC. Exploramos cómo validar el contenido y obtener historias reales de Hacker News.
A continuación, hablemos de las interacciones en red. Similar a TodoMVC, tenemos la aplicación web progresiva de Hacker News. Ahora, podemos decir que esta es una continuación espiritual de TodoMVC. Crea una PWA que muestra detalles de Hacker News. Ahora, es genial porque puedo hacerlo en diferentes frameworks, pero no sé qué historias habrá en Hacker News. ¿Cómo puedo validar que ese contenido sea correcto? Vamos a ejecutar esta prueba y ver cómo funciona. Aquí está mi prueba de Hacker News PWA. Y mientras realiza esa prueba, realmente obtendrá las historias reales de Hacker
9. Pruebas con Cypress y Mejores Prácticas
Ahí está nuestro JavaScript, nuestra compilación de TypeScript, y Cypress se da cuenta cuando hay cambios en cualquier archivo, por lo que reinició la prueba sabiendo que la compilación de TypeScript acaba de terminar. Vamos a visitar el sitio de Hacker News para obtener detalles. Podríamos crear algunas historias falsas para validar esa prueba, pero sería desafortunado si solo usáramos datos falsos. Veamos nuestra Hacker News PWA. Validaré la URL, interceptaré la solicitud web y devolveré el fixture. Realizaremos la solicitud web real para validar la estructura de la API. Hemos visto ejemplos de cómo construir pruebas en Cypress y hemos mejorado a través de diferentes interacciones. Ahora exploremos las mejores prácticas para los selectores.
10. Mejores Prácticas para Pruebas con Cypress
Crea un elemento data-cy para especificar el elemento deseado en las pruebas. Este mecanismo permite que las pruebas se ejecuten en producción y documenta la asociación entre las pruebas y el contenido. Utiliza comandos para simplificar los pasos de prueba y mejorar la legibilidad de las pruebas. Evita iniciar sesión en cada prueba obteniendo un token al inicio de todas las pruebas. Utiliza mocks y fixtures para separar los datos reutilizables del contenido de prueba, haciendo que las pruebas sean más concisas y facilitando su reutilización. Explora el código y conéctate conmigo en Twitter para obtener más información.
O incluso mejor, crea un elemento data-cy en tu elemento específico y luego especifica eso en tu prueba. cy.get data-cy es igual a ese elemento en particular. Ahora, la belleza aquí es que no solo obtienes exactamente el elemento que deseas cada vez, incluso si se mueve en la página, sino que también estás documentando que una prueba es responsable de este contenido en particular. Eso puede ser realmente útil. ¿Estás filtrando tu contenido de prueba en producción? Sí. Pero ¿no sería genial también ejecutar pruebas en producción? Tal vez cada hora o algo así, voy a iniciar mi página de inicio. Voy a acceder al catálogo de productos. Voy a agregar un artículo a mi carrito de compras. Voy a llegar a la página de pago. No ingresaré un número de tarjeta de crédito. No finalizaré la compra, pero ¿no sería genial si pudieras ejecutar esa prueba para todas las rutas más importantes en producción y saber si tu infraestructura falló antes de que tus clientes llamen? Eso sería ideal. Entonces, este mecanismo data-cy no solo facilita la documentación de que una prueba está asociada a él, sino que también te permite ejecutar pruebas en producción. A continuación, usemos comandos. Vimos cómo podíamos usar comandos para crear un mecanismo más simple para poder identificar los pasos en nuestras pruebas. Ahora el contenido de respaldo se puede reutilizar de formas interesantes y nuestras pruebas son mucho más concisas y descriptivas. A continuación, evita iniciar sesión en cada prueba. Definitivamente queremos validar la experiencia de inicio de sesión, pero solo queremos hacerlo una vez. En su lugar, al inicio de todas las pruebas, accede a una API y obtén un token que puedas usar para el resto de las pruebas. Tal vez esta sea una API solo para desarrollo o tal vez estés accediendo a la página del backend que la experiencia de inicio de sesión llamaría. Una vez que tengas ese token, úsalo en el resto de las pruebas. Quieres validar tu experiencia de inicio de sesión, pero no quieres hacerlo al inicio de cada prueba. Eso hará que tus pruebas sean más lentas. A continuación, usa mocks para poder... usar fixtures para poder mover datos reutilizables data fuera del contenido de prueba a un lugar más reutilizable. Esto hará que tus pruebas sean más concisas, más cortas y te permitirá reutilizarlas en diferentes pruebas. En este caso, teníamos un fixture que podíamos usar para simular los datos de Hacker News data. Esto es genial, podemos adjuntarlo a una solicitud web específica a través de CY.Intercept, y si algo sucede, ahora podemos comenzar a validar que nuestros controles se rendericen como se espera. Puedes hacer clic en el enlace azul aquí en las diapositivas que obtienes de rawbridge.org para acceder al código asociado para lograr eso. Ha sido divertido mostrarte Cypress y poder recorrer todas las diferentes partes. Puedes obtener este código en rawbridge.org y contactarme en Twitter en rob underscore rich. También puedes unirte a mí en ese lugar donde la conferencia está designada para preguntas y respuestas en vivo. Gracias por unirte a nosotros aquí en React Advanced London.