Send and Receive Email in Cypress JS
End-to-end testing with real email addresses. Unlimited test email accounts for applications or tests. Free for personal use!
Edit: since originally publish we made a new guide with detailed examples!
About
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.
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
Originally published at https://www.mailslurp.com.