Back to Blog page
Test emails with Cypress.io
We will be discussing a topic that has been talked about when it comes to E2E testing. It's vital to cover complete E2E testing, even if the user receives an email confirmation.
Pirasanthan Jesugeevegan
Apr 7, 2022• 2 min read
Introduction
We will be discussing a topic that has been talked about when it comes to E2E testing. It's vital to cover complete E2E testing, even if the user receives an email confirmation.
In this example, we will be looking at the forgot password feature on tes.com.
We will automate a test case to verify that the user receives an email to reset their password. We will be checking elements such as the From, Subject, and Body of the email.
The good news is that MailSlurp is a free API that lets you create real, randomized email addresses on demand. It also lets you send and receive email programmatically
Prerequisites
- Make sure you have NodeJS installed
- Create a free account with MailSlurp
- Create an Inbox to get an email & Inbox ID (save it for later)
Setup Cypress
Step 1: Install Cypress
Move to your directory
cd /your/project/pathInstall Cypress
npm install cypress --save-dev
Step 2: Opening Cypress
npx cypress openThis will generate the cypress folder where we can create a spec file
Step 3: Integrate MailSlurp
Install package
npm install --save-dev cypress-mailslurpThen include the plugin in your cypress/support/index.js file.
/// <reference types="cypress-mailslurp" />
import "cypress-mailslurp";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" } }Then, we will set defaultCommandTimeout and requestTimeout to 30 seconds, allowing our tests enough time to wait for emails to arrive. We will also modify the Cypress browser's viewport dimensions.
{
"defaultCommandTimeout": 30000,
"requestTimeout": 30000,
"viewportWidth": 1920,
"viewportHeight": 1080,
}Step 4: Create a Spec file
Next, create a test spec in with the following folder structure:
cypress
└── integration
└── example.spec.jslet's write our first test in the above directory:
describe('Sign up', () => {
context('Example sign up page', () => {
it('can load the sign up form', () => {
cy.visit('https://www.tes.com/');
cy.contains('School Portal').click();
cy.get('.t-switch-form').click();
cy.get('.margin-bottom-md > .t-switch-form').click();
cy.get('#auth-identification')
.wait(500)
.type('emailAddress');
cy.get('.tes-btn').click();
cy.mailslurp()
.then((mailslurp) =>
mailslurp.waitForLatestEmail(
'inboxId',
30000,
true
)
)
.then((email) => {
expect(email.subject).to.contain('Tes Password Reset');
});
});
});
});Note - Replace emailAddress & inboxId with your mailslurp inbox id and email address
Common methods
Receive emails in tests
cy.mailslurp()
.then(mailslurp => mailslurp.waitForLatestEmail(inboxId, 30000, true))
.then(email => expect(email.subject).to.contain("My email"))Send emails
cy.mailslurp()
.then(mailslurp => mailslurp.sendEmail(inboxId, { to: ['test@example.com'], subject: 'test', body: '<html></html>', isHTML: true }))Cypress
Mailslurp