How to test login functionality using OTP codes with Playwright 

Login functionality is one of the most critical aspects of any web application. It's the gateway for users to access personalized and secure areas of a website. Ensuring that this functionality works correctly is essential for maintaining a smooth user experience and safeguarding sensitive information. Let's explore how to automate the testing of login functionality using Playwright, a powerful tool for end-to-end testing.

Why test login functionality?

A well-functioning login system ensures that only authorized users can access restricted sections of your application. Broken or unreliable login systems can lead to frustrating user experiences, potential security vulnerabilities, and lost trust. Automating login tests with a tool like Playwright not only saves time but also ensures consistency in test execution, leading to more reliable results.

Why Playwright for login testing with Mailosaur?

Playwright is an open-source framework for automating the testing of web applications. When integrated with a tool like Mailosaur, it becomes even more powerful for testing complex login flows. Here's how combining Playwright with Mailosaur enhances your login testing:

• Cross-browser support: Playwright enables you to run your tests across all major browsers (Chromium, Firefox, WebKit), ensuring that your login functionality works seamlessly for users on any platform. When integrated with Mailosaur, this becomes especially useful for testing email-based authentication flows across different browsers and devices.
• Email verification testing: Mailosaur specializes in testing email workflows such as signups, password resets, and two-factor authentication (2FA). By combining Playwright with Mailosaur, you can automate login flows that require email verification, OTPs, or account activation links. Playwright can handle the navigation and form submission, while Mailosaur fetches and validates the email content, ensuring end-to-end coverage.
• Fast execution: Both Playwright and Mailosaur are designed for speed and efficiency. Playwright’s ability to quickly execute tests is complemented by Mailosaur’s swift email capture and API-driven testing. This combination minimizes the time it takes to verify email-based login flows, which can often be time-consuming when tested manually.
• Automatic waiting: Playwright automatically waits for elements like login forms or buttons to be ready before interacting with them. This ensures that login tests are stable and reliable. Meanwhile, Mailosaur waits for incoming emails and allows you to assert specific email content, streamlining the process of verifying email-based login steps.
• Full page testing with email integration: Playwright lets you simulate real-world login scenarios, such as navigating to the login page, entering credentials, and verifying post-login success. With Mailosaur integrated, you can extend these tests to include email validation steps, such as retrieving and clicking activation links or handling email-based two-factor authentication.

Complex login scenarios

Testing complex login scenarios with Playwright often goes beyond verifying the ‘happy path’ of a simple login. With the increasing use of two-factor authentication (2FA) via SMS or apps like Google Authenticator, the challenge of automating these tests has grown. Handling one-time passcodes, timing constraints, and multi-step verifications makes testing 2FA difficult, requiring advanced strategies to ensure security measures work as intended without compromising user experience.

How to test login that requires two-factor authentication

Testing the login flow with OTP via email or SMS ensures that users can authenticate using a second layer of security. This is crucial for validating that the OTP is correctly delivered and handled, providing enhanced protection against unauthorized access.

Set up a simple Playwright project

You can quickly generate a basic starter project, including Mailosaur integration, which will install and set up Mailosaur in a sample project:

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.

OTP via SMS

Here’s what a typical test to login with OTP via SMS might look like with Mailosaur:

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

const phoneNumber = 'PHONE_NUMBER'; // Add Mailosaur testing phone number to this variable

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

test('Login using OTP code via SMS', async ({ page }) => {
  // 1 - Attempt to login, this should trigger an OTP code to be sent to 'phoneNumber'
  await page.goto(`https://yoursite.com/login`);
  await page.fill('#email', 'YOUR_EMAIL_ADDRESS');
  await page.fill('#password', 'YOUR_PASSWORD');
  await page.click('button[type="submit"]');

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

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

  // 4 - Retrieve passcode from the SMS message
  const passcode = sms.text.codes[0];

  // 5 - Input the code received and submit
  await page.fill('#otpCode', passcode.value);
  await page.click('button[type="submit"]');

  // 6 - Confirm the account was logged in
});

OTP via email

If you wanted to do the same, but using an email OTP code, here’s how you would do that:

// 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 login, 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.text.codes[0];