Test user sign-up and password reset using WebDriver

This example demonstrates use of MailSlurp with NodeJS, Webdriver.io (WDIO), Selenium and Chrome to test user processes that depend on email. It tests user sign-up and email confirmation using the MailSlurp OAuth2 Playground as a dummy login application (shown below).

About

Each test run does the following:

• generates a real, randomized email address using MailSlurp
• signs up with it in the browser
• captures the email confirmation code with MailSlurp
• enters in the confirmation code in the browser.

MailSlurp is free for personal use so sign up to run the example yourself.

Installing WebDriver and WDIO

In order to test a websites login process you need to load the website into a browser and performs some actions against it. We will use WDIO for this example: a Javascript library that automates browsers.

To install create a package.json file and paste the following:

{
  "scripts": {
    "test": "wdio wdio.conf.js"
  },
  "dependencies": {
    "@wdio/cli": "^5.13.2",
    "@wdio/local-runner": "^5.13.2",
    "@wdio/mocha-framework": "^5.13.2",
    "@wdio/selenium-standalone-service": "^5.13.2",
    "@wdio/spec-reporter": "^5.13.2",
    "chromedriver": "^76.0.0",
    "mailslurp-client": "^6.5.0",
    "wdio-chromedriver-service": "^5.0.2"
  }
}

Then run npm install

Configuring WDIO

Now add a wdio.conf.js file so we can configure WDIO to load the MailSlurp playground in the browser.

const config = {
  runner: 'local',
  path: '/',
  specs: ['test/*.test.js'],
  exclude: [],
  maxInstances: 10,
  capabilities: [
    {
      maxInstances: 5,
      browserName: 'chrome'
    }
  ],
  logLevel: 'info',
  bail: 0,
  baseUrl: 'https://playground.mailslurp.com',
  waitforTimeout: 30000,
  connectionRetryTimeout: 90000,
  connectionRetryCount: 3,
  framework: 'mocha',
  services: ['chromedriver'],
  reporters: ['spec'],
  mochaOpts: {
    ui: 'bdd',
    timeout: 60000
  }
};

exports.config = config;

Write a test to sign up user

Configure MailSlurp

Create a test file called sign-up.test.js. Now let's configure MailSlurp:

const assert = require('assert');
const MailSlurp = require('mailslurp-client').default;
const apiKey = 'your-api-key'; 
const mailslurp = new MailSlurp({ apiKey });

Try loading the Playground

Our first test should load the playground and assert the sign-up form is present.

describe('sign up process', () => {
  it('can load playground app', async () => {
    await browser.url('/');
    await browser.setWindowSize(1200, 1200);
  });
});

If we run the test with npm run test we should see passing tests.

.

The first page to load is the login screen. As we want to sign-up let's click the link for that page in our test.

it('can load the sign-up section', async () => {
// find the create account link and click it
await $('[data-test="sign-in-create-account-link"]')
  .then(e => e.click())
await $('[data-test="sign-up-header-section"]')
  .then(e => e.getText())
  .then(text => assert.strictEqual(text, 'Testable Sign Up Form'));
});

Create random email address and sign up

Now for the important part: creating a real email address on demand to sign-up a user with.

let inbox;
it('can sign-up with new user', async () => {
// create a new email address for the test run
inbox = await mailslurp.createInbox();

// fill out and submit the new user form
await $('[name="email"]')
  .then(e => e.setValue(inbox.emailAddress));
await $('[name="password"]')
  .then(e => e.setValue(password));
await $('[data-test="sign-up-create-account-button"]')
  .then(e => e.click());
});

Notice how we created a new email address in each test run:

inbox = await mailslurp.createInbox();

The inbox response object contains data like so:

{
  id: 'abc123',
  emailAddress: 'abc123@mailslurp.com'
}

The email address created is real and can receive emails sent from any application (including our login Playground).

Fetch confirmation email and verify account

Once the sign-up form has been submitted we can use MailSlurp to fetch the confirmation code and confirm the users account in the browser.

it('can fetch confirmation code', async () => {
// fetch the email from mailslurp
const email = await mailslurp.waitForLatestEmail(inbox.id)

// verify that it contains the code
assert.strictEqual(/verification code is/.test(email.body), true);

// extract the confirmation code
code = /([0-9]{6})$/.exec(email.body)[1]
});

it('can enter confirmation code and confirm user', async () => {
await $('[name="code"]')
  .then(e => e.setValue(code));
await $('[data-test="confirm-sign-up-confirm-button"]')
  .then(e => e.click());
});

Notice the waitForLatestEmail call to MailSlurp:

const email = await mailslurp.waitForLatestEmail(inbox.id)

This call fetches the latest email in the given inbox or holds the connection open until the first email is received. This means the method will return the confirmation email sent by the Playground.

Can login with confirmed user

With our email address now confirmed lets log into the Playground and confirm we have access. A successful login should show a picture of a dog like so:

.

it('can log in with confirmed account', async () => {
// assert we see the sign in form
await $('[data-test="sign-in-header-section"]')
  .then(e => e.getText())
  .then(text => assert.strictEqual(text, 'Sign in to your account'));

// fill out username (email) and password
await $('[name="username"]')
  .then(e => e.setValue(inbox.emailAddress));
await $('[name="password"]')
  .then(e => e.setValue(password));

// submit
await $('[data-test="sign-in-sign-in-button"]')
  .then(e => e.click());

});

it('shows the successful greeting', async () => {
await $('[data-test="greetings-nav-bar"]')
  .then(e => e.getText())
  .then(text => assert.strictEqual(/Hello/.test(text), true));
});

Conclusion

MailSlurp let's you send and receive emails from randomly assigned email addresses. It's great for testing authentication flows with Webdriver, Cypress, Jest and more. It's free for personal use so sign up today!