Using Playwright for email verification testing

When did you last create an account that didn’t require you to supply an email address? It’s a standard requirement and an effective way of supplying someone with the onboarding information, billing alerts, and updates they expect. The wrong email address prevents all of this.

The standard way of verifying an email address is to send a link to an email address, for the user to click through with. This has worked well for years, and there’s no reason to do anything else, unless you want to.

But there’s potential for things to go wrong. Emails might not arrive, links might not work. As a Playwright user, how can you effectively test this workflow?

Can Playwright test this already?

The short answer is yes, but with certain limitations. Playwright has proven to be a massively popular and effective tool for browser automation and web app testing, but it hasn’t been designed to capture and evaluate emails by itself. Without an additional tool, you can use Playwright to navigate to a webmail client like Gmail and try to pull content out that way, but this is time-consuming, error-prone, and limits the number of email addresses you have easy access to. This will inevitably limit testing and increase the chance of issues not being spotted and fixed.

So, while Playwright does work, it does essentially force you to manually test the email verification process on a regular basis, rather than using large scale, automated systems to spot issues.

How to use Playwright for account verification testing

Playwright can efficiently run the tests you need if you add in a tool, such as Mailosaur. Integration is quick, simple, and effective. It gives you the ability to automate email tests with an unlimited number of test email addresses, for a more complete view of the email account verification process.

Run tests to check any link sent to an email works as intended, which you can use for account creation, or closure processes. Whatever works for you. In the same vein, if you choose to send a verification code in your email, it’s easy to extract it for testing purposes.

Start with a simple Playwright project

Before you begin, you can generate a basic starter project, including Mailosaur integration, which will install and set up Mailosaur:

npm create mailosaur@latest

For more detailed instructions, or to manually integrate Mailosaur with an existing project, check out the full guide in our documentation.

Running email verification tests with Playwright

Running email verification tests is simple. Here’s a quick example:

const apiKey = 'API_KEY';
const serverId = 'SERVER_ID'; // The unique ID of the inbox (server) that you are using

// Instantiate Mailosaur client with api key
const mailosaur = new MailosaurClient(apiKey);

test('Verify email using OTP code via email', async ({ page }) => {
  // Random test email address (this uses a catch-all pattern)
  const randomString = (Math.random() + 1).toString(36).substring(7);
  const emailAddress = `${randomString}@${serverId}.mailosaur.net`;

  // 1 - Attempt to signup, this should trigger an OTP code to be sent to 'emailAddress'

  // 2 - Create the search criteria for the email
  const searchCriteria = {
    sentTo: emailAddress,
  };

  // 3 - Get the email from Mailosaur using the search criteria
  const email = await mailosaur.messages.get(serverId, searchCriteria);

  // 4 - Retrieve passcode from the email
  const passcode = email.html.codes[0];

  // 5 - Use the passcode to verify your email address
});

Links

The crucial part here is the link or verification code inside the email itself. If it doesn’t work, your account verification process won’t either. Whether you choose a link or a verification code, Mailosaur can automatically detect and extract what you need.

 // 1 - Attempt to signup, this should trigger a verification link to be sent to 'emailAddress'
 
 // 2 - Create the search criteria for the email

// 3 - Get the email from Mailosaur using the search criteria
  
// 4 - Extract link from the email
const link = email.html.links[0].href;

// 5 - Verify your email address