Automated email validation using MailSlurp

Background

Email is a key component of most modern applications. It identifies users, let’s them sign-up and login, reset passwords and confirm their accounts. Email is important but, strangely, testing processes that rely on email end-to-end can be difficult.

Today, we are going to take an example of reset password journey and do a small POC on the same.

Tech stack

• Testcafe [For UI automation]
• MailSlurp API

How does MailSlurp work

Let’s set up the MailSlurp Account

A free account can be simply created here.

Once your account is created, an API key would be generated for integration purposes.

Create an inbox from where you can send/receive emails

Once this step is done, you can see the generated inbox under Inboxes section.

The email that got generated will be in the format of inbox_id@mailslurp.com.

Keep this Inbox ID safe for further integration.

Let’s integrate this into our E2E tests

The package that is required for this integration is mailslurp-client

Step 1: Install this package

npm install mailslurp-client
yarn add mailslurp-client

Step 2: Import the package

import { MailSlurp } from 'mailslurp-client';

Step 3: Instantiate the client

To do this, we just need to call the constructor of class MailSlurp with your apiKey which is a required config param.

const apiKey = `ce970af4g3463aag4e5532aee13bhjv207dc592556963z`;
const mailslurp = new MailSlurp({ apiKey: `${apiKey}` });

Step 4: Wait for the latest mail to reach your inbox

To do this, we have a simple method called waitForLatestEmail of class MailSlurp which has three optional parameters

• inboxId?: string
• timeout?: number
• unreadOnly?: boolean

For our example, just inboxId would do the trick.

const inboxId = `f17le00c-12fg-478e-bff8-e42300f758f`;
const email = await mailslurp.waitForLatestEmail(inboxId);

Or,

Another method called waitForMatchingEmails can be used to smartly wait for a specific email that matched your defined conditions.

const email = await mailslurp.waitForMatchingEmails({
  inboxId,
  count,
  matchOptions: [
    {
      field: "SUBJECT",
      should: "CONTAIN",
      value: "Please reset your My Account password",
    },
  ],
});

This email variable would contain your entire email data like,

• headers?: { [key: string]: string };
• subject?: string;
• attachments?: Array<string>;
• body?: string;
• cc?: Array<string>;
• createdAt?: Date;
• to?: Array<string>;
• from?: string;
• etc…

console.log(`email.to -> ${email.to}`);
console.log(`email.from -> ${email.from}`);
console.log(`email.body -> ${email.body}`);

Step 5: Parsing the email body to fetch the password reset link

The data in the fetched email.body is a string which is basically the entire email in HTML format.

As this body contains the link to reset the password in it, we need to fetch it in order to complete our reset password journey.

To parse this email body, we need to use another npm package called node-html-parser.

npm install node-html-parser
yarn add node-html-parser

Import parse method from node-html-parser package.

import { parse } from 'node-html-parser';

parse method needs one parameter that is the entire HTML in string format which would return the parsed HTML on which we can run the query selectors to find the required data (which in our case is reset password link)

const root = parse(email.body);
const resetPasswordUrl = root.querySelector('body a').rawText;

Step 6: Navigate to the fetched URL for reset password functionality

Now, all we need to do is navigate to the URL fetched in the previous step.

For this a simple navigateTo method of testcafe can be used

await t.navigateTo(resetPasswordUrl);

This way, we can easily fetch the emails simply by calling the APIs and validating things in an efficient way.