Playwrightbeginner

Playwright Signup Test

Test user signup with email verification using Playwright

Playwright Signup Test (typescript)typescript
import { test, expect } from '@playwright/test';

// Helper to generate unique test emails
function testEmail(prefix: string) {
  return `${prefix}+${Date.now()}@in.plop.email`;
}

// Helper to fetch email from plop
async function fetchEmail(request: any, toAddress: string) {
  const response = await request.get(
    'https://api.plop.email/v1/messages/latest',
    {
      params: { to: toAddress },
      headers: {
        Authorization: `Bearer ${process.env.PLOP_API_KEY}`,
      },
    }
  );
  return response.json();
}

test.describe('User Signup', () => {
  test('sends welcome email after signup', async ({ page, request }) => {
    // Generate unique email for this test
    const email = testEmail('signup');

    // Fill and submit signup form
    await page.goto('/signup');
    await page.fill('[name="email"]', email);
    await page.fill('[name="password"]', 'SecurePass123!');
    await page.fill('[name="name"]', 'Test User');
    await page.click('button[type="submit"]');

    // Wait for success message
    await expect(page.locator('.success-message')).toBeVisible();

    // Wait for email to arrive
    await page.waitForTimeout(2000);

    // Fetch and verify email
    const welcomeEmail = await fetchEmail(request, email);

    expect(welcomeEmail.subject).toContain('Welcome');
    expect(welcomeEmail.htmlContent).toContain('Test User');
    expect(welcomeEmail.htmlContent).toContain('Get Started');
  });

  test('verification link works', async ({ page, request }) => {
    const email = testEmail('verify');

    // Complete signup
    await page.goto('/signup');
    await page.fill('[name="email"]', email);
    await page.fill('[name="password"]', 'SecurePass123!');
    await page.click('button[type="submit"]');

    await page.waitForTimeout(2000);

    // Get verification email
    const verifyEmail = await fetchEmail(request, email);

    // Extract verification link
    const linkMatch = verifyEmail.htmlContent.match(/href="([^"]*verify[^"]*)"/);
    expect(linkMatch).toBeTruthy();

    // Click verification link
    await page.goto(linkMatch[1]);

    // Verify success
    await expect(page.locator('text=Email verified')).toBeVisible();
  });
});

How It Works

1

Test Email Generation

Each test generates a unique email using timestamp. This ensures tests don't interfere with each other when running in parallel.

2

Fetching Emails

The fetchEmail helper uses Playwright's request fixture to call the plop API. The API key is stored in environment variables.

3

Email Assertions

We verify the email subject contains 'Welcome' and the HTML body includes the user's name and a call-to-action.

4

Link Verification

The second test extracts the verification link from the email HTML and navigates to it, verifying the complete flow.

Try This Example

Get a free API key and test this example in minutes.