The Playwright API you were reaching for is .evaluate(), not .fill().

Why the Playwright API you reach for first does not work

A reasonable Playwright engineer writing an OTP test for the first time reaches for page.getByRole or page.locator, finds each digit field, and calls .fill() on each one. That is the pattern every MailSlurp, Mailosaur, and testmail.app tutorial shows. It works perfectly against a single <input id="otpCode">. It fails, intermittently, against every modern split-digit component. The failure mode is not loud. The test flakes. You chase it for an afternoon, add a wait, add a retry, and end up with the wrong mental model of your own app.

// What every SERP guide shows
import { test, expect } from "@playwright/test";

test("signup with OTP", async ({ page }) => {
  await page.goto("/signup");
  await page.getByLabel(/email/i).fill("t+u9x@inbox.test");
  await page.getByRole("button", { name: /sign up/i }).click();

  const code = await fetchOtpFromInbox();

  // Looks correct. Works against <input id="otpCode">.
  // Fails against every modern OTP component.
  for (let i = 0; i < 6; i++) {
    await page
      .locator('input[maxlength="1"]')
      .nth(i)
      .fill(code[i]);
  }

  await page.getByRole("button", { name: /verify/i }).click();
});

The difference is which events the DOM actually sees. A .fill() sets the value and fires input and change. It never fires paste. The component author, sensibly, installed one onPaste handler on the parent fieldset and made it responsible for splitting a 6-character string across 6 children. Your test never triggers that handler. The moment you dispatch a real ClipboardEvent, the component does exactly what it was designed to do: split the string, focus the last field, and dispatch one change.

The components you already ship that all break the same way

This is not an edge case. Every OTP library built after React 17 binds to onPaste by default, because users want to paste the code from their SMS app in one action. The handler shape is consistent enough that the same page.evaluate expression fills every one of these components without changes.

The pipeline your test actually flows through

Inputs come in from the left: the user flow you want to cover, a disposable inbox minted on demand, and an email body that arrives three to eight seconds later. Assrt is the hub. Playwright MCP is the transport. Outputs on the right are what you keep: a committable .spec.ts, a passing run in under 15 seconds, a video of the scenario, and a scenario file you can re-run in CI.

What happens when you run it

The trace below is a real scenario run against a local Next.js dev server with a Shadcn InputOTP form. Look for three things: the regex pattern that matched (labelled code: won over the bare 6-digit fallback), the snapshot that detected six split inputs, and the single browser_evaluate call that filled all of them.

Six steps, one round trip per step

Numbers that come from the source

Every number below is pulled from a real line in the Assrt source tree. None of them are benchmarks; they are constants the code actually uses.

Four things the SERP guides leave out

What a committable Playwright spec looks like

A passing Assrt scenario graduates into a .spec.ts file you check into the same repo as everything else. Runtime [ref=eN] references resolve into getByRole and getByLabel queries; the OTP dispatcher inlines as a single page.evaluate. The full file, with the disposable inbox and the 7-regex cascade inlined, is below.

Magic links: do not click through the email

A magic link is a second-order OTP. The token is the URL, the URL is consume-on-GET, and the failure modes are different from a numeric code. Two things go wrong in naive setups. First, clicking the link inside the email client (or even inside temp-mail.io's web UI) opens a separate browser context and the Playwright session is gone. Second, a retry (network flake, slow assertion) invalidates the session because the token has already been spent. The fix is to pull the URL out of body (the decoded plain-text copy Assrt returns, up to 5000 chars) and call page.goto() in the same Playwright page.

The URL regex above is deliberately permissive about the host and path, but it requires one of verify, callback, or magic in the path. That filters out unsubscribe URLs, marketing pixels, and CDN-hosted inline images that otherwise match a greedy https?:\/\/\S+.

What this page is not trying to be

This is not a reviewed list of email-testing SaaS. Mailosaur and MailSlurp both have fine products; their blog posts show the single-input case well. This is the gap between what those guides show and what your app actually ships. The split-digit onPaste pattern is not Clerk-specific or Stripe-specific. It is a convention every well-written OTP component follows, because it is what users do with their hands. Your test has to do the same thing, through the same event. Playwright gives you the tool (page.evaluate). The SERP just never points at it.