Ganando confianza con pruebas Cypress

Rate this content
Bookmark

¿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.

23 min
25 Oct, 2021

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.

Available in English

1. Introducción a las pruebas de Cypress

Short description:

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

Short description:

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.

Así que ahí está mi reclamo a la fama, mi codiciada taza de .NET Rocks. Vamos a adentrarnos en cómo ganar confianza con Cypress Tess. Ahora, no estoy muy seguro de cómo va a ir esta charla, así que voy a iniciar esto y veamos si mi sitio está listo. Ahora, nuestro primer paso es hacer una compilación de TypeScript. Así que vamos a iniciar eso. Una vez que tengamos nuestra compilación de TypeScript, luego comenzaremos a ejecutar cada una de nuestras pruebas. Hasta ahora parece bien. Está funcionando bastante bien. Sí. Parece que esta prueba va a funcionar bastante bien. Sí, mi sitio está funcionando bien. Eso es genial. Eso es increíble. Parece que mi sitio funcionará y esta charla saldrá muy bien. Vimos pruebas funcionales basadas en el navegador en Cypress. Eso fue bastante genial. O dicho de otra manera, vimos pruebas de extremo a extremo. Cypress es ese mecanismo para ejecutar experiencias de manera similar a como lo haría un usuario. Es una aplicación de electron y un complemento del navegador. Y está construido sobre Mocha y Chai. Como muchas buenas historias, comenzamos en el medio. Retrocedamos y comencemos desde el principio. Hablemos sobre las pruebas de navegador. Mientras hago pruebas de navegador, probablemente crearé pruebas en cada una de estas categorías. Puede que tenga pruebas relacionadas con una unidad de trabajo específica, un servicio empresarial específico. O puedo probar una API. Tal vez sea GraphQL o GRPC o REST. Puedo probar este servicio. Ahora, no es un servicio web, sino un servicio empresarial, y puedo querer probar ese servicio ejecutándose en un navegador específico. Puedo querer probar componentes donde todavía estoy haciendo pruebas unitarias, por lo que puedo estar simulando componentes hijos, y para cada uno de estos, puedo usar diferentes herramientas. Si quiero probar una pequeña unidad de trabajo,

3. Validando Pruebas y Opciones de Extremo a Extremo

Short description:

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.

Si quisiera validar esas pruebas, usaría mocha, Chai, Jest o Jasmine. Si quisiera validar esas pruebas, usaría Karma. Karma no realiza pruebas de extremo a extremo, sino que ejecuta pruebas unitarias dentro de un navegador. Si quiero validar un componente en particular, podría tomar mis pruebas de mocha o Jest y también incluir la biblioteca de utilidades de prueba. Hay una versión de utilidades de prueba para cada framework spa.

Si quiero probar mi API, no necesito un navegador en absoluto. Solo puedo enviar solicitudes web a ella. Verificar el código de estado en el cuerpo de la respuesta. Si quisiera hacer pruebas de extremo a extremo, podría usar Selenium, Cypress, Test Cafe o PlayWrite. A medida que obtienes estas diapositivas de robridge.org, puedes hacer clic en cada uno de estos enlaces azules para obtener más información sobre esa biblioteca en particular. Vamos a profundizar en las pruebas de extremo a extremo. Podría usar Selenium. Selenium es un controlador web y puedes programarlo en muchos lenguajes diferentes. Selenium es conocido por realizar pruebas frágiles y quebradizas. No sabe nada del navegador. Simplemente controla el mouse y mira el HTML. Si la API aún no estaba lista, podría volver a ejecutar mis pruebas. Eso hace que mis pruebas sean frágiles. O podría extender el tiempo de espera. Eso hace que mis pruebas sean lentas. Selenium es conocido por pruebas lentas y quebradizas. En comparación, si uso Cypress, Cypress es un complemento del navegador. Puedo esperar a que el DOM esté listo o a que se complete esa llamada de API. Si son 10 milisegundos o un segundo, es cuando mis pruebas continuarán. Cypress, al estar profundamente integrado en el navegador, solo puedes escribir esas pruebas en JavaScript. Pero puedes tomar videos y capturas de pantalla en el camino, lo cual es perfecto. A continuación, Test Café. Si usas DevExpress para otro contenido, es posible que te sientas como en casa con Test Café. Con Test Café, no utiliza Mocha o Jest para su biblioteca de aserciones, por lo que se sentirá un poco extraño. También pasarás mucho tiempo manejando contenido entre el contexto de prueba y el contexto del navegador.

4. Explorando las Pruebas con Cypress

Short description:

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.

A continuación, Playwright. Playwright fue creado por los creadores de Puppeteer, por lo que si estás familiarizado con la automatización de Chrome con Puppeteer, te sentirás como en casa con Playwright. Sin embargo, la sintaxis de aserciones de Playwright se siente un poco añadida, por lo que es posible que no tengas mucho éxito allí, pero puedes usarlo en muchos lenguajes diferentes. En última instancia, la elección de qué framework de pruebas utilizar depende de ti, elige el que se ajuste a tus preferencias. Hoy vamos a echar un vistazo a Cypress. El primer paso que haré es instalar Cypress con NPM y ejecutar NPX Cypress open. Una vez que ejecute NPX Cypress open, se generará todo el contenido necesario para facilitar el inicio con Cypress. Ya lo he hecho aquí y podemos ver todas las pruebas generadas automáticamente. Por defecto, estará en JavaScript, pero he elegido hacer mis pruebas en TypeScript en su lugar. Ahora puedo elegir en qué navegador ejecutarlo y descubrirá todos los navegadores que tengo instalados en mi máquina. Viene con un navegador de electron, que es un navegador basado en Chromium. En este caso, está indicando que tengo una bandera específica de Chrome que Firefox no entiende. Eso está bien. Ahora puedo elegir ejecutar todas mis pruebas o seleccionar una prueba en particular. Así que vimos cómo lanzamos esta prueba y pudimos validar el contenido. Ahora notaremos que aquí está mi Chrome regular y aquí hay un nuevo Chrome. Se ha lanzado un nuevo perfil para asegurarse de que ninguno de mis complementos o formularios guardados interfieran con la ejecución de las pruebas. Ahora, es solo un navegador. Así que puedo hacer cosas interesantes. Puedo abrir otras pestañas del navegador y mis pruebas seguirán ejecutándose. No es necesario que me aleje de mi máquina cuando se ejecuten mis pruebas. Ahora, las pruebas ejecutarán cada paso en mi contenido y podrán validar que mis pruebas funcionen como se esperaba. Pero esto es solo un navegador. Así que si abro las herramientas de desarrollo F12, puedo cambiar a la pestaña de fuentes y ver mis pruebas. Si quiero establecer un punto de interrupción en mi prueba, ahora puedo actualizar y comenzar a depurar mi prueba con las herramientas de depuración normales F10 y F11. También puedo cambiar a la pestaña de consola y ver la salida en la consola en cada paso. Aquí está la salida en la consola en este paso y en este paso. Y puedo ver esa salida en la consola para cada una de las pruebas. Al cerrar las herramientas de desarrollo F12, puedo ver el contenido en cada paso, pero también puedo ver, por ejemplo, dónde hizo clic.

5. Explorando el Proyecto y las Configuraciones de Cypress

Short description:

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

Short description:

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

Short description:

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.

interactuar con la página de una manera realmente elegante. A continuación, vamos a eliminar una tarea. Entonces, escribiré una tarea relevante. Escribiré esta nueva tarea. Luego, buscaré esa tarea y encontraré el botón de eliminar. Ahora, el botón de eliminar solo es visible si pasamos el mouse sobre él, y estamos utilizando eventos de JavaScript. No estamos utilizando eventos del DOM, por lo que no obtenemos ese CSS pasar el mouse. No hay movimiento del mouse en este caso. Así que voy a decir que force es true para poder hacer clic en él aunque no esté visible. Perfecto. Ahora solo debería quedar una tarea, porque una de ellas se marcó como terminada, y podemos ver que solo debería ser la irrelevante.

8. Creando una nueva tarea y probando interacciones en red

Short description:

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.

Vamos a crear una nueva tarea, no la que marqué como completada. Perfecto. Ahora, a medida que empiezo a escribir estas cosas, me estoy volviendo un poco redundante. Quiero mostrar solo las tareas activas, pero no quiero seguir haciendo esto una y otra vez. Creemos un nuevo comando llamado agregar tarea. Ahora, este comando agregar tarea, tomará mi cosa y podrá realizar esos pasos asociados con la creación de la nueva tarea.

Así que aquí en mis comandos, tengo un index.ts que simplemente importa esos comandos. Aquí están mis comandos. Y tengo este comando agregar tarea. Toma una cadena, escribe en el cuadro y estoy aquí. También puedo validar que ese cuadro ahora esté vacío. Perfecto. De vuelta en mi prueba, ahora puedo describir las interacciones del usuario. Quiero agregar tres nuevas tareas. Si alguna vez has usado el objeto de página de Selenium, esto te resultará familiar. Hagamos algo similar para completar. Así que tenemos una acción completa, que buscará la vista, hará clic en el interruptor y marcará eso como completado. Ahora estamos empezando a describir las interacciones de los usuarios, por lo que nuestra prueba es más concisa y descriptiva. Genial. Vamos a buscar el botón de tareas activas, haremos clic en él y validaremos que ahora solo se muestren dos, que estamos filtrando solo por tareas activas. Terminando esta prueba, haremos cosas similares usando nuestras nuevas acciones y buscaremos el botón de tareas completadas y validaremos que ahora solo se muestre la que hemos marcado como completada. Y haremos algo similar haciendo clic en el botón de borrar tareas completadas, validando que ya no tengamos ninguna. Esto fue genial para poder mejorar a través de las diversas funciones en Cypress.

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

Short description:

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.

Hacker News. 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. Ok, hagamos nuestra prueba de Hola Mundo. Eso funciona muy bien. Ahora, vamos a visitar el sitio de Hacker News para obtener detalles. Ahora, podríamos crear algunas historias falsas para poder validar que esa prueba sea como se espera, pero sería realmente desafortunado si solo usáramos datos falsos porque podríamos engañarnos fácilmente y no mostrar contenido de prueba real. Echemos un vistazo a eso. Veamos nuestra Hacker News PWA. En este caso, elegí la versión Angular 2, pero también podríamos ver la versión Next o la versión Nuxt. Comenzaré visitando esa página cada vez, y vamos a validar que la URL sea como se espera. Luego, queremos tener una historia principal específica. Ahora, no sé cuál es la historia principal en Hacker News, por lo que no hay forma de que pueda validar eso. Pero puedo interceptar esta solicitud web. En este caso, elegí una expresión regular, pero también podríamos usar una cadena aquí. Y cada vez que la aplicación realiza una solicitud a esto, voy a interceptarla y en su lugar devolveré este fixture. Aquí está este fixture, el Hacker News. Ahora sé que esta es la primera historia que será la primera historia en mi lista. Ahí está mi resultado esperado. Al visitar ese sitio de Hacker News, debería obtener ese título en mis resultados. Perfecto. Sería fácil engañarme y presumir que mi fixture es exactamente lo que la API devolverá. Y en este caso, vamos a realizar la solicitud web real, no la simularemos, para validar que mi API tenga la estructura esperada. Voy a asumir que Hacker News tiene 30 o más historias en él. Ahora, si esta solicitud de API fuera a tomar mucho tiempo, podría elegir darle un nombre específico y luego esperar específicamente con cy.wait. Pero en este caso, la API de Hacker News devuelve lo suficientemente rápido y no necesito hacerlo. Así que pudimos ver excelentes ejemplos de cómo construir pruebas en Cypress de varias formas. Y mejoramos a través de diferentes interacciones, desde solicitudes web hasta interactuar con la página, validar y seleccionar elementos DOM específicos, crear comandos para simplificar y ser más descriptivos en nuestras pruebas y, en última instancia, interceptar solicitudes web. Ahora, una de las cosas que queremos analizar son las mejores prácticas asociadas con Cypress. A medida que comenzamos a hacer nuestros selectores, definitivamente podríamos crear el selector CSS con una ruta completa que muestre todos los divs de cómo llegar de aquí a allá. Pero si refactorizáramos nuestra página, todo eso sería en vano. En su lugar, crea un selector específico que identifique un ID o una clase.

10. Mejores Prácticas para Pruebas con Cypress

Short description:

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

TestJS Summit 2021TestJS Summit 2021
33 min
Network Requests with Cypress
Top Content
Whether you're testing your UI or API, Cypress gives you all the tools needed to work with and manage network requests. This intermediate-level task demonstrates how to use the cy.request and cy.intercept commands to execute, spy on, and stub network requests while testing your application in the browser. Learn how the commands work as well as use cases for each, including best practices for testing and mocking your network requests.
TestJS Summit 2021TestJS Summit 2021
38 min
Testing Pyramid Makes Little Sense, What We Can Use Instead
Top Content
Featured Video
The testing pyramid - the canonical shape of tests that defined what types of tests we need to write to make sure the app works - is ... obsolete. In this presentation, Roman Sandler and Gleb Bahmutov argue what the testing shape works better for today's web applications.
TestJS Summit 2022TestJS Summit 2022
27 min
Full-Circle Testing With Cypress
Top Content
Cypress has taken the world by storm by brining an easy to use tool for end to end testing. It’s capabilities have proven to be be useful for creating stable tests for frontend applications. But end to end testing is just a small part of testing efforts. What about your API? What about your components? Well, in my talk I would like to show you how we can start with end-to-end tests, go deeper with component testing and then move up to testing our API, circ
TestJS Summit 2021TestJS Summit 2021
31 min
Test Effective Development
Top Content
Developers want to sleep tight knowing they didn't break production. Companies want to be efficient in order to meet their customer needs faster and to gain competitive advantage sooner. We ALL want to be cost effective... or shall I say... TEST EFFECTIVE!But how do we do that?Are the "unit" and "integration" terminology serves us right?Or is it time for a change? When should we use either strategy to maximize our "test effectiveness"?In this talk I'll show you a brand new way to think about cost effective testing with new strategies and new testing terms!It’s time to go DEEPER!
TestJS Summit 2023TestJS Summit 2023
21 min
Everyone Can Easily Write Tests
Let’s take a look at how Playwright can help you get your end to end tests written with tools like Codegen that generate tests on user interaction. Let’s explore UI mode for a better developer experience and then go over some tips to make sure you don’t have flakey tests. Then let’s talk about how to get your tests up and running on CI, debugging on CI and scaling using shards.

Workshops on related topic

React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
TestJS Summit 2022TestJS Summit 2022
146 min
How to Start With Cypress
Featured WorkshopFree
The web has evolved. Finally, testing has also. Cypress is a modern testing tool that answers the testing needs of modern web applications. It has been gaining a lot of traction in the last couple of years, gaining worldwide popularity. If you have been waiting to learn Cypress, wait no more! Filip Hric will guide you through the first steps on how to start using Cypress and set up a project on your own. The good news is, learning Cypress is incredibly easy. You'll write your first test in no time, and then you'll discover how to write a full end-to-end test for a modern web application. You'll learn the core concepts like retry-ability. Discover how to work and interact with your application and learn how to combine API and UI tests. Throughout this whole workshop, we will write code and do practical exercises. You will leave with a hands-on experience that you can translate to your own project.
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
TestJS Summit 2023TestJS Summit 2023
48 min
API Testing with Postman Workshop
WorkshopFree
In the ever-evolving landscape of software development, ensuring the reliability and functionality of APIs has become paramount. "API Testing with Postman" is a comprehensive workshop designed to equip participants with the knowledge and skills needed to excel in API testing using Postman, a powerful tool widely adopted by professionals in the field. This workshop delves into the fundamentals of API testing, progresses to advanced testing techniques, and explores automation, performance testing, and multi-protocol support, providing attendees with a holistic understanding of API testing with Postman.
1. Welcome to Postman- Explaining the Postman User Interface (UI)2. Workspace and Collections Collaboration- Understanding Workspaces and their role in collaboration- Exploring the concept of Collections for organizing and executing API requests3. Introduction to API Testing- Covering the basics of API testing and its significance4. Variable Management- Managing environment, global, and collection variables- Utilizing scripting snippets for dynamic data5. Building Testing Workflows- Creating effective testing workflows for comprehensive testing- Utilizing the Collection Runner for test execution- Introduction to Postbot for automated testing6. Advanced Testing- Contract Testing for ensuring API contracts- Using Mock Servers for effective testing- Maximizing productivity with Collection/Workspace templates- Integration Testing and Regression Testing strategies7. Automation with Postman- Leveraging the Postman CLI for automation- Scheduled Runs for regular testing- Integrating Postman into CI/CD pipelines8. Performance Testing- Demonstrating performance testing capabilities (showing the desktop client)- Synchronizing tests with VS Code for streamlined development9. Exploring Advanced Features - Working with Multiple Protocols: GraphQL, gRPC, and more
Join us for this workshop to unlock the full potential of Postman for API testing, streamline your testing processes, and enhance the quality and reliability of your software. Whether you're a beginner or an experienced tester, this workshop will equip you with the skills needed to excel in API testing with Postman.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
TestJS Summit 2023TestJS Summit 2023
148 min
Best Practices for Writing and Debugging Cypress Tests
Workshop
You probably know the story. You’ve created a couple of tests, and since you are using Cypress, you’ve done this pretty quickly. Seems like nothing is stopping you, but then – failed test. It wasn’t the app, wasn’t an error, the test was… flaky? Well yes. Test design is important no matter what tool you will use, Cypress included. The good news is that Cypress has a couple of tools behind its belt that can help you out. Join me on my workshop, where I’ll guide you away from the valley of anti-patterns into the fields of evergreen, stable tests. We’ll talk about common mistakes when writing your test as well as debug and unveil underlying problems. All with the goal of avoiding flakiness, and designing stable test.