Adaptación de las Pruebas E2E para un Gran Proyecto

Rate this content
Bookmark

DeliveryHero es una gran empresa internacional. Y como en toda gran empresa, la introducción de una nueva mejora técnica es un tema candente. Conozca los desafíos que nuestro equipo enfrentó al hacer que nuestra plataforma sea probada de extremo a extremo, cómo mejoraron nuestros mecanismos de informes con el tiempo y las soluciones que desarrollamos para probar diferentes variaciones de una función.

This talk has been presented at JSNation Live 2020, check out the latest edition of this JavaScript Conference.

FAQ

El proyecto de Delivery Hero implica un gran desarrollo de front-end que requiere mantenimiento y desarrollo continuo. Las pruebas de extremo a extremo se han implementado para mejorar la eficiencia, evitando las pruebas manuales repetitivas y asegurando la calidad al introducir grandes cambios.

Más de 20 desarrolladores de front-end trabajan en el proyecto, que incluye un repositorio de micro-front-ends con más de 50 mil líneas de código y un monolito con 200 mil líneas de código.

Las pruebas de extremo a extremo se ejecutan en un repositorio separado como un trabajo programado, aunque se está trabajando para integrarlas con los pipelines de CI/CD y se utiliza una integración personalizada de Slack con Cypress para notificaciones y reportes.

Se han adoptado prácticas como el uso de atributos de accesibilidad en lugar de data CI, la creación de comandos personalizados para optimizar las pruebas, y la utilización de cookies para probar diferentes variaciones de funcionalidades.

Para evitar repetir todo el ciclo de pruebas, se utiliza un comando personalizado que permite iniciar pruebas directamente en las páginas específicas que están siendo desarrolladas, preparando el almacenamiento y otros datos necesarios de forma automática.

Los futuros planes incluyen integrar completamente las pruebas de extremo a extremo en el pipeline de CI/CD y trasladar las pruebas al monorepo del proyecto de micro-front-ends una vez completada la migración desde el monolito.

Sí, Delivery Hero está en búsqueda activa de desarrolladores para unirse al equipo y contribuir al desarrollo y mejora de sus proyectos.

Vadym Kukhtin
Vadym Kukhtin
Devesh Jadon
Devesh Jadon
8 min
18 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta Charla presenta la adaptación de las pruebas de extremo a extremo para un proyecto, destacando sus beneficios en la mejora de la resiliencia y la tranquilidad durante la implementación. El orador menciona el tamaño del equipo, las solicitudes de extracción diarias y el tamaño de su base de código. También discuten el uso de cookies para probar diferentes versiones de una función en una página y su plan de mejora mediante la adición de pruebas E2E a un pipeline de CICD y la consolidación de pruebas en su monorepo.

1. Introducción a las pruebas de extremo a extremo y configuración

Short description:

Hola, soy Vadim, un ingeniero de front-end de Delivery Hero, y hoy con mi colega Devesh, quiero presentarles la adaptación de las pruebas de extremo a extremo que hemos realizado para nuestro proyecto. Pensamos que es una gran mejora introducir las pruebas de extremo a extremo para mejorar nuestra resistencia y tranquilidad al implementar un gran cambio. Tenemos más de 20 desarrolladores de front-end, hacemos 10 solicitudes de extracción diarias y nuestro repositorio de micro-front-ends tiene más de 50 mil líneas de código en total sin incluir los módulos de nodo. La configuración de las pruebas de extremo a extremo es un repositorio separado y las ejecutamos como un trabajo programado. También utilizamos las mejores prácticas del equipo de Cypress y los principios de accesibilidad en las pruebas. Ahora, quiero cederle la palabra a Dinesh.

y hoy con mi colega Devesh, quiero presentarles la adaptación de las pruebas de extremo a extremo que hemos realizado para nuestro proyecto en Delivery Hero. El orden del día para hoy será el estudio de caso para las pruebas de extremo a extremo, o por qué comenzamos a hacerlo, la configuración de las pruebas de extremo a extremo, y las mejores prácticas que utilizamos, luego cómo evitar repetir este ciclo durante el desarrollo de las pruebas, y cómo estamos probando diferentes variaciones de la funcionalidad. Entonces, el estudio de caso para las pruebas de extremo a extremo fue bastante simple y común como para todos, porque Delivery Hero es una gran empresa con un gran proyecto de front-end, lleva mucho tiempo y esfuerzo mantenerlo y desarrollarlo, así que pensamos que es una gran mejora para la situación introducir las pruebas de extremo a extremo para no tener que probar manualmente las funcionalidades cada vez o depurar correcciones, así que podemos mejorar nuestra resistencia y la tranquilidad al implementar un gran cambio. Para tener una idea de la escala, tenemos más de 20 desarrolladores de front-end, hacemos 10 solicitudes de extracción diarias, nuestro repositorio de micro-front-ends tiene más de 50 mil líneas de código en total sin incluir los módulos de nodo, y el monolito tiene el antiguo monolito tiene 200 mil líneas de código en total, así que es bastante grande. La configuración de las pruebas de extremo a extremo que tenemos es básicamente un repositorio separado, porque agregamos las pruebas mientras nos estábamos migrando del antiguo proyecto al mono-repo con los micro-front-ends, y tenemos la simplicidad de ejecutar las pruebas en el repositorio separado para que los desarrolladores puedan incorporarse fácilmente. Por ahora, las ejecutamos como un trabajo programado, sí, sabemos que no es un estándar, digamos, pero estamos trabajando en la integración con los pipelines de CICD, y creamos nuestra propia integración personalizada de Slack con Cypress. Sabemos que hay un complemento oficial desarrollado la semana pasada, pero sí, todavía tenemos el nuestro por ahora. Sí, puedes ver el ejemplo de cómo es el mensaje del bot de Slack con el informe, y puedes hacer clic en el botón de informe y verificar este tipo de informe, que es muy útil porque muestra como la traza de la pila, el error exacto y la captura de pantalla. También, por supuesto, estamos utilizando algunas mejores prácticas del equipo de Cypress y algunas propias, que intentan utilizar los principios de accesibilidad en las pruebas creadas por Ken Dodds, el creador de la biblioteca de pruebas. En lugar de utilizar data CI, que es una mejor práctica del equipo de Cypress, podemos utilizar los atributos de área y otros atributos de accesibilidad, que son muy útiles y prácticos. También, por supuesto, utilizamos los comandos de Cypress para ayudantes generales, como si algo se utiliza en especificaciones separadas o más de dos veces, simplemente lo envolvemos en el comando y lo usamos como una sola línea, lo cual es más sencillo. Además, estamos utilizando una anotación de given, pero no solo como una estructura para la prueba, sino también, como un comando, porque como puedes ver aquí en un ejemplo, es muy útil, porque incluso si eliminas todo el código, aún tienes una idea de qué va a probar la prueba, porque a veces los comandos pueden ser complicados. Y ahora, quiero cederle la palabra a Dinesh, por favor. Gracias, Vadim. Hola a todos. Vadim mencionó escenarios bastante buenos sobre las mejores prácticas que estamos siguiendo. Así que, voy a guiarlos sobre dos cosas en particular que estamos haciendo en nuestro equipo, que realmente nos ayuda a lograr una prueba muy rápidamente. Entonces, una de estas cosas en particular es cómo evitar repetir el ciclo. Quiero decir, la mayoría de las pruebas de extremo a extremo que se ven hoy en día son como un flujo único. Primero, el usuario, quiero decir, primero la prueba de extremo a extremo pasa por una página, luego la segunda página y la tercera página. Es de manera secuencial. Pero considerando que somos un equipo de más de 20 desarrolladores, como mencionó Vadym, y diferentes equipos están trabajando en diferentes páginas o diferentes módulos, no queremos repetir todo el ciclo durante el desarrollo. Queremos probar nuestras funcionalidades, queremos probar solo nuestra página. Entonces, esto sería algo así, ¿de acuerdo? Ir directamente desde una página a nuestra página. Entonces, ¿cómo lo estamos logrando realmente? Creamos un servicio de utilidad en nuestras utilidades. Quiero decir, no es una utilidad, pero podríamos decir un comando que Vadym mencionó. Tenemos un comando personalizado, que es ir a la página. Entonces, ¿qué sucede en este comando en particular? Esto podría ser cualquier página. Como, esto podría ser ir a mi página y luego puedo marcar los datos anteriores sobre todas las páginas que vinieron antes, como todos los datos que agregaron al navegador, al almacenamiento, todo será

2. Pruebas de Diferentes Versiones de una Funcionalidad

Short description:

Voy a configurar el almacenamiento local, todos los datos, luego realizaré la prueba relacionada con mi página en particular. Y si algo está mal, como durante la marcación de los datos, simplemente puedo evitar hacer la prueba y redirigir a la página predeterminada. Para probar diferentes versiones de una funcionalidad en una página, aprovechamos las cookies del navegador. Creamos un servicio de utilidad que cambia los valores del servicio de banderas de funcionalidad y los fusiona con nuevos valores. Después de configurar la clave dentro de una cookie, escribimos la prueba. Aunque tenemos buenas prácticas implementadas, siempre hay margen de mejora. Planeamos alejarnos del trabajo programado y agregar pruebas de extremo a extremo a un pipeline de CICD. También consolidaremos las pruebas de extremo a extremo en nuestro monorepo para el micro frontend. Únete a nosotros en Delivery Hero.

marcado aquí. Y lo que haré después de esto, usaré la ventana sin marcos. Configuraré el almacenamiento local, todos los datos, luego realizaré la prueba relacionada con mi página en particular. Y si algo está mal, como algo está mal durante la marcación de los datos, puedo simplemente evitar hacer la prueba y puedo redirigir a la página predeterminada. Ahora, lo que viene a continuación es, ¿cómo estamos probando realmente las diferentes versiones de una funcionalidad? Supongamos que estás en una página, tienes tu página, pero ahora quieres probar diferentes versiones de tu funcionalidad en esa página en particular. Entonces, ¿qué harías? Para esto, encontramos una solución simple, aprovechar las cookies del navegador. Creamos un servicio de utilidad en nuestra aplicación que utiliza las cookies del navegador y cambia los valores que provienen del servicio de banderas de funcionalidad y los fusiona con los nuevos valores. En este caso, este servicio de utilidad se puede utilizar para cambiar la variación de la bandera de funcionalidad y se ve así. En este caso, puedes ver que tenemos las banderas de funcionalidad que provienen del servicio, tenemos las banderas de las cookies, las fusionamos y las almacenamos en la memoria caché. ¿Y qué sucede después de eso? Ok. Nuestra aplicación está lista para manejar las cookies. Ahora solo necesitamos configurar esta clave en particular dentro de una cookie con las variaciones mencionadas aquí. Como puedes ver en la prueba, prueba para la variación de la bandera de funcionalidad, simplemente configuro la cookie para esas variaciones y luego, después de eso, puedo seguir escribiendo mi prueba. Como puedes ver, tenemos muchas buenas prácticas y tenemos cosas buenas implementadas en este momento, pero nadie es perfecto y siempre hay margen de mejora. Entonces, algunas cosas que notamos y tenemos un plan para ello. Una cosa es alejarnos del trabajo programado y agregar pruebas de extremo a extremo a un pipeline de CICD. Y lo siguiente es, como mencionó Vadim, tenemos las pruebas de extremo a extremo en un repositorio separado. Y tuvimos el caso de uso porque estamos migrando del monolito a un micro frontend. Una vez que todo se haya migrado al micro frontend, agregaremos las pruebas de extremo a extremo a nuestro monorepo para el micro frontend y definitivamente seguiremos mejorando. Eso es lo que estamos haciendo. Seguiremos mejorando la calidad de nuestras pruebas. Y por último pero no menos importante, por favor, únete a nosotros. Estamos buscando desarrolladores como tú, por favor únete a nosotros en Delivery Hero. Gracias. Gracias.

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

Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Pruebas de Aplicaciones Web con Playwright
TestJS Summit 2022TestJS Summit 2022
20 min
Pruebas de Aplicaciones Web con Playwright
Top Content
Testing web applications with Playwright, a reliable end-to-end testing tool. Playwright offers fast execution, powerful tooling, and support for multiple languages. It provides precise selectors, web-first assertions, and code generation for easy testing. Playwright also offers features like live debugging, tracing, and running tests on CI. The future of Playwright aims to make testing easy and fun, with a focus on creating frustration-free web experiences.
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.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

Workshops on related topic

Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
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
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
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.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
WorkshopFree
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Construyendo una suite de pruebas significativa que no sea todo E2E
TestJS Summit 2023TestJS Summit 2023
89 min
Construyendo una suite de pruebas significativa que no sea todo E2E
Workshop
David Burns
David Burns
Todos somos enseñados a seguir la Pirámide de Pruebas pero la realidad es que construimos el Árbol de Pruebas de Navidad. En esta masterclass, David te explicará cómo desglosar proyectos y poner las pruebas donde necesitan estar. Al final de la masterclass, podrás actualizar tus proyectos para que cualquiera y todos puedan empezar a contribuir y realmente vivir según "La calidad es el trabajo de todos".
Te guiará a través de:- Pruebas de Componentes- Pruebas de API- Pruebas de Regresión Visual- Pruebas A11Y
También te explicará cómo configurar todo esto en tu pipeline de CI/CD para que puedas obtener ciclos de feedback más cortos y rápidos.