CodeceptJS email testing with MailSlurp

MailSlurp has a deep integration with an official [CodeceptJS plugin](https://codecept.io/email/#installation) that lets you create and control real email accounts (and phone numbers) in codecept Js tests.

Install

First get a free API Key for MailSlurp. Then install the following packages:

npm i @codeceptjs/mailslurp-helper mailslurp-client --save-dev

Then configure your codecept.conf.js:

exports.config = {
    tests: './*_test.js',
    output: './output',
    helpers: {
        MailSlurp: {
            apiKey: process.env.API_KEY || 'YOUR_MAILSLURP_API_KEY',
            require: '@codeceptjs/mailslurp-helper'
        },
    },
    name: 'codeceptjs'
};

Info. Make sure you set your API_KEY in codecept.conf.js setup.

Example

Here is a test that does the following:

• Create a new mailbox
• Use email address to create new user account
• Wait for confirmation code email
• Extract verification code using regex
• Submit code and log in as verified user

Scenario('Test user sign up',  async ({ I }) => {
    // create a dummy inbox with MailSlurp
    const emailAccount = await I.haveNewMailbox()
    const password = 'test-password';

    // load application
    I.amOnPage(MY_APPLICATION);

    // fill signup form
    I.click('[data-test="sign-in-create-account-link"]')
    I.fillField('[name="email"]', emailAccount.emailAddress);
    I.fillField('[name="password"]', password);
    I.click('[data-test="sign-up-create-account-button"]');

    // wait for confirmation email
    const email = await I.waitForEmailMatching({
        subject: "Please confirm your email address"
    })
    // extract content use regex pattern
    const [_, code] = /verification code is (\d+)/.exec(email.body)

    // submit verification code
    I.fillField('[name="code"]', code)
    I.click('[data-test="confirm-sign-up-confirm-button"]');

    // now login with verified account
    I.fillField('[name="username"]', emailAccount.emailAddress);
    I.fillField('[name="password"]', password);
    I.click('[data-test="sign-in-sign-in-button"]');

    // see welcome message
    I.waitForElement('img[src*="welcome"]', 30);
});

Resources

Please see the example Github repository and CodeceptJS documentation for more information.