Pruebas E2E para Aplicaciones Web3

Hola a todos. Soy Rafaela, y voy a compartir un poco de mi experiencia con las pruebas de extremo a extremo para las aplicaciones Web3. Así que solo un poco sobre mí. Tengo 15 años de experiencia en QA, automatización de pruebas, estrategia de pruebas, arquitectura, y liderazgo, y me apasionó mucho el área de QA, así que creé este blog en 2011 donde, ya sabes, puedes encontrar todo lo que he aprendido en los últimos años.

Así que code fragmentos, programación, DevOps, liderazgo, y automatización de pruebas, por supuesto. Nací y crecí en Brasil, para ser más específica, soy de una ciudad costera llamada Santos en Sao Paulo. Y puedes ver la foto en la pantalla. También soy una gran fan de Harry Potter, como puedes ver, y esta es una de las razones por las que me mudé a Londres hace ocho años. Y el clima también, pero nadie creyó cuando dije eso.

Pero sí, la agenda va a ser esta. Vamos a hablar sobre qué es Web3, luego la arquitectura de la aplicación Web3, una introducción sobre las pruebas de entrada, y el desafío, luego las herramientas que puedes usar, y vamos a tener dos demostraciones, una solo usando un simulacro, y otra usando un framework llamado SyncPress. Y luego al final, vamos a hablar sobre los compromisos de cada enfoque.

Entonces, ¿qué es Web3? Web3 es solo una nueva versión de la web. Estamos en Web2 ahora y este Web3 viene con las ideas de descentralización, economía basada en tokens y también tecnología blockchain. Así que ofrece un modelo de lectura-escritura-propiedad, por lo que las personas tienen una participación financiera y más poder sobre las comunidades en línea a las que pertenecen. Así que poseen los datos, que no es el caso ahora. Se espera que la experiencia en línea cambie como lo hicieron los teléfonos celulares y los smartphones y las piezas en el pasado, así que va a ser un gran cambio para, ya sabes, nosotros que estamos viviendo en este momento.

Algunos negocios intentan unirse a este nuevo mercado pero encuentran algunos rechazos como ya sabes con blockchain también. Como, ya sabes, el impacto negativo en el medio ambiente y la especulación financiera también. Esta es la evolución de la web. Así que desde la primera versión hasta ahora, así que la primera versión teníamos las páginas estáticas de solo lectura donde no podías interactuar demasiado con ellas. Y luego ahora lo que tenemos es un poco más dinámico e interactivo por lo que podemos ir allí y publicar cosas. Así que, ya sabes, Twitter, podemos simplemente enviar nuestros datos básicamente a través de estas grandes corporaciones. Y el Web3, que es el que viene ahora, es más privado, seguro y descentralizado. Así que la idea es, ya sabes, nuestros datos no van a ser propiedad de estas grandes corporaciones sino de ti mismo.

Y la arquitectura de Web3 también es bastante diferente porque se basa en contratos inteligentes como blockchain. Así que si vemos ahora lo que tenemos es básicamente el front-end, back-end base de datos dentro de este servidor web. Y esto es controlado por, ya sabes, la corporación o la empresa, alguien. Y en Web3, solo tenemos el front-end en el servidor web. Así que esto todavía va a ser parte de, ya sabes, va a ser controlado por la empresa o la corporación.

Pero entonces los contratos inteligentes, la EVM y la Ethereum blockchain, esto es algo que va a ser descentralizado. Y los contratos inteligentes, tienen la lógica de negocio, o el protocolo de estas transacciones y estos negocios. Así que básicamente ahora, lo que tenemos es que vamos a interactuar con el front-end y luego el front-end va a interactuar con los contratos inteligentes, y luego la EVM, la Ethereum máquina virtual, y esto va a añadir la transacción a la blockchain. Así que va a añadir un nuevo bloque a esta Ethereum blockchain. Y esta es la parte donde es descentralizado. Así que este es un ejemplo de una pila WebTree. Así que tenemos algunos ejemplos de herramientas y frameworks, pero puedes ver las capas. Así que tienes la primera capa con las aplicaciones centralizadas. Así que puede ser algo como MetaMask, que es un plugin para autorizarlo. Identity tiene carteras, es una cartera de criptomonedas. Luego tienes Uniswap. Luego tienes otra capa de presentación, que se llama luego tienes los entornos de desarrollo donde puedes, sabes, probar tu producto. Y luego tienes las otras capas como la capa de interacción con la blockchain. Y la capa de red con las blockchains EVM. Así que estas no son todas las herramientas que puedes usar. Es solo un ejemplo con las más populares, creo. Pero al menos tienes una idea de, sabes, cómo es su pila Web3. Y luego las tareas, son, las tareas de extremo a extremo son más como el problema con Web3. Y si quieres hacer, sabes, las unit tests, está bien, puedes usar algo que ya has usado para, sabes, aplicaciones web2. Puedes usar Jest, puedes usar Mocha, es el mismo tipo de framework. Y luego puedes simplemente verificar, sabes, si los componentes están operando como se esperaba. Así que las pruebas de UI tampoco son un problema, porque todavía puedes usar los mismos frameworks que usas ahora para hacer las pruebas. Y, sí, las pruebas de integración tampoco son un problema, porque puedes simplemente usar las bibliotecas de contratos inteligentes para simular sus propios cambios simplemente simulando la EVM subyacente. Así que el problema es cuando vas y tratas de hacer las pruebas de extremo a extremo completas sin la simulación, porque tienes este proveedor de terceros que necesitas usar para comunicarte con la blockchain y enviar las transacciones, y la mayoría de los frameworks que hacen pruebas de extremo a extremo ahora, no pueden acceder a este plugin. Así que uno de los plugins más usados es MetaMask, como dije, es una cartera de criptomonedas, y necesitas esto para interactuar con la Ethereum blockchain y firmar las claves privadas y hacer el ciclo completo de transacción. Así que sí, fingir estas interacciones de UI es realmente complejo y los frameworks de prueba que tenemos ahora, no soportan estos plugins, incluso cuando se ejecutan en un navegador headless. Así que uno de los enfoques que voy a mostrar después es simplemente simular el WebTree. Pero esto es básicamente lo que es el flujo. Así que el usuario entra e interactúa con el WebTree que interactúa con el MetaMask o el proveedor de terceros. Y luego finalmente, MetaMask es capaz de enviar esta transacción a la Ethereum blockchain y añadir el bloque allí.

Y estas transacciones, son firmadas por un esquema privado, por lo que los marcos de interfaz de usuario, no pueden hacerlo en este momento también. Y uno de los enfoques es usar el simulacro de WebTree. Así que ahora, es una buena práctica de todos modos no usar la integración real de terceros porque tú no deberías depender de esto, porque no tienes control de este tercero. No tienes control del plugin. Así que si se bloquea o si hay un error, podrías necesitar pausar todo tu desarrollo solo porque no puedes probar tu propia aplicación. Un ciclo completo de extremo a extremo.

Entonces, una idea es simular el árbol web y luego hacer lo mismo, enviando transacciones y luego simulando esta parte con la blockchain de Ethereum. Y entonces sí, con la simulación de WebTree puedes resolver el problema firmando las transacciones con una clave privada automáticamente y luego enviándolas a la EVM y a la blockchain de Ethereum. Otro enfoque sería usar este marco llamado Synthress, que es un envoltorio de Cypress IO y tiene soporte para Metamask. Pero sí, el problema de esto, estás atado a usar solo Metamask con esto. Es el único plugin de proveedor de telepatía que soporta en este momento, y necesitas usar Cypress IO también porque es un envoltorio de Cypress IO. Pero como es, puedes elegir entre bloquear la versión de Metamask para que no tengas fallos inesperados, o puedes asegurarte de que Synthress pueda simplemente ejecutar las pruebas pero antes de eso, actualizar el plugin de Metamask para tener el último. Así que puedes decidir lo que quieres hacer, básicamente si quieres bloquear la versión, o si quieres actualizar con el último Metamask antes de ejecutar tus pruebas. Lo cual sería bueno para averiguar, ya sabes, si tu aplicación tiene algún problema con la nueva versión de Metamask. Y puedes usar cualquiera de las otras herramientas de pruebas de extremo a extremo que ya están en el mercado, el único problema es que no tienen algo como Syncpress, no tienen un marco que esté construido encima de ellos, aparte de Cypress.io, solo para hacer la integración con el proveedor de terceros, pero puedes usar la estrategia de simulacro, así que todavía puedes usar, por ejemplo, Taskafar, que también me gusta mucho, puedes usar eso, y luego simular el recorte web. Pero, por supuesto, también tienen desventajas, así que si quieres usar algo diferente de Metamask, puedes usarlo con el simulacro, pero luego si vas con SynQPRESS, lo único que puedes usar es el plugin de Metamask.

Entonces, ahora vamos a ver la primera demostración, que es con el simulacro, así que va a ser Cypress y el simulacro de Web3. Permíteme ir a la otra pantalla... Oops. Solo, lo siento... Este. Sí, esto está en mi GitHub y es solo una bifurcación de otro proyecto, pero puedes ver ya cómo funciona. Así que es simple... Solo necesitas usar yarn start para iniciar una página web de host local, página simple, y luego puedes usar yarn cypress run para ejecutar las tareas. Pero básicamente es solo esta tarea la que envía la transacción. Es realmente rápido así que no puedes verlo correctamente. Pero el primero es solo conectar con Metamask. Puedes ver... Oops. Puedes ver la conexión con el registro y esta es la muestra que crearon.

Entonces puedes ver aquí que se espera tener la dirección de la billetera a la que te conectaste. Luego también estás firmando los mensajes. Y luego necesitas verificar aquí la respuesta de data, si es exactamente lo que esperas y si está realizando las transacciones correctas. Y luego al final, sí, intenta enviar una transacción que enviaste a esta dirección, esta cantidad. Y luego deberías tener... Sí, en este caso, está bien tener este servicio, no puede enviar transacciones, lo cual se esperaba en este caso. Y luego también cerrando sesión, lo cual deberías ser... Es realmente, realmente simple, este, pero al menos puedes ver cómo se hace el simulacro.

Y el otro... Y el otro... Esta es la dirección, así que si quieres echar un vistazo. Y la otra demostración va a ser utilizando la herramienta SyncPress. Entonces puedes ver que estamos usando SyncPress y realmente nos estamos integrando con MetaMask. Así que este simplemente está ejecutando Cypress, y está cargando Cypress, y luego va a cargar las especificaciones, y simplemente se ejecuta de inmediato. Así que este es el plugin de MetaMask. Puedes ver que está comenzando, y no está simulando, así que si vas e instalas el plugin de MetaMask puedes ver que es exactamente así. Y también en la parte superior puedes ver la extensión de Chrome, por lo que es el plugin real. Luego ahora simplemente estaba configurando MetaMask con la importación de la cuenta, y ahora está utilizando el plugin para aceptar la solicitud de conexión y simplemente conectarse a esta cuenta. Y ahora simplemente está creando la red también. Y sí, básicamente esta es otra demostración con SynPress. Es realmente sencillo también, pero está bien mantenido. También puedes verificar en el repositorio oficial de SynPress en GitHub. Tienen otros ejemplos allí si no me equivoco. Pero este es realmente simple y también está en mi repositorio de GitHub, en mi cuenta de GitHub, lo siento.

Y sí, por supuesto los compromisos. Así que tenemos la velocidad de la prueba que necesitamos tener en cuenta. Entonces, cuando usas el simulacro, por supuesto es más rápido que usar el plugin de terceros y esperar a cargar y también la red. Todos los problemas que tienes cuando no estás simulando este proveedor de terceros. Luego tienes la dependencia de la aplicación de terceros cuando estás realizando las pruebas reales de extremo a extremo. Entonces, si algo se bloquea, si hay un error, es posible que necesites simplemente detener o revertir la versión que estabas usando antes del error.

Y es posible que necesites pausar, o si realmente estás testing y quieres asegurarte de que va a funcionar con la última versión. Si hay un error, es posible que necesites esperar hasta que se corrija este error solo para asegurarte de que está bien.

Además, la prueba de extremo a extremo con SyncPress es la prueba del mundo real, por lo que sabes que esto es realmente lo que el usuario va a hacer, no van a simular, por supuesto. Y luego el otro es MockMaintainance, por lo que necesitas preocuparte por eso si estás simulando, solo para mantenerte al día si quieres asegurarte de que lo último funciona con tu aplicación.

Y luego tienes la prueba de la aplicación en aislamiento también, por lo que cuando haces el simulacro, no te importa el estudio de la fiesta, si está funcionando o no, entonces te aseguras de que tu aplicación siempre funciona bien, no necesitas pausar, no necesitas detener tu desarrollo, no necesitas preocuparte por si el estudio de la fiesta debería ser arreglado o algo así. Es una buena práctica de todos modos hacer eso, simular.

Entonces, una cosa que puedes hacer como estrategia es simplemente tener un buen equilibrio entre las tareas de unidad, las tareas de integración para que puedas simular la mayoría de las tareas y luego tener, no sé, quizás el 10% o incluso menos de tareas de extremo a extremo. Así que puedes usar algo, por ejemplo, el framework y automatizar estos 10% o puedes tener algunas tareas exploratorias haciendo el extremo a extremo completo o puedes simplemente tener tareas manuales para eso. Realmente depende de ti, de tu proyecto, de la estrategia que uses, de cuáles son tus necesidades. Pero un buen equilibrio, siempre asegúrate de que está bien, no podemos probar de extremo a extremo con la última versión de la telepatía, pero sabemos que con, ya sabes, la integración está funcionando bien, tenemos todo cubierto, por lo que es más robusto, es más confiable.

Y sí, eso es todo. Gracias. Si quieres conectarte conmigo, ya sabes, en cualquiera de estas redes sociales, no dudes en hacerlo o enviar cualquier pregunta o comentarios. Estoy abierto a estos también. Siempre es bueno mejorar. Así que sí, eso es todo. Gracias.