Codecept is a popular end-to-end testing framework for Javascript. It lets you write browser based integration tests in an intuitive, fluent style. It also has a wide array of official and community plugins. One common use case during QA testing is validating user sign-up and account verification. Luckily, CodeceptJs has an official mailbox plugin that uses the free service MailSlurp to create disposable email accounts that can send and receive email during tests. In this post we will demonstrate how to test user sign-up and OTP codes in a real example application.

Why test with email?

Sometimes mocking and stubbing are sufficient but to really test an application we need real user accounts. User accounts are normally tied to a unique email address which means manual testing and use of our own email addresses quickly runs out of users. That's why QA teams use a disposable email provider like MailSlurp.

An application to test

We will test a dummy application at playground.mailslurp.com. We want to load this site in an automated browser test, enter a unique email account, then receive a verification code and submit this code to verify our account. The website looks like this:

Dealing with OTP codes

Our application is like many apps these days - it sends a one time password or verification code via email when we sign up. It looks something like this:

Our challenge in this test will be to capture that code and use it to confirm the user in the next step:

Setup Codecept JS

To setup, let's install codeceptjs and the mailslurp-client plugin:

This will scaffold a basic test project with Playwright. Next we add the MailSlurp plugin and the base MailSlurp client

After this our package json will look something like this:

Configure config file

Now we can configure our codeceptjs config to use our mailslurp plugin and open our playground application:

Notice the use of to set an MailSlurp API Key. Get your free api key from the MailSlurp dashboard.

Testing out application

Now we have installed and configured the MailSlurp helper we can use it to do the following:

  • Load the playground app
  • Create a mailbox
  • Fill the user sign-up with the new email
  • Wait for a verification code and extract it
  • Submit the confirmation code to verify user
  • See the logged in page

The full test for this process looks like this:

How does it work?

The key parts of this test are the inbox creation and waiting for emails. The mailbox creation looks like this:

This creates a real and unique email account each time we run our E2E tests. The next important part is waiting for the email and extracting an expected code:

The waitFor function is a special email method that will hold a test open until an expected email is received. So here we wait until a message with a confirmation code is received then use a regex to fetch the confirmation code.

More features

MailSlurp is free and has lots of features for QA testing - this includes phone numbers and AI content extract. Checkout the examples on GitHub for more information.