Test emails with Cypress JS

Javascript

Cypress is an amazing end-to-end testing framework. It's popular, bundles it's own chrome browser and is easily extended.

Cypress let's you test many parts of a website or web application with a browser in an automated way. It's like Selenium but a lot more user friendly.

Testing with real email addresses

Many application use emails for account login and creation. Testing logins with Cypress is easy if you have a designated test user. But what about sign ups?

Email sign up has to be the most important aspect of any application and without access to unique, private email addresses end-to-end testing is difficult.

Luckily there's MailSlurp, a free API that let's you create real, randomized email addresses on demand. It also let's you send and receive email programmatically - perfect for end-to-end testing user sign-up flows!

An example

To demonstrate let's imagine you worked at Twitter (😎) and you wanted to test the user sign up process end to end.

Setup Cypress

To setup make sure you have NodeJS installed then run:

npm install --save cypress

Next create a test spec in with the following folder structure:

cypress
└── integration
    └── example.spec.js

Inside integration/example.spec.js let's write our first test:

Writing a test

Let's start simple and write a test that loads the Twitter sign up screen with Cypress.

That would look a little like this:

describe("Sign up", () => {
  context("Example sign up page", () => {
    it("can load the sign up form", () => {
      cy.visit("https://twitter.com/i/flow/signup");
      cy.contains("Create your account");
    });
  });
});

When we run npx cypress run Cypress loads the Twitter sign up form and asserts thast Create your account is displayed on the page. The output looks like this:

Testing with emails in Cypress

Now let's integrate email address into our test using MailSlurp. MailSlurp requires an api key but it's free for personal use so sign up to get one.

Once you've sign up we can extend Cypress with a command to creates new email address when we need them.

Generate test email accounts in Cypress

To extend Cypress first create a support folder in the cypress directory and place an index.js and a command.js inside it. Like so:

cypress
├── integration
│   └── example.spec.js
└── support
    ├── commands.js
    └── index.js

Inside index.js import the commands.

import './commands'

Now let's set up a command called newEmailAddress inside commands.js that calls MailSlurp and creates an email address on demand.

const { MailSlurp } = require("mailslurp-client");

Cypress.Commands.add("newEmailAddress", () => {
  // instantiate MailSlurp
  const mailslurp = new MailSlurp({ apiKey: Cypress.env("API_KEY") });
  // return { id, emailAddress } or a new randomly generated inbox
  return mailslurp.createInbox();
});

Using our newEmailAddress command

Now that we have a Cypress command that returns a new email address we can put it all together in our sign up test.

describe("Sign up", () => {
  context("Example sign up page", () => {
    it("can generate a new email address to test sign up", () => {
      // get an email address for this test run
      cy.newEmailAddress().then(({ emailAddress }) => {
        // load the twitte rform
        cy.visit("https://twitter.com/i/flow/signup");
        // click to enter email addres
        cy.contains("email instead").click();
        cy.get("input[type=email]").type(emailAddress);
        // assert that email address was entered
        cy.get("input[type=email]").should("contain.value", "@mailslurp.com");
        // submit the form, get the verification code, verify the user (see docs for those examples)
      });
    });
  });
});

Notice that we destructure the returned value from our helper command.

cy.newEmailAddress().then(({ emailAddress }) => {
  /* do stuff */
});

Results

Now we can run our tests again and pass in a MailSlurp api key.

npx CYPRESS_API_KEY=your-api-key cypress run

Cypress loads our login screen and enters a real address that was generated with MailSlurp.

Next Steps

The next steps would be to submit the form, fetch the verification code sent to the email address using MailSlurp and verify the account.

That's right MailSlurp let's you receive email verification codes inside tests so you can sign up and verify the users end-to-end.

This means truly testing your app's most important processes like user sign up and email verification.

For more information on receiving emails in tests see the developers sections.

Code Samples

As always you can find this and other examples in the MailSlurp examples repository. Use MailSlurp free and take your end-to-end test coverage to 💯 !