Prueba del Servicio de Correo con Playwright

Rate this content
Bookmark

Enviamos correos electrónicos a nuestros usuarios - verificación de cuenta y boletines informativos. Permitimos que el usuario nos contacte enviando un correo electrónico a través de un formulario incorporado. ¿Lo hacemos? ¿Recibe el usuario un correo electrónico de verificación de cuenta o exactamente la notificación para la que se inscribió? Podemos cubrir esta funcionalidad como parte de las pruebas E2E: obtener un correo electrónico y abrirlo para verificar qué contiene. Necesitaremos Playwright y un servidor SMTP falso para capturar los correos electrónicos enviados por la aplicación.

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

FAQ

Playwright es una herramienta que permite realizar pruebas de extremo a extremo en aplicaciones web. Se utiliza para probar correos electrónicos asegurándose de que los enlaces y botones funcionen correctamente y que el contenido del correo coincida con el diseño esperado. Playwright puede simular acciones del usuario como hacer clic en enlaces y verificar el contenido de las páginas web renderizadas a partir de correos electrónicos.

Un servidor SMTP falso es un contenedor utilizado en entornos de prueba para capturar y almacenar correos electrónicos enviados por la aplicación. Esto permite acceder a los correos electrónicos sin enviarlos a un servidor real, facilitando la verificación manual y automatizada del contenido y la funcionalidad del correo electrónico.

En la charla se mencionan varios proveedores de servicios de correo electrónico, incluidos Amazon SES, MailChimp, Postmark y SendGrid. Estos servicios son utilizados por las aplicaciones para manejar el envío de correos electrónicos a los usuarios.

Playwright ayuda a verificar la funcionalidad de los correos electrónicos permitiendo que los testers simulen la interacción del usuario con el contenido del correo electrónico, como hacer clic en botones y enlaces, y verificar que estas acciones redirigen a las URLs correctas. También permite hacer afirmaciones sobre el contenido y estilo del correo.

Junto con Playwright, se utilizan herramientas como Mailhook para capturar correos electrónicos en un servidor SMTP falso y herramientas como Thunder Client para realizar pruebas manuales de APIs y visualizar respuestas de correos electrónicos.

Los 'fixtures' en Playwright se utilizan para definir configuraciones y contextos aislados que se aplicarán en pruebas específicas. Estos pueden incluir valores de URL base, encabezados HTTP y otros parámetros necesarios para realizar pruebas de endpoint específicas, como las pruebas de API de correo electrónico en entornos controlados.

Kat Kmiotek
Kat Kmiotek
17 min
03 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute cómo probar el servicio de correo con Playwright, cubriendo la verificación de correo electrónico, el viaje del usuario para restablecer la contraseña y más. Explora el uso de proveedores de terceros para la entrega confiable de correos electrónicos y demuestra cómo Playwright puede ayudar a realizar comprobaciones en el contenido del correo electrónico. La charla también introduce el concepto de un servidor SMTP falso y muestra cómo se pueden usar los accesorios para acceder al servidor SMTP y realizar afirmaciones en el cuerpo HTML de los correos electrónicos. La función de renderizado HTML de Playwright permite interactuar con el contenido del correo electrónico como si fuera una página web regular. Destaca la capacidad de renderizar HTML a partir de llamadas API, realizar afirmaciones en la página renderizada y excluir datos generados dinámicamente de las pruebas de regresión visual.

1. Prueba del servicio de correo con Playwright

Short description:

En esta charla, les mostraré cómo probar el servicio de correo con Playwright. Cubriremos la verificación de correo electrónico, el recorrido del usuario para restablecer la contraseña y más. Al usar proveedores de terceros como Amazon SES, MailChimp, Postmark o SendGrid, podemos garantizar una entrega de correo electrónico confiable. Sin embargo, el problema radica en lo que se entrega al usuario. Hoy, demostraré cómo Playwright puede ayudar a realizar controles en el contenido del correo electrónico y garantizar una experiencia de usuario fluida. Además, presentaré el concepto de un servidor SMTP falso, que captura y almacena correos electrónicos en un entorno de prueba. Herramientas como Mailhug proporcionan una interfaz fácil de usar para la verificación manual y una documentación de API completa.

Hola a todos, mi nombre es Kat Kniotek, trabajo como ingeniera de calidad en Zoopla, y gracias por unirse a mi charla hoy. Estaré hablando sobre testing el servicio de correo con Playwright. Les mostraré lo fácil que es agregar la verificación de correo electrónico o el recorrido del usuario para restablecer la contraseña a sus pruebas de extremo a extremo. Y sinceramente, me gusta mucho lo ingenioso que puedes ser aquí con Playwright. Así que comencemos.

Dependiendo de la aplicación en la que estés trabajando, puedes o no puedes comunicarte con el usuario por correo electrónico. Pero si lo haces, les enviarías boletines informativos, confirmaciones de pedidos. Si trabajas en el sitio web de e-commerce, enlace para restablecer la contraseña si la acción es solicitada por el usuario, solicitud de verificación de correo electrónico y cualquier tipo de recibos o notificaciones que puedan solicitar. Y generalmente usas proveedores de terceros para manejar esto, pueden transportarlo por ti. Y esos serían Amazon SES, MailChimp, Postmark y SendGrid, solo por nombrar algunos. Y es una muy buena idea porque podemos confiar en ellos para asegurarnos de que el correo electrónico se entregue realmente. Pero la declaración del problema de esta charla es lo que se entrega al usuario. ¿Pueden hacer clic en el enlace y restablecer su contraseña? ¿El correo electrónico de verificación realmente los lleva al dominio correcto? Si el contenido del cuerpo del correo electrónico realmente coincide con nuestro sistema de design, y por supuesto, si por error, no enviamos ningún data sensible o cualquier data aleatorio como esta prueba como asunto del correo electrónico. Así que hoy, les mostraré cómo se pueden realizar todas esas verificaciones con la ayuda de Playwright. Así que comencemos. Entonces, para describir la comunicación por correo electrónico en una aplicación de producción, tendrás la aplicación comunicándose con el servicio de terceros, y el servicio de terceros será responsable de entregar los correos electrónicos al usuario o a los grupos de usuarios. En un entorno de prueba para esta demostración, en lugar de enviar solicitudes al servicio de terceros, estaremos enviando correos electrónicos a un servicio SMTP falso y desde allí, podremos acceder a data desde las pruebas de Playwright. OK, acabo de introducir algo nuevo, un servidor SMTP falso, ¿qué es eso? Puedes pensar en ello como un contenedor que estará capturando y almacenando todos los correos electrónicos enviados por la aplicación en un entorno de prueba. Y para este propósito, puedes elegir una de las muchas herramientas disponibles. Aquí solo he enumerado algunas. Algunas de ellas son de pago y algunas de ellas son de código abierto. Depende de ti cuál usarás. Para esta demostración, estoy usando Mailhug. Todos ellos suelen venir con una interfaz de usuario gráfica muy agradable que puedes acceder en tu navegador que se ve exactamente como el buzón. Puedes navegar por los correos electrónicos, puedes eliminar correos electrónicos, almacenar archivos adjuntos o reenviar correos electrónicos. Es genial para la verificación manual de lo que se envía al usuario. Ese tipo de servidor SMTP falso también vendrá con una gran documentation sobre su API. Así que con Swagger. Swagger enumeraría todos los puntos finales disponibles en el servicio con los métodos que están disponibles y cómo debería verse la carga útil

2. Integrando la API de Mailhook con las pruebas de Playwright

Short description:

Aquí está el ejemplo de llamada a la API de Mailhook, consultando los correos electrónicos enviados al usuario de prueba. La respuesta incluye el estado, el número de correos electrónicos enviados y los objetos de correo electrónico con ID, de, para, contenido y cuerpo. Podemos realizar afirmaciones sobre el contenido del correo electrónico, incluyendo la comprobación de cadenas específicas, elementos y estilos. Para traducir esta prueba de API a las pruebas de Playwright, necesitamos acceder al servidor SMTP, recuperar el correo electrónico más reciente y realizar afirmaciones sobre el cuerpo HTML. La función de renderizado HTML de Playwright nos permite interactuar con el contenido del correo electrónico como si fuera una página web regular. Podemos hacer clic en enlaces, comprobar elementos y verificar URLs. Para empezar, accederemos al servidor SMTP desde nuestras pruebas de extremo a extremo utilizando fixtures, que proporcionan contextos aislados con configuraciones separadas.

como y qué esperas ver como respuesta de la llamada API al servidor. Aquí está la captura de pantalla del ejemplo de llamada a la API de Mailhook. Así que como punto de búsqueda estoy consultando aquí. Basado en su documentation, proporcioné parámetros de consulta para obtener todos los correos electrónicos que han sido enviados al usuario de prueba en example.com y en el lado derecho, puedes ver cómo se ve la respuesta. Tan bueno, porque el estado es 200. Y luego puedes ver cuántos correos electrónicos han sido enviados a este usuario, así que el punto final del servicio devuelve tres. Brillante, porque estaba solo testing un poco. Y todos ellos están listados como objetos de correo electrónico en el array de items, así en la línea cinco, y cada objeto de correo electrónico individual tendría ID, de, para, contenido y cuerpo. Y si miras más de cerca, debajo de la línea 34, bueno, desde la línea 34, puedes ver que el cuerpo es en realidad cuerpo HTML, código HTML. Así que de nuevo, aquí también podemos hacer algunas afirmaciones. Podemos comprobar si ciertas cadenas están presentes, si ciertos elementos están presentes, digamos un botón o un enlace, pero también verificar si se ha aplicado el estilo, ¿verdad? Sólo para mencionar, estoy usando Thunder Client aquí. Así que, herramientas similares a Postman o Insomnia, si estás familiarizado con ellas. Bueno, así que, un servidor SMTP falso viene con algunas características agradables que permiten la testing manual, pero usaremos el mismo servidor SMTP en nuestras pruebas de Playwright, así que veamos cómo traducir lo que acabo de mostrar con, digamos, la testing de API a las pruebas de Playwright. Empecemos con la codificación pseudo, ¿qué queremos hacer? Así que, primero, nuestra prueba necesitará tener una precondición y eso depende de tu aplicación. Eso podría ser la acción que desencadena el envío de la verificación por correo electrónico. Digamos, el usuario crea la cuenta o el usuario completa el pedido y se envía la confirmación del pedido y así sucesivamente. Como no estoy conectando a ninguna aplicación real aquí, era sólo un script que desencadena el envío de correo electrónico. Bueno, así que ¿en qué queremos centrarnos en la prueba? Queremos hacer exactamente lo que hice manualmente con la conexión al servidor SMTP. Así que, quiero acceder al servidor SMTP, quiero obtener el correo electrónico más reciente que ha sido enviado al usuario. Así que, en una respuesta había un array de items, así que quiero obtener el primer elemento de él, así con el índice cero. Y quiero obtener una parte del cuerpo HTML, porque ahí es donde quiero hacer afirmaciones. Y la gran característica mágica de Playwright, puedes usar este cuerpo HTML para renderizar una nueva página y hacer las mismas afirmaciones que harías en una página regular en un navegador. Así que, puedes hacer clic en el botón de verificación, puedes comprobar si ciertos elementos están presentes y también puedes verificar si al hacer clic en el botón de verificación, se abrirá una nueva pestaña y puedes hacer una afirmación si la nueva pestaña que es también página, tendrá la URL esperada. Bueno, así que, eso es mucho que hacer. Así que, ¿por dónde empezar? Empezaré accediendo al servidor SMTP desde mis pruebas de extremo a extremo. Y para este propósito, estaré usando fixtures. ¿Qué son los fixtures? Así que, probablemente en tu aplicación, tienes Configuración de Playwright. Bueno, en tus pruebas de extremo a extremo, tienes Configuración de Playwright y especificas el valor de la URL base allí. Y eso sería el frente de tu aplicación cliente code, la URL base de tus viejas pruebas. Pero también puedes especificar fixtures, así como contextos aislados que se utilizarán en una cierta prueba. Así que, aquí estoy creando el fixture llamado email API

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

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
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.
Haciendo JavaScript en WebAssembly Rápido
JSNation Live 2021JSNation Live 2021
29 min
Haciendo JavaScript en WebAssembly Rápido
Top Content
WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.
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.

Workshops on related topic

Master Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Master Patrones de JavaScript
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante este masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debe conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final del masterclass, los participantes ganarán confianza en su capacidad para escribir código JavaScript de alta calidad que perdure en el tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento profesional y las oportunidades de avance en la industria del software
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
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
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
React Day Berlin 2022React Day Berlin 2022
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.
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.
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
React Day Berlin 2023React Day Berlin 2023
149 min
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
Workshop
Maurice de Beijer
Maurice de Beijer
¡Prepárate para potenciar tus habilidades de desarrollo web con los Componentes del Servidor React! En esta inmersiva masterclass de 3 horas, desbloquearemos el potencial completo de esta tecnología revolucionaria y exploraremos cómo está transformando la forma en que los desarrolladores construyen aplicaciones web rápidas y eficientes.
Únete a nosotros mientras nos adentramos en el emocionante mundo de los Componentes del Servidor React, que combinan sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y una experiencia de usuario inigualables. Obtendrás experiencia práctica a través de ejercicios prácticos, ejemplos del mundo real y orientación experta sobre cómo aprovechar el poder de los Componentes del Servidor en tus propios proyectos.
A lo largo de la masterclass, cubriremos temas esenciales, incluyendo:- Entender las diferencias entre los Componentes del Servidor y del Cliente- Implementar Componentes del Servidor para optimizar la obtención de datos y reducir el tamaño del paquete JavaScript- Integrar Componentes del Servidor y del Cliente para una experiencia de usuario fluida- Estrategias para pasar datos efectivamente entre componentes y gestionar el estado- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de los Componentes del Servidor React