Cypress JS is a powerful browser testing tool, like Selenium and Playwright, that can be used to test applications end to end. But did you know it can also test email received events that take place during application sign up and login? In this post we will demonstrate how to setup Cypress automated email testing in your test suite and how to use it when testing application sign up and login.
What is Cypress JS?
CypressJS is a popular browser automation tool that can be used to test web apps end-to-end. Most web-apps send emails containing OTP/one time passwords allow users to sign-up and log into an application. We can use a free email testing platform like MailSlurp to create disposable test email accounts during testing and receive emails in code and verify their results or extract login codes.
Email testing setup
In order to test email received actions with Cypress we should generate throwaway email accounts during each test run and then wait for the email to arrive. For this we can use MailSlurp's free plans with the Cypress email plugin. Let's see how it all fits together with an example.
Example email testing scenario
Say we have an application that allows users to create an account using a form. This form requires the user verify their email address by receiving a code and entered it into the form. This code is an OTP one-time password in a way and verifies a user's email address by sending a random code to the user that must be presented back to the server.
Create a new NodeJS project
CypressJS is a Node package so we can install CypressJS and MailSlurp like so:
Your should look something like this:
Next we need to configure the plugin with our MailSlurp API Key. This allows us to authenticate with the MailSlurp mailserver when creating inboxes.
Environment variable
You can configure the api key in Mac/Linux environments using the environment variable.
For Windows environments:
Create email addresses during testing
To create an email address for each test use the MailSlurp plugin method:
Filling a form
Say we have an application with a form like this:
We can load the application using Cypress using code below:
Receiving emails in code
To test email received events in CypressJS use the wait for methods like so:
More examples
There are many ways to configure and test if an email is received in CypressJs using MailSlurp. Check out the following links for more information: