How to test that an email is received using Cypress JS.

Use Cypress JS to test emails are received and validated during end-to-end testing.

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:

npm install --save cypress cypress-mailslurp

Your package.json should look something like this:

{
  "name": "javascript-cypress-mailslurp-plugin",
  "version": "1.0.0",
  "description": "Example cypress-mailslurp plugin usage",
  "scripts": {
    "test": "cypress run",
    "dev": "cypress open"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "cypress": "^10.5.0",
    "cypress-mailslurp": "^1.5.0",
    "typescript": "^4.4.4"
  },
  "devDependencies": {
    "debug": "^4.3.2"
  }
}

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 CYPRESS_MAILSLURP_API_KEY environment variable.

CYPRESS_MAILSLURP_API_KEY=your-api-key cypress run

For Windows environments:

$env:CYPRESS_MAILSLURP_API_KEY=your-api-key; cypress run;

Create email addresses during testing

To create an email address for each test use the MailSlurp plugin createInbox method:

// use cypress-mailslurp plugin to create an email address before test
before(function () {
    cy.log("Wrap inbox before test")
    return cy.mailslurp()
        .then(mailslurp => mailslurp.createInbox())
        .then(inbox => {
            cy.log(`Inbox id ${inbox.id}`)
            // save inbox id and email address to this (make sure you use function and not arrow syntax)
            cy.wrap(inbox.id).as('inboxId')
            cy.wrap(inbox.emailAddress).as('emailAddress')
        })
});

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:

// use function instead of arrow syntax to access aliased values on this
it("02 - can sign up using email address", function () {
    // click sign up and fill out the form
    cy.get("[data-test=sign-in-create-account-link]").click()
    // use the email address and a test password
    cy.get("[name=email]").type(this.emailAddress).trigger('change');
    cy.get("[name=password]").type('test-password').trigger('change');
    // click the submit button
    cy.get("[data-test=sign-up-create-account-button]").click();
});

Receiving emails in code

To test email received events in CypressJS use the wait for methods like so:

it("03 - can receive confirmation code by email", function () {
    // app will send user an email containing a code, use mailslurp to wait for the latest email
    cy.mailslurp()
        // use inbox id and a timeout of 30 seconds
        .then(mailslurp => mailslurp.waitForLatestEmail(this.inboxId, 30000, true))
        // extract the confirmation code from the email body
        .then(email => /.*verification code is (\d{6}).*/.exec(email.body!!)!![1])
        // fill out the confirmation form and submit
        .then(code => {
            cy.get("[name=code]").type(code).trigger('change');
            cy.get("[data-test=confirm-sign-up-confirm-button]").click();
        })
});

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:

Related content

Golang email library for sending and reading emails

Golang Email Library for sending and receiving emails in Go over SMTP or HTTP/S.

NodeJS MailSlurp SDK

Nodemailer alternatives to send and receieve email in code and tests

Email for testing

Test email accounts for email testing. Alternatives to Mailinator, MailTrap, Mailosaur and more.

The best test email tools compared

How to test transactional email campaigns and email verification using the best free and paid tools.

How to wait for Selenium to start during Codeception tests

Example tutorial for how to wait until webdriver and Selenium have started during Codeception PHP tests

How to test that an email is received using Cypress JS.

Use Cypress JS to test emails are received and validated during end-to-end testing.

Email API for email marketing and more

APIs for email marketing and social campaign testing. Send, receive, validate and test emails in code and online.

How to test an email address

Test email accounts for testing email addresses in code or online. Create fake email accounts for testing.

How to start selenium in a background process and wait for it to start

Spawn Selenium server process before tests start for easier acceptance testing.

The ultimate guide to email testing tools

The ultimate guide to email testing tools

CypressJS Example

Test email sign-up, password verification and more with Cypress JS and MailSlurp. Capture OTP magic links and test auth flows end-to-end.

CypressJS Email Testing

Use real email accounts in CypressJS to test user sign-up, email verification, and more.

Golang mail Library (SMTP)

How to send and receive emails in Go (test email addresses).

Java JVM Examples

Test email sending and receive emails without a mail server.

TestNG Selenium Java Example

Testing user sign up in Java using TestNG and MailSlurp test email accounts

Codeception PHP acceptance testing using real email address APIs

Write acceptance tests in PHP with real email addresses using Codeception and MailSlurp

PHP Email Test Plugins: send and receive email in PHPUnit (example code)

How to send and receive emails in PHPUnit tests.

PyTest Email Testing

Send and receive email in Pytest Python tests.

Java, Selenium

Receive emails in Java test suites using MailSlurp, Junit, and Selenium.

Receive email in PHP: using MailSlurp to send and receive emails

Test email in PHP using real email addresses

Python Robot Framework email test

Python automation email testing Robotframework plugin

Testing authentication using real email addresses in Ruby with Capybara, Cucumber, and Selenium

Cucumber example project using Capybara to test user authentication using real email addresses.

Test applications with real emails using Serenity BDD, JBehave and Selenium

Email acceptance testing with Serenity and MailSlurp. Test applications with real email addresses.

Specflow user sign-up testing with MailSlurp accounts

How to test .NET authentication and sign-up using real email accounts with MailSlurp and SpecFlow.

Jest, Puppeteer

Test email accounts in React with Jest and Puppeteer. Send and receive emails in Javascript.

.NET Selenium C#

Send and receive email in DotNET Nunit tests using Selenium and MailSlurp.

Cucumber, Ruby

Generate test email accounts with Ruby and Cucumber. Test email sign-up, password verification and more.

Webdriver, JS, WDIO

Test email related processes like sign-up and verification using WDIO WebDriver and MailSlurp.

TestCafe end-to-end MFA testing for user sign-up and email verification

End-to-end testing with MailSlurp, NodeJS, and TestCafe.

Testing guide

Integration testing with disposable email accounts using CypressJS, Selenium and many other frameworks. Test OTP password login, transactional emails, notifications and more.

How To Test Emails Before You Send

There are many free tools to test emails before sending. This can help prevent spam warnings and increase deliverability.

Testing OTP password link username and password for 2 factor authentication (2FA)

Testing OTP password link username and password for 2 factor authentication (2FA)

Test email address

Free test email address for testing emails online with web dashboard or REST API.

How to test 2FA OTP login using SMS codes with Playwright

The ultimate guide to testing OAuth one-time-password flows with real SMS MFA. Use Playwright to automate authentication tests with programmable TXT message APIs.

Testing email with Cypress test email accounts

Test email accounts for CypressJS. End-to-end testing with real email addresses using MailSlurp Cypress plugin.

Testing Webhooks

How to test HTTP webhooks using MailSlurp test hooks.

Testing Email with Cypress JS and MailSlurp

Email testing with Cypress JS

Ready to dive in?Start building email applications today.