Versión en EspañolES

Mejores Prácticas para Escribir y Depurar Pruebas de Cypress

Filip Hric

Replay.io

Recording and certification are available to Multipass and Full ticket holders only

Please login if you have one.

Get Multipass

Bookmark

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.

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

FAQ

Replay.IO es un proyecto que ofrece herramientas de desarrollo de viaje en el tiempo, permitiendo a los desarrolladores grabar y depurar sus aplicaciones. Filip Hrits menciona que trabaja para Replay.IO y que considera que es un excelente complemento para las pruebas realizadas con Cypress, una herramienta de testing.

Para optimizar el inicio de sesión en Cypress, es recomendable utilizar el comando CY session. Este comando permite que la secuencia de inicio de sesión se ejecute solo una vez, almacenando los datos necesarios (como cookies y almacenamiento local) y reutilizándolos en las pruebas subsiguientes, lo que acelera el proceso significativamente.

Filip sugiere utilizar la herramienta Replay para grabar la ejecución de las pruebas y luego depurarlas utilizando las capacidades de viaje en el tiempo que ofrece esta herramienta. Esto permite revisar el comportamiento de la aplicación en el momento exacto de la falla y entender mejor las causas de la inestabilidad.

Filip recomienda evitar las condiciones en las pruebas de Cypress siempre que sea posible, ya que pueden llevar a resultados inesperados o a que no se detecten problemas reales en la aplicación. En su lugar, sugiere deconstruir el problema y entender la lógica de la aplicación para encontrar soluciones alternativas.

La función CY session en Cypress ofrece la ventaja de reducir significativamente el tiempo de ejecución de las pruebas al evitar repetir el proceso de inicio de sesión para cada prueba. Esto se logra almacenando el estado de la sesión tras el primer inicio de sesión y reutilizándolo en pruebas subsiguientes.

Para simular APIs de terceros durante las pruebas, Filip sugiere usar el comando intercept de Cypress. Este comando permite modificar respuestas de la API de manera dinámica durante la ejecución de la prueba, lo que es útil para ajustar las condiciones del test sin depender de servidores externos.

testing cypress

Filip Hric

148 min

13 Dec, 2023

Comments

Igor Gonak
Bonprix
What is the duration of this workshop? I can't see it anywhere.
16:36 Dec 7, 2023

Video Summary and Transcription

La masterclass cubrió las mejores prácticas y depuración de las pruebas de Cypress, incluyendo errores comunes y cómo dirigirse a los elementos correctos. Se destacó el uso del comando 'contains' para asegurar pruebas estables. Se discutió la depuración y estabilidad en las pruebas de Cypress, junto con estrategias para evitar pruebas inestables y esperar las llamadas de API. Se enfatizó la importancia de la legibilidad de las pruebas y el uso de herramientas como Cypress Plugin Steps y Replay para la depuración. Se recomendó el comando de sesión en Cypress para optimizar las secuencias de inicio de sesión, y se exploraron las diferencias entre Cypress y Playwright.

Available in English: Best Practices for Writing and Debugging Cypress Tests

Video transcription and chapters available for users with access.

Available in other languages:

Watch more workshops on topic

Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React

React Summit 2023

151 min

Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React

Top Content

Featured Workshop

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

react react testing library test driven development react react testing deep dive testing best practices

Cómo empezar con Cypress

TestJS Summit 2022

146 min

Cómo empezar con Cypress

Featured WorkshopFree

Filip Hric

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.

testing cypress

Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native

React 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

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

e2e testing react native detox react native test automation react native react native testing react native accessibility testing beginner friendly

Masterclass de Pruebas de API con Postman

TestJS Summit 2023

48 min

Masterclass de Pruebas de API con Postman

Top Content

WorkshopFree

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.

security testing testing

Monitoreo 101 para Desarrolladores de React

React Summit US 2023

107 min

Monitoreo 101 para Desarrolladores de React

Top Content

WorkshopFree

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

react vue angular testing

Testing Web Applications Using Cypress

TestJS Summit - January, 2021

173 min

Testing Web Applications Using Cypress

Top Content

WorkshopFree

Gleb Bahmutov

Esta masterclass te enseñará los conceptos básicos para escribir pruebas end-to-end útiles utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, cubriendo cada característica de la aplicación, estructurando pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquiera que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir adelante.

e2e testing javascript testing cypress

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 2021

33 min

Solicitudes de Red con Cypress

Top Content

Cecelia Martinez

Ionic

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.

testing cypress

Pruebas de ciclo completo con Cypress

TestJS Summit 2022

27 min

Pruebas de ciclo completo con Cypress

Top Content

Filip Hric

Replay.io

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.

e2e testing testing cypress

Desarrollo Efectivo de Pruebas

TestJS Summit 2021

31 min

Desarrollo Efectivo de Pruebas

Top Content

Shai Reznik

HiRez.io

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.

unit testing testing

Playwright Test Runner

TestJS Summit 2021

25 min

Playwright Test Runner

Top Content

Andrey Lushnikov

Microsoft

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.

testing

Todos pueden escribir pruebas fácilmente

TestJS Summit 2023

21 min

Todos pueden escribir pruebas fácilmente

Debbie O'Brien

Senior Program Manager @ Microsoft, working with Playwright.

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.

e2e testing testing