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:

cypress forms

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: