How to test OTP login with SMS codes using Playwright

This guide shows how to run an OTP test for SMS-based MFA using Playwright.

Quick answer: what is an OTP test?

An OTP test validates that one-time passcodes are sent, received, parsed, and accepted correctly during sign-up or login workflows.

Why automate OTP tests?

• Authentication is a release-critical path
• Manual OTP testing is slow and inconsistent
• Real phone number flows expose production-like failure modes

Test flow overview

1. Create a test phone number
2. Open application sign-up page with Playwright
3. Submit registration form
4. Wait for inbound SMS OTP code
5. Enter code and confirm successful login

In this guide we use a demo SMS auth app at playground-sms.mailslurp.com.

Open video on YouTube

Playwright setup

Create project

mkdir test
cd test
npm init -y

Install Playwright

npm init playwright@latest

Implement OTP test with Playwright

Load sign-up page

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

Fetch a test phone number

// fetch a phone number in US from our account
const mailslurp = new MailSlurp({ apiKey })
const { content }= await mailslurp.phoneController.getPhoneNumbers({
  phoneCountry: GetPhoneNumbersPhoneCountryEnum.US
})
const phone = content?.[0]!!

Fill and submit registration form

const password = "test-password-123"
// fill sign up form
await page.fill('input[name=phone_line_number]', phone.phoneNumber.replace("+1", ""));
await page.fill('input[name=password]', password);

Wait for SMS and extract OTP

await page.click('[data-test="sign-up-create-account-button"]');
// wait for verification code
const sms = await mailslurp.waitController.waitForLatestSms({
  waitForSingleSmsOptions: {
    phoneNumberId: phone.id,
    unreadOnly: true,
    timeout: 30_000,
  }
})
// extract the confirmation code (so we can confirm the user)
const code = /([0-9]{6})$/.exec(sms.body)?.[1]!!;

Submit OTP and verify account access

// 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"]', phone.phoneNumber);
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']")

Cross-framework note

The same OTP test pattern works in Cypress and Selenium:

• Create controlled number
• Trigger auth flow
• Wait for code
• Assert confirmation success

See email and SMS testing guides for related workflows.

Related pages

• SMS API guide
• Phone number SMS service
• Email for testing accounts

SMS OTP release checklist

Before shipping authentication changes, verify this sequence:

• Exercise auth sign-up and login paths in Email Sandbox.
• Run regression suites in CI with Email Integration Testing.
• Capture OTP delivery and verification events through Email Webhooks.
• Apply fraud-response and retry logic with Email Automation Routing.
• Confirm delivery timing reliability with an Email Deliverability Test.

Final take

A reliable OTP test should run in CI for every release candidate. When auth flows break, users cannot onboard or sign in, so this is one of the highest ROI test suites to automate.