MailSlurp Cypress Plugin
Official MailSlurp email plugin for Cypress JS. Create real test email accounts. Send and receive emails and attachments in Cypress tests. For more advanced usage see the standard MailSlurp library.
Install
npm install --save-dev cypress-mailslurp
Then include the plugin in your cypress/support/index.{js,ts}
file.
import "cypress-mailslurp";
See the example project for setup help.
Setup
MailSlurp is free but requires an API Key. Get yours by creating a free account.
API Key
Set the environment variable CYPRESS_MAILSLURP_API_KEY
or use the cypress.json
file env
property:
Environment variable
CYPRESS_MAILSLURP_API_KEY=your-api-key cypress run
Cypress env property
{
"env": {
"MAILSLURP_API_KEY": "your-mailslurp-api-key"
}
}
Timeouts
MailSlurp requires timeouts to wait for inbound emails. Set timeouts in cypress.json
:
{
"defaultCommandTimeout": 30000,
"responseTimeout": 30000,
"requestTimeout": 30000
}
Typescript support
MailSlurp adds the mailslurp
command to the Cypress cy
object. Include the type definition reference comment in your test file or support index.ts:
Or define the type yourself like so:
import { MailSlurp } from "mailslurp-client";
declare global {
namespace Cypress {
interface Chainable {
mailslurp: () => Promise<MailSlurp>;
}
}
}
Usage
The Cypress MailSlurp plugin provide one simple command attached to the Cypress object: cy.mailslurp()
. This method returns a MailSlurp client instance that has all the same methods and properties as the official MailSlurp client. Use the command with the then()
method to access the instance:
cy.mailslurp().then(mailslurp => mailslurp.createInbox() )
Common methods
The client chained by the cy.mailslurp()
has all the same methods and properties as the official MailSlurp client. See the Javascript documentation for a full API reference or see the examples below.
The MailSlurp client has a number of convenience methods and also exposes the full MailSlurp API as controllers. See the class reference for full method documentation.
Create email address
You can create test email accounts with MailSlurp by creating inboxes. Inboxes have an id
and an emailAddress
. Save the id
for later use when fetching or sending emails.
cy.mailslurp()
.then(mailslurp => mailslurp.createInbox())
.then(inbox => expect(inbox.emailAddress).to.contain("@mailslurp"));
Receive emails in tests
Use the waitFor
methods to wait for emails for an inbox. See the email object docs for full properties.
cy.mailslurp()
.then(mailslurp => mailslurp.waitForLatestEmail(undefined,undefined,inboxId,undefined,undefined, 30000, true))
.then(email => expect(email.subject).to.contain("My email"))
Send emails
To send emails in Cypress tests first create an inbox then use the sendEmail
method.
cy.mailslurp()
.then(mailslurp => mailslurp.sendEmail(inboxId, { to: ['test@example.com'], subject: 'test', body: '<html></html>', isHTML: true }))
Accessing more methods
To access all the MailSlurp methods available in the REST API and Javascript Client use the controllers on the mailslurp instance.
cy.mailslurp().then(mailslurp => mailslurp.attachmentController.uploadAttachment({
base64Contents: fileBase64Encoded,
contentType: 'text/plain',
filename: basename(pathToAttachment)
}))
Storing values between tests
Cypress has a unique async nature. To use MailSlurp effectively with Cypress chain your commands using then()
or store results in wrapped aliases using wrap()
and as()
.
before(function () {
return cy.mailslurp()
.then(mailslurp => mailslurp.createInbox())
.then(inbox => {
cy.wrap(inbox.id).as('inboxId')
cy.wrap(inbox.emailAddress).as('emailAddress')
})
});
it("01 - can load the demo application", function () {
expect(this.emailAddress).to.contain("@mailslurp");
cy.visit("https://playground.mailslurp.com")
cy.title().should('contain', 'React App');
});
Note: using wrap
to store values accross test methods requires you to use function
syntax instead of () =>
arrow syntax. This ensure that this
is dynamically scoped and includes the aliased variables.
Example test
Here is an example of testing user sign up on a demo application hosted at playground.mailslurp.com.
It creates a new MailSlurp inbox before all tests and saves the inbox.id
and inbox.emailAddress
to a shared text context using the cy.wrap().as()
methods.
It then loads the demo application, fills out a sign up form using the email address and receives a user confirmation code.
We wait for the email to arrive using the waitForLatestEmail
method and then extract a confirmation code that can be submitted to the app to confirm the user.
describe("user sign up test with mailslurp plugin", function () {
before(function () {
return cy.mailslurp()
.then(mailslurp => mailslurp.createInbox())
.then(inbox => {
cy.wrap(inbox.id).as('inboxId')
cy.wrap(inbox.emailAddress).as('emailAddress')
})
});
it("01 - can load the demo application", function () {
expect(this.emailAddress).to.contain("@mailslurp");
cy.visit("https://playground.mailslurp.com")
cy.title().should('contain', 'React App');
});
it("02 - can sign up using email address", function () {
cy.get("[data-test=sign-in-create-account-link]").click()
cy.get("[name=email]").type(this.emailAddress).trigger('change');
cy.get("[name=password]").type('test-password').trigger('change');
cy.get("[data-test=sign-up-create-account-button]").click();
});
it("03 - can receive confirmation code by email", function () {
cy.mailslurp()
.then(mailslurp => mailslurp.waitForLatestEmail(undefined,undefined,this.inboxId,undefined,undefined,30000, true))
.then(email => /.*verification code is (\d{6}).*/.exec(email.body!!)!![1])
.then(code => {
cy.get("[name=code]").type(code).trigger('change');
cy.get("[data-test=confirm-sign-up-confirm-button]").click();
})
});
it("04 - can sign in with confirmed account", function () {
cy.get("[data-test=username-input]").type(this.emailAddress).trigger('change');
cy.get("[data-test=sign-in-password-input]").type('test-password').trigger('change');
cy.get("[data-test=sign-in-sign-in-button]").click();
});
it("05 - can see welcome screen", function () {
cy.get("h1").should("contain", "Welcome");
});
});