Cómo empezar con Cypress

Rate this content
Bookmark

La web ha evolucionado. Finalmente, también lo ha hecho el testing. Cypress es una herramienta de testing moderna que responde a las necesidades de testing de las aplicaciones web modernas. Ha ganado mucha popularidad en los últimos años, obteniendo reconocimiento a nivel mundial. Si has estado esperando aprender Cypress, ¡no esperes más! Filip Hric te guiará a través de los primeros pasos sobre cómo empezar a usar Cypress y configurar tu propio proyecto. La buena noticia es que aprender Cypress es increíblemente fácil. Escribirás tu primer test en poco tiempo y luego descubrirás cómo escribir un test de extremo a extremo completo para una aplicación web moderna. Aprenderás conceptos fundamentales como la capacidad de reintentar. Descubre cómo trabajar e interactuar con tu aplicación y aprende cómo combinar pruebas de API y de UI. A lo largo de todo este masterclass, escribiremos código y realizaremos ejercicios prácticos. Saldrás con una experiencia práctica que podrás aplicar a tu propio proyecto.

This workshop has been presented at TestJS Summit 2022, check out the latest edition of this JavaScript Conference.

FAQ

Cypress es una herramienta de automatización de pruebas utilizada para escribir y ejecutar pruebas de extremo a extremo en aplicaciones web. Permite combinar pruebas de interfaz de usuario y pruebas de API, observando solicitudes y simulando respuestas del servidor, lo que facilita verificar tanto la funcionalidad de la UI como las interacciones con la API.

El comando 'cy.intercept' permite a los usuarios observar y manejar dinámicamente las solicitudes HTTP realizadas por la aplicación durante las pruebas. Esto es útil para asegurar que la aplicación envía las solicitudes correctas, recibir respuestas simuladas del servidor, y verificar que las llamadas API se comporten como se espera sin necesidad de respuestas de un servidor real.

'cy.request' es utilizado para enviar solicitudes HTTP directamente desde las pruebas, similar a como funcionaría un cliente HTTP como Postman. En cambio, 'cy.intercept' se utiliza para interceptar y manipular las solicitudes HTTP hechas por la aplicación, lo que permite observar y alterar el tráfico de red sin modificar el comportamiento de la aplicación.

Para garantizar pruebas repetibles y confiables, es recomendable utilizar llamadas a la API para configurar el estado deseado antes de cada prueba en lugar de depender de la interfaz de usuario para configurar el estado. Esto minimiza la interacción con la UI y reduce el tiempo de ejecución de las pruebas, asegurando que cada test comience con las condiciones adecuadas.

Un complemento en Cypress es un paquete que extiende o añade nuevas funcionalidades a las pruebas. Los complementos pueden ser utilizados para añadir comandos personalizados, integrar herramientas externas, o modificar el comportamiento interno de Cypress. Esto permite a los usuarios adaptar Cypress a sus necesidades específicas y resolver problemas que pueden no ser directamente abordables con las funcionalidades predeterminadas.

Para manejar componentes que cargan dinámicamente, se puede utilizar el comando 'cy.wait' para esperar explícitamente a que se complete una acción específica, como una solicitud de API interceptada con 'cy.intercept'. Alternativamente, se pueden usar aserciones para verificar la visibilidad o la existencia de elementos, asegurando que las pruebas solo continúen cuando la UI esté en el estado adecuado.

Filip Hric
Filip Hric
146 min
21 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El masterclass está dirigido por Filip Nits, un líder de QA en Slido, que enseña a los testers sobre desarrollo web y a los desarrolladores sobre testing. El masterclass se centra en el uso de Cypress para pruebas de extremo a extremo de la aplicación Trello, abordando temas como la instalación, la escritura de pruebas, la automatización de la selección de tableros y elementos de Trello, el uso de plugins y la prueba de creación y eliminación de carritos. También explora conceptos como el encadenamiento de comandos, la escritura de aserciones con Chai, el envío de solicitudes HTTP, la interceptación de solicitudes y la combinación de pruebas de UI y API. El masterclass proporciona desafíos prácticos y anima a los participantes a programar junto con el instructor.
Available in English: How to Start With Cypress

1. Introducción al Masterclass

Short description:

Mi nombre es Filip y he sido líder de QA o líder de automatización de pruebas de QA en Slido durante casi 7 años. Hoy me gusta enseñar a los probadores sobre desarrollo web y enseñar a los desarrolladores sobre pruebas. Puedes encontrar todo lo que hago en mi página web, filibris.com, donde publico consejos sobre Cypress casi todas las semanas. Hago talleres, presentaciones, webinars y todo eso. Este es un enlace a mi página. Entonces, Filip Nits, ese es mi nombre, .com slash workshop, donde puedes encontrar la versión completa de lo que vamos a experimentar hoy. Si quieres experimentar todo, tengo un próximo taller que comienza la próxima semana. Si estás considerando hacerlo, contáctame en Discord con un mensaje directo. Te daré un código promocional.

Breve introducción. Mi nombre es Filip. He sido líder de QA o líder de automatización de pruebas de QA en Slido durante casi 7 años. Entonces, en realidad, esta diapositiva necesita una actualización. Y lo que hago allí principalmente es automatización de pruebas. Tengo formación en Psicología, lo cual supongo que va con la enseñanza, ¿quizás? No lo sé. Pero sí, ese es más o menos mi experiencia.

Hoy me gusta enseñar a los probadores sobre desarrollo web y enseñar a los desarrolladores sobre pruebas. Puedes encontrar todo lo que hago en mi página web, filibris.com, donde publico consejos sobre Cypress casi todas las semanas. Tuve un gran intervalo porque estaba haciendo muchos cursos nuevos. Y seguiré con eso. Pero sí, toda la página está dedicada básicamente a Cypress y brindar diferentes consejos. Entonces, si estás buscando algo, también puedes buscar allí. Y sí, hago talleres, presentaciones, webinars y todo eso. Creo que ya dije todo sobre mí. Este es un enlace a mi página. Entonces, Filip Nits, ese es mi nombre, .com slash workshop, donde puedes encontrar la versión completa de lo que vamos a experimentar hoy. Entonces, como dije, no todos estaban aquí. Esta es una versión de demostración más pequeña del taller, si quieres. Y si quieres experimentar todo, tengo un próximo taller que comienza la próxima semana. Entonces, si quieres inscribirte en eso y obtener la experiencia completa, puedes hacerlo. Y si estás considerando hacerlo, contáctame en Discord con un mensaje directo. Te daré un código promocional, porque no tiene mucho sentido hacer algunas partes dos veces. Entonces, para obtener algo de valor de eso, te enviaré un código promocional si estás interesado en tener la experiencia completa.

2. Formato y Resumen del Masterclass

Short description:

El masterclass consistirá en una descripción general del capítulo, una demostración y desafíos prácticos. Durante la demostración, se recomienda observar en lugar de codificar para no perder puntos importantes. La demostración estará disponible en los archivos de inicio y fin de la demo, con información adicional en la carpeta de notas. Los desafíos prácticos proporcionarán instrucciones en el archivo challenge.cy.js y soluciones en el archivo de solución del desafío. No es necesario completar todos los desafíos, ya que el objetivo es mantener a los participantes comprometidos incluso después del masterclass.

Entonces, el formato del masterclass será así. Por cierto, puedes escanear este código QR, porque lo usaremos. Pero el formato del masterclass es el siguiente. Haré una descripción general del capítulo, básicamente te diré lo que aprenderás en ese capítulo. Y luego pasaremos a una demostración. O más bien, yo haré la demostración, básicamente te mostraré cómo funciona todo. Y luego tendremos un desafío práctico. Así que estaré en silencio y tú harás el trabajo de codificación. Siéntete libre de hacerlo.

Y para las preguntas y respuestas, podemos hacerlo continuamente. De hecho, somos un grupo bastante pequeño. Solo tenemos como 15 participantes. Eso incluye a mí y a Alex, que también está en la llamada de Zoom, del equipo de TestJS. Así que creo que podemos desactivar el silencio de Mike y hacer una pregunta. Siéntete libre de hacerlo. Para obtener un valor adicional de esto. Pero también podemos usar Slido. Eso es de donde soy. Es una gran herramienta para tener interacción. Si eres tímido o sientes que tienes una pregunta estúpida, no la tienes. Pero si te sientes así, puedes usar Slido para preguntar de forma anónima. Y probablemente diré que no es una pregunta estúpida, es una gran pregunta. Y la responderé. Pero también tengo una pregunta para ti. Y por eso quería que escanearas ese código QR. Así que déjame entrar en eso. Y mi pregunta es ¿qué tanto conoces Cypress? Me gustaría saber en qué nivel te encuentras actualmente con tus conocimientos. Y una estrella significa que estás comenzando. No sabes mucho o no sabes nada. Y seis estrellas significaría que lo usas a diario, ya conoces cómo funciona y básicamente estás aquí para mejorar tus conocimientos. Tal vez encontrar algunos tips adicionales. Muy bien, estamos muy bien distribuidos aquí. Oh, tenemos 1 sexta estrella, eso es genial. Así que estamos distribuidos en ambos lados, principalmente en el medio. Oh, eso es bueno. Eso es bueno. Por cierto, no te preocupes si estás demasiado a la derecha o demasiado a la izquierda lado. Normalmente, cuando hago esto, creo salas de grupos para dividir esta reunión en grupos más pequeños. No estoy seguro si podremos hacer eso hoy, pero veremos. Veremos cómo lo manejamos. Tal vez nos quedemos en la misma sala. Muy bien. Muy bien. Así que obtuvimos una puntuación de 3.6. Tenemos algunos principiantes, algunas personas que están en el medio, algunos son más avanzados. Eso es increíble. Gracias. Gracias por responder esa pregunta. Eso realmente ayuda a darme una idea.

Permíteme continuar explicando cómo funcionará este masterclass. Ya dije un poco sobre esto, pero para la demostración, haré una breve presentación. Así que durante eso, no intentes codificar al mismo tiempo. De hecho, es mejor que no lo hagas porque tiendo a ir un poco rápido. Y si estás alternando entre codificar y observar, es posible que te pierdas algunos puntos. Así que es mejor que solo observes. Para que no te pierdas, puedes ver todo lo que hice en el archivo de fin de demostración y comenzar en el archivo de inicio de demostración. Así que eso es inicio de demostración, fin de demostración. En la carpeta del proyecto, tendrás el nombre del capítulo. Oops, eso no era subrayado, sino tachado. Así que tienes el nombre del capítulo en el que estaremos y siempre comenzaré desde el inicio de la demostración y el estado final estará en el final de la demostración. Así que obtendrás una idea de todo. Además, todo lo que planeo ver está dentro de la carpeta de notas, pero tiendo a improvisar así que no encontrarás todo, pero espero que encuentres la mayor parte de la información que necesitas.

Después de hacer la demostración, pasaré a los desafíos prácticos y nuevamente, te muestro aquí la estructura de carpetas. Entonces, lo que harás durante los desafíos prácticos es echar un vistazo a el archivo challenge.cy.js. Dentro de él encontrarás instrucciones sobre lo que debes hacer y dentro de la solución del desafío encontrarás la solución para ese ejemplo en particular. No te sientas mal si lo consultas. De hecho, te animo a que lo hagas, maximiza tu aprendizaje obteniendo la mayor cantidad de información posible, no intentes resolverlo de memoria o algo así. Utiliza la documentación, utiliza el archivo de solución, haz todo lo posible para obtener conocimiento. Nota importante sobre los desafíos prácticos, no es necesario que los termines todos. De hecho, mi objetivo es mantenerlos activos incluso después del masterclass, así que si no los terminas todos y te sientes incómodo porque no están terminados, eso es realmente algo bueno, me gusta eso, porque eso probablemente te obligará a abrir ese repositorio nuevamente y jugar un poco más con Cypress.

QnA

Watch more workshops on topic

Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
React Summit 2023React Summit 2023
151 min
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
Top Content
Featured Workshop
Josh Justice
Josh Justice
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()?
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
React Summit 2022React Summit 2022
117 min
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Masterclass de Pruebas de API con Postman
TestJS Summit 2023TestJS Summit 2023
48 min
Masterclass de Pruebas de API con Postman
Top Content
WorkshopFree
Pooja Mistry
Pooja Mistry
En el panorama siempre en evolución del desarrollo de software, garantizar la fiabilidad y funcionalidad de las API se ha vuelto primordial. "Pruebas de API con Postman" es una masterclass completa diseñada para equipar a los participantes con los conocimientos y habilidades necesarios para sobresalir en las pruebas de API utilizando Postman, una herramienta poderosa ampliamente adoptada por profesionales en el campo. Esta masterclass profundiza en los fundamentos de las pruebas de API, avanza a técnicas de prueba avanzadas y explora la automatización, las pruebas de rendimiento y el soporte multiprotocolo, proporcionando a los asistentes una comprensión holística de las pruebas de API con Postman.
Únete a nosotros para esta masterclass para desbloquear todo el potencial de Postman para las pruebas de API, agilizar tus procesos de prueba y mejorar la calidad y fiabilidad de tu software. Ya seas un principiante o un probador experimentado, esta masterclass te equipará con las habilidades necesarias para sobresalir en las pruebas de API con Postman.
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Pruebas de Aplicaciones Web utilizando Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Pruebas de Aplicaciones Web utilizando Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Este masterclass te enseñará los conceptos básicos de cómo escribir pruebas de extremo a extremo utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, abarcando todas las características de la aplicación, estructurando las pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquier persona que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir el masterclass.
Mejores Prácticas para Escribir y Depurar Pruebas de Cypress
TestJS Summit 2023TestJS Summit 2023
148 min
Mejores Prácticas para Escribir y Depurar Pruebas de Cypress
Workshop
Filip Hric
Filip Hric
Probablemente conozcas la historia. Has creado un par de pruebas y, como estás utilizando Cypress, lo has hecho bastante rápido. Parece que nada te detiene, pero luego - prueba fallida. No fue la aplicación, no fue un error, la prueba fue... ¿inestable? Bueno sí. El diseño de la prueba es importante sin importar la herramienta que utilices, incluyendo Cypress. La buena noticia es que Cypress tiene un par de herramientas bajo su cinturón que pueden ayudarte. Únete a mí en mi masterclass, donde te guiaré lejos del valle de los anti-patrones hacia los campos de pruebas estables y siempre verdes. Hablaremos sobre los errores comunes al escribir tu prueba, así como depurar y revelar problemas subyacentes. Todo con el objetivo de evitar la inestabilidad y diseñar pruebas estables.

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

Solicitudes de Red con Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Solicitudes de Red con Cypress
Top Content
Cecilia Martinez, a technical account manager at Cypress, discusses network requests in Cypress and demonstrates commands like cydot request and SCI.INTERCEPT. She also explains dynamic matching and aliasing, network stubbing, and the pros and cons of using real server responses versus stubbing. The talk covers logging request responses, testing front-end and backend API, handling list length and DOM traversal, lazy loading, and provides resources for beginners to learn Cypress.
Pruebas de ciclo completo con Cypress
TestJS Summit 2022TestJS Summit 2022
27 min
Pruebas de ciclo completo con Cypress
Top Content
Cypress is a powerful tool for end-to-end testing and API testing. It provides instant feedback on test errors and allows tests to be run inside the browser. Cypress enables testing at both the application and network layers, making it easier to reach different edge cases. With features like AppActions and component testing, Cypress allows for comprehensive testing of individual components and the entire application. Join the workshops to learn more about full circle testing with Cypress.
Desarrollo Efectivo de Pruebas
TestJS Summit 2021TestJS Summit 2021
31 min
Desarrollo Efectivo de Pruebas
Top Content
This Talk introduces Test Effective Development, a new approach to testing that aims to make companies more cost-effective. The speaker shares their personal journey of improving code quality and reducing bugs through smarter testing strategies. They discuss the importance of finding a balance between testing confidence and efficiency and introduce the concepts of isolated and integrated testing. The speaker also suggests different testing strategies based on the size of the application and emphasizes the need to choose cost-effective testing approaches based on the specific project requirements.
Playwright Test Runner
TestJS Summit 2021TestJS Summit 2021
25 min
Playwright Test Runner
Top Content
The Playwright Test Runner is a cross-browser web testing framework that allows you to write tests using just a few lines of code. It supports features like parallel test execution, device emulation, and different reporters for customized output. Code-Gen is a new feature that generates code to interact with web pages. Playwright Tracing provides a powerful tool for debugging and analyzing test actions, with the ability to explore trace files using TraceViewer. Overall, Playwright Test offers installation, test authoring, debugging, and post-mortem debugging capabilities.
Todos pueden escribir pruebas fácilmente
TestJS Summit 2023TestJS Summit 2023
21 min
Todos pueden escribir pruebas fácilmente
Playwright is a reliable end-to-end testing tool for modern web apps that provides one API, full isolation, fast execution, and supports multiple languages. It offers features like auto-weighting, retrying assertions, seamless testing of iframes and shadow DOM, test isolation, parallelism, and scalability. Playwright provides tools like VS Code extension, UiMode, and Trace Viewer for writing, debugging, and running tests. Effective tests prioritize user-facing attributes, use playwright locators and assertions, and avoid testing third-party dependencies. Playwright simplifies testing by generating tests, providing code generation and UI mode, and allows for easy running and debugging of tests. It helps in fixing failed tests and analyzing DOM changes, fixing locator mismatches, and scaling tests. Playwright is open source, free, and continuously growing.