How to run an OTP test with Playwright and SMS codes

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

For a broader checklist across email OTP, SMS OTP, magic links, TOTP, expiry, resends, and one-time-use checks, start with the OTP testing and OTP checker workflow guide.

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.

For a complete release check, keep the browser journey primary, then verify the delivered SMS or email artifact: sender, body, code extraction, links, timing, and saved evidence.

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

// wait for the latest unread sms
const [sms] = await mailslurp.waitController.waitForSms({
  waitForSmsConditions: {
    count: 1,
    unreadOnly: true,
    phoneNumberId: phoneNumber.id,
    timeout: 30_000,
  },
});
// extract a code from body with regex
expect(sms.body).toContain("Your code: 123");
const [, code] = /.+:\s([0-9]{3})/.exec(sms.body)!!;
expect(code).toEqual("123");

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

• OTP testing and OTP checker workflow guide
• 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.
• Preview related auth, invite, or reset emails with Device previews when the flow sends an email alongside SMS.

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.