Our application no longer needs to have HTML markup for every email. In order to guarantee our users are going to get a nice-looking and correct confirmation email, we need to test the entire confirmation flow, and we need to verify the received email using visual testing.
We can see the email preview while designing the template: Previewing the email as it would be seen by the userīecause the template lives in a 3rd party system, it is simple for someone to modify it, and accidentally break the data to markup mapping, leading to bugs such as the missing user name in the greeting bug below: An email that accidentally used a wrong field in the greeting line To send an email, the application needs to provide the confirmation code, the application URL to open, and the user name. If your application is sending HTML emails using a 3rd party service like SendGrid, you might be using "dynamic templates" - meaning your email design is stored on the service, and your application triggers the send by providing the template data.įor example, I have designed the following "Confirmation code" email in SendGrid Dynamic SendGrid template Note: you can find the source code for this blog post in the repository cypress-sendgrid-visual-testing-example, and see the visual snapshots at its Percy page. The post teaches you how to deal with the difficult email markup generated from dynamic templates when doing image comparison. Such verification is necessary to ensure the emails have the expected style, and include the necessary information.
This blog post will teach you how to visually verify the emails sent by a 3rd party service.
0 kommentar(er)
