Solicitudes de Red con Cypress

Rate this content
Bookmark
Cecilia Martinez, una gerente de cuentas técnicas en Cypress, discute las solicitudes de red en Cypress y demuestra comandos como cydot request y SCI.INTERCEPT. También explica la coincidencia dinámica y el aliasing, el stubbing de red, y los pros y contras de usar respuestas de servidor reales versus stubbing. La charla cubre el registro de respuestas de solicitudes, la prueba de API de front-end y backend, el manejo de la longitud de la lista y el recorrido del DOM, la carga perezosa, y proporciona recursos para los principiantes para aprender Cypress.

From Author:

Ya sea que estés probando tu UI o API, Cypress te proporciona todas las herramientas necesarias para trabajar y gestionar solicitudes de red. Esta tarea de nivel intermedio demuestra cómo usar los comandos cy.request y cy.intercept para ejecutar, espiar y simular solicitudes de red mientras pruebas tu aplicación en el navegador. Aprende cómo funcionan los comandos, así como los casos de uso para cada uno, incluyendo las mejores prácticas para probar y simular tus solicitudes de red.

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

FAQ

Cypress es un framework open-source gratuito que permite escribir y ejecutar pruebas para cualquier aplicación que se ejecute en un navegador. Se utiliza para realizar pruebas de UI y de extremo a extremo, así como pruebas de API, facilitando la ejecución de pruebas dentro de un navegador real.

En Cypress, puedes ver las solicitudes de red a medida que ocurren usando el registro de comandos en la interfaz de usuario gráfica cuando ejecutas tus pruebas localmente. Esto proporciona detalles como el código de estado y el punto final de las solicitudes.

El comando 'cy.request' se utiliza en Cypress para ejecutar solicitudes HTTP. Este comando es útil para pruebas de API, ya que permite enviar solicitudes HTTP de forma independiente a la funcionalidad de la aplicación y validar las respuestas de los endpoints del servidor.

El comando 'cy.intercept' en Cypress permite interceptar y manipular solicitudes y respuestas de red. Ofrece la capacidad de observar, espiar, falsificar, y manejar dinámicamente las solicitudes HTTP, lo que es útil para pruebas más detalladas y específicas.

En Cypress, puedes simular respuestas de red usando el método 'cy.intercept'. Este método te permite pasar un cuerpo de respuesta falso, como un archivo de fixture de Cypress o un objeto JSON, para simular la respuesta real de la red.

Puedes encontrar recursos para aprender Cypress en su sitio oficial docs.cypress.io, que incluye documentación detallada para principiantes. Además, Test Automation University ofrece cursos gratuitos que cubren desde niveles básicos hasta avanzados sobre Cypress.

Cecelia Martinez
Cecelia Martinez
33 min
18 Nov, 2021

Comments

Sign in or register to post your comment.

Video Transcription

Available in English: Network Requests with Cypress

1. Introducción a las solicitudes de red con Cypress

Short description:

Hola, soy Cecilia Martinez, una gerente de cuentas técnicas en Cypress. Hoy, hablaré sobre las solicitudes de red con Cypress. Cypress es un marco de trabajo de código abierto para escribir y ejecutar pruebas en un navegador. Proporciona una interfaz gráfica de usuario con un registro de comandos que muestra las solicitudes de red realizadas durante las pruebas. También puedes interactuar con las solicitudes de red utilizando los comandos cydot request y cydot intercept. Estaré utilizando código de la aplicación de pago de código abierto Cypress real world app, para demostrar estos comandos.

Hola, soy Cecilia Martinez, y soy una gerente de cuentas técnicas en Cypress. Y estoy realmente emocionada de estar aquí hoy para hablarles sobre las solicitudes de red con Cypress. He hecho las diapositivas para la presentación disponibles en la URL en la pantalla, y puedes conectarte conmigo en Twitter en Cecilia Creates.

Entonces, para aquellos de ustedes que no están familiarizados con Cypress, es un framework open-source gratuito que te permite escribir y ejecutar pruebas para cualquier aplicación que se ejecute en un navegador. Cypress ejecuta pruebas contra tu aplicación dentro de un navegador real. Puedes ver en la pantalla aquí una representación de nuestra interfaz de usuario gráfica cuando estás ejecutando tus pruebas localmente. Entonces, la aplicación bajo prueba está en el lado derecho en la vista previa de la aplicación. Y luego, en el lado izquierdo, tenemos lo que se llama nuestro registro de comandos, que como suena es un registro de todos los comandos que tu code de prueba está ejecutando contra tu aplicación. Esto nos da buena información sobre las solicitudes de red que están ocurriendo dentro de tu aplicación a medida que avanzan las pruebas. Entonces, puedes ver las solicitudes de red a medida que ocurren en el registro de comandos. Aquí en la captura de pantalla, podemos ver que después de que nuestro code de prueba ha hecho clic en un elemento, ocurrió una solicitud de post. Podemos ver el code de estado, podemos ver el punto final, así como cómo podemos o no estar interactuando con esa solicitud a través de nuestro code de prueba. También podemos hacer clic en cualquier solicitud en el registro de comandos para enviarla a la console. Esto te da información adicional útil como encabezados de solicitud, cuerpo de respuesta, que puede ser útil cuando estás solucionando problemas o debugging pruebas fallidas, o tratando de entender mejor qué está pasando con las solicitudes de red de tu aplicación.

Entonces, además de ver las solicitudes de red dentro del corredor de pruebas de Cypress, también puedes interactuar con ellas. Entonces, vamos a hablar de dos comandos hoy que te permiten trabajar con solicitudes de red dentro de tus pruebas de Cypress. El primero es cydot request, que ejecuta solicitudes HTTP. Y el segundo es cydot intercept, que te permite interactuar con las solicitudes de red. Para fines de demostración hoy, estaré usando algo de code de la aplicación real world de Cypress. La aplicación real world de Cypress es un gran recurso. Fue desarrollada por nuestro equipo de Developer Experience. Es una aplicación completa de React que muestra las best practices, casos de uso, y luego esencialmente todas las diferentes cosas que puedes hacer con Cypress. Entonces, es de código abierto. Entonces, si vas al enlace de github en la pantalla, puedes ver el code fuente así como un conjunto completo de pruebas de UI y API para la aplicación. Es una aplicación de pago estilo Venmo. Entonces, estás lidiando con cosas como usuarios, transacciones, cuentas bancarias, y mucho

2. Introducción a cydot request

Short description:

cydot request es un comando en Cypress que te permite enviar solicitudes HTTP desde tu código de prueba. Se utiliza comúnmente para pruebas de API, donde puedes validar las respuestas de los endpoints del servidor. También puedes usarlo para recuperar, crear o actualizar datos para fines de prueba. Además, puedes usarlo para validar endpoints antes de proceder con tu prueba.

componentes de UI muy familiares. Muy bien. Así que podemos empezar con cydot request. Entonces, como mencioné, cydot request envía una solicitud HTTP desde tu código de prueba. Esto es independiente de la funcionalidad de tu aplicación. Es similar a cómo puedes enviar una solicitud HTTP desde un cURL o postman. Entonces, la sintaxis es cydot request. Como mínimo, tienes que pasar la URL del endpoint donde estás haciendo la solicitud. También puedes pasar el método, un cuerpo especificado y luego opciones adicionales para la solicitud.

Entonces, ¿por qué usarías cydot request? El caso de uso más popular es en realidad para pruebas de API. Aunque Cypress, es mayormente conocido por las pruebas de UI y de extremo a extremo, también puedes usar el comando cydot request, junto con el mismo lenguaje de aserción con el que estás familiarizado, para validar las respuestas que vienen de tus endpoints de servidor. Entonces, en el ejemplo aquí, esto viene directamente del conjunto de pruebas de API en nuestra aplicación real-world de Cypress. Estamos validando una solicitud GET a nuestro endpoint de cuentas bancarias, y el bloque para la prueba es que obtiene una lista de cuentas bancarias para un usuario. Entonces, en este caso, estamos usando cydot request en la línea 4 para hacer una solicitud GET a ese endpoint. Y luego, estamos obteniendo la respuesta y estamos haciendo aserciones contra ella. Entonces, esperamos que ese estado de respuesta sea igual a 200. Y esperamos que el cuerpo de la respuesta contenga el ID del usuario en los resultados. Entonces, de nuevo, puedes aprovechar la misma sintaxis de Cypress que estás acostumbrado para pruebas de API junto a tu conjunto de pruebas de UI. También puedes usarlo para recuperar, crear o actualizar data para testing.

Entonces, la gestión de data de prueba es un tema realmente popular cuando se trata de testing, especialmente cuando estás haciendo pruebas de extremo a extremo. Y entonces, si necesitas recuperar data de un endpoint, como un nombre de usuario o contraseña para iniciar sesión, o si necesitas crear una transacción o crear algo en tu aplicación para probarlo, en lugar de hacerlo programáticamente, puedes usar una llamada de solicitud firmada para hacerlo a través de tu API. También puedes usarlo para validar endpoints antes de proceder con tu prueba. Entonces, si tienes quizás un endpoint o backend poco fiable que podría ser más lento o estar caído, o si estás usando un servicio de terceros o microservicio y solo quieres asegurarte de que todo está listo antes de proceder con tu prueba, puedes disparar una solicitud de cierre de sesión validar que su estado de respuesta es 200, que está listo para funcionar, y luego seguir adelante y proceder con la prueba que requiere ese endpoint.

QnA

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

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.
Pruebas pequeñas, grandes resultados
TestJS Summit 2022TestJS Summit 2022
21 min
Pruebas pequeñas, grandes resultados
Automated atomic tests are a great way to improve UI tests by making them less brittle and faster. The tests focus on testing a single feature or component and have minimal UI interactions. The Talk explores examples of automated atomic tests and their implementation on web applications. It also discusses the analysis of atomic tests, login tests, and working with JSON Web Tokens for authentication and authorization. The Talk concludes by highlighting the use of UI and web requests in automated atomic testing.

Workshops on related 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
Cómo empezar con Cypress
TestJS Summit 2022TestJS Summit 2022
146 min
Cómo empezar con Cypress
Featured WorkshopFree
Filip Hric
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.
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.