E2E Testing with Playwright

When building authentication flows, password resets, or transactional receipts, you need reliable end-to-end tests to verify that emails are correctly generated and received.

Strategy: Test via Inbound Webhooks or API Querying

Instead of attempting to log into a real Gmail or Outlook account with browser automation:

Generate a unique test address per test run (e.g. test-${Date.now()}@yourdomain.com).
Trigger the application action in your Playwright test (e.g. “Click Sign Up”).
Use Mailofly’s Emails or Received API to query for the incoming email payload.
Extract the magic link or OTP token and continue the browser test.

Example Playwright Test

tests/auth.spec.ts

import { test, expect } from "@playwright/test";
import { Mailofly } from "mailofly";

const mailofly = new Mailofly(process.env.MAILOFLY_API_KEY!);

test("user receives signup confirmation email", async ({ page }) => {
  const testEmail = `user-${Date.now()}@test.myapp.com`;

  // 1. Fill out signup form in UI
  await page.goto("http://localhost:3000/signup");
  await page.fill('input[name="email"]', testEmail);
  await page.click('button[type="submit"]');

  // 2. Poll Mailofly API for the sent message
  let message;
  for (let i = 0; i < 10; i++) {
    const list = await mailofly.emails.list({ limit: 5 });
    message = list.data.find((m) => m.to.includes(testEmail));
    if (message) break;
    await page.waitForTimeout(1000);
  }

  expect(message).toBeDefined();
  expect(message.subject).toBe("Verify your email address");

  // 3. Extract confirmation link from HTML
  const match = message.html.match(/href="([^"]+\/verify\?[^"]+)"/);
  expect(match).not.toBeNull();
  const verifyUrl = match![1];

  // 4. Visit the verification link
  await page.goto(verifyUrl);
  await expect(page.locator("h1")).toHaveText("Account Verified");
});

⌘I