Playwright email integration testing

Playwright is a powerful end-to-end integration testing framework created by Microsoft with support for multiple browsers and frameworks. It's a modern alternative to browser testing frameworks like Cypress and Selenium. Add MailSlurp to your test suite to test email login and verification with Playwright for full application testing using disposable email accounts.

Testing front-end login

In this example we will test a demo application called the Playground that allows user sign up with an email address and password. Upon signing up the user is sent a verification code that must be extracted from the email and entered into the confirm user form.

Setup (installing playwright)

The easiest way to get started is to use the npm init methods in a new folder:

npm init playwright@latest

This will create a playwright.config.ts and an example test suite. The config for this example is as follows:

import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';
const config: PlaywrightTestConfig = {
  testDir: './tests',
  timeout: 30 * 1000,
  expect: {
    timeout: 5000
  },
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    actionTimeout: 0,
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    }
   ]
};

export default config;

Install MailSlurp (email accounts)

Next we should install MailSlurp's free email library via NPM:

npm install --save mailslurp-client

Create a free account and copy your API Key from the dashboard. We will need this for the next step.

Configure a test using the authentication playground

Let's write a test that signs up for an account on our test application called playground. We will create a new email address using MailSlurp, fill the login form and then receive an email verification code. We can extract the code from the disposable email account using MailSlurp and then submit the code to verify our address.

Writing the test

Playwright tests use a Jest-like structure and a page object to select elements on a page and wait for conditions.

import { test, expect, Page } from '@playwright/test';
import MailSlurp from "mailslurp-client";

test.describe('test email login with playwright', () => {
  test('can login and verify email address with mailslurp', async ({ page }) => {
    const apiKey = process.env.API_KEY;
    expect(apiKey).toBeDefined();

    // load playground app
    await page.goto("https://playground.mailslurp.com");
    await page.click('[data-test="sign-in-create-account-link"]');

    // create a new inbox
    const mailslurp = new MailSlurp({ apiKey })
    const password = "test-password"
    const { id, emailAddress } = await mailslurp.createInbox()

    // fill sign up form
    await page.fill('input[name=email]', emailAddress);
    await page.fill('input[name=password]', password);
    await page.click('[data-test="sign-up-create-account-button"]');

    // wait for verification code
    const email = await mailslurp.waitForLatestEmail(id)

    // extract the confirmation code (so we can confirm the user)
    const code = /([0-9]{6})$/.exec(email.body)[1];

    // enter confirmation code
    await page.fill('[data-test="confirm-sign-up-confirmation-code-input"]', code);
    await page.click('[data-test="confirm-sign-up-confirm-button"]');

    // fill out username (email) and password
    await page.fill('[data-test="username-input"]', emailAddress);
    await page.fill('[data-test="sign-in-password-input"]', password);
    // submit
    await page.click('[data-test="sign-in-sign-in-button"]');
    await page.waitForSelector("[data-test='greetings-nav']")
  });

});

Extracting the email verification code

The most import part of this test is using the disposable email account we created to receive a verification email and extract the code using a regex.

// wait for verification code
const email = await mailslurp.waitForLatestEmail(id)

// extract the confirmation code (so we can confirm the user)
const code = /([0-9]{6})$/.exec(email.body)[1];

We can then enter the code into the verification form input and verify our user account.

Running the tests

To run the tests we can create a Makefile like so:

.PHONY: test

node_modules:
	npm install

test: node_modules
	API_KEY=$(API_KEY) npx playwright test

Then run the tests with API_KEY=your-api-key make test. A successful login will show this friendly dog and a welcome message: