Cypress JS Email Plugin —how to test with real email addresses! 🚀

How to send and receive emails in Cypress integration tests using Javascript and the free MailSlurp library.

What is Cypress Js?

An example login form being tested with Cypress.

Testing with real email addresses

An example

Setup Cypress

{
"dependencies": {
"cypress": "^4.4.1",
"mailslurp-client": "^8.7.8"
}
}
{
"defaultCommandTimeout": 30000,
"requestTimeout": 30000,
"viewportHeight": 800,
"viewportWidth": 800,
"env": {
"API_KEY": "put-your-mailslurp-key-here"
}
}

Setup MailSlurp

cypress 
└── support
└── commands.js
└── index.js
// cypress/support/index.js
import "./commands";
// cypress/support/commands.js
const { MailSlurp } = require("mailslurp-client");

const apiKey = "YOUR_MAILSLURP_API_KEY";// or Cypress.env("API_KEY")
const mailslurp = new MailSlurp({ apiKey });
Cypress.Commands.add("createInbox", () => {
return mailslurp.createInbox();
});

Cypress.Commands.add("waitForLatestEmail", inboxId => {
return mailslurp.waitForLatestEmail(inboxId);
});
cy.createInbox().then(inbox => {
console.log(inbox);
// { id: '...', emailAddress: '...' }
});
cy.waitForLatestEmail(inbox.id).then(email => {
console.log(email);
// { subject: '...', body: '...' }
});

Create test structure

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

Writing a test

describe("Sign up", () => {
it("can load oauth demo site", () => {
cy.visit("https://playground.mailslurp.com");
cy.contains("Sign in to your account");
});
});
it("can click sign up link", () => {
cy.get('[data-test="sign-in-create-account-link"]').click();
cy.contains("Testable Sign Up Form");
});
describe("Sign up", () => {
it("can load oauth demo site", () => {
cy.visit("https://playground.mailslurp.com");
cy.contains("Sign in to your account");
});

it("can click sign up link", () => {
cy.get('[data-test="sign-in-create-account-link"]').click();
cy.contains("Testable Sign Up Form");
});
});

Running tests

Testing with emails in Cypress

Generate test email accounts in Cypress

cypress 
├── integration
│ └── example.spec.js
└── support
├── commands.js
└── index.js
import './commands'
const { MailSlurp } = require("mailslurp-client");

Cypress.Commands.add("createInbox", () => {
// 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 createInbox command

const password = "test-password";
let inboxId;
let emailAddress;

it("can generate a new email address and sign up", () => {
// see commands.js custom commands
cy.createInbox().then(inbox => {
// verify a new inbox was created
assert.isDefined(inbox);

// save the inboxId for later checking the emails
inboxId = inbox.id;
emailAddress = inbox.emailAddress;

// sign up with inbox email address and the password
cy.get("input[name=email]").type(emailAddress);
cy.get("input[name=password]").type(password);
cy.get('[data-test="sign-up-create-account-button"]').click();
});
});
cy.newEmailAddress().then(({ emailAddress }) => {
/* do stuff */
});

Receive confirmation email

let code;
it("can receive the confirmation email and extract the code", () => {
// wait for an email in the inbox
cy.waitForLatestEmail(inboxId).then(email => {
// verify we received an email
assert.isDefined(email);

// verify that email contains the code
assert.strictEqual(/verification code is/.test(email.body), true);

// extract the confirmation code (so we can confirm the user)
code = /([0-9]{6})$/.exec(email.body)[1];
});
});

Confirm the user

let code;
it("can receive the confirmation email and extract the code", () => {
// wait for an email in the inbox
cy.waitForLatestEmail(inboxId).then(email => {
// verify we received an email
assert.isDefined(email);

// verify that email contains the code
assert.strictEqual(/verification code is/.test(email.body), true);

// extract the confirmation code (so we can confirm the user)
code = /([0-9]{6})$/.exec(email.body)[1];
});
});
it("can log in with confirmed account", () => {
cy.contains("Sign in to your account");
// fill out username (email) and password
cy.get('[data-test="username-input"]').type(emailAddress);
cy.get('[data-test="sign-in-password-input"]').type(password);
// submit
cy.get('[data-test="sign-in-sign-in-button"]').click();
});
it("shows the successful greeting", () => {
cy.contains("Welcome");
});

Next Steps

Code Samples

Test Email API for end-to-end with real email addresses. Support for NodeJS, PHP, Python, Ruby, Java, C# and more. See https://www.mailslurp.com for details.