claude-skills-reference/engineering-team/playwright-pro/templates/onboarding/email-verification.md

# Email Verification Template

Tests email verification link, resend flow, and expired token handling.

## Prerequisites
- Registered but unverified account: `{{unverifiedEmail}}`
- Valid token: `{{verificationToken}}`
- Expired token: `{{expiredVerificationToken}}`
- App running at `{{baseUrl}}`

---

## TypeScript

```typescript
import { test, expect } from '@playwright/test';

test.describe('Email Verification', () => {
  // Happy path: valid verification link
  test('verifies email with valid token', async ({ page }) => {
    await page.goto('{{baseUrl}}/verify-email?token={{verificationToken}}');
    await expect(page.getByRole('heading', { name: /email verified|verified/i })).toBeVisible();
    await expect(page.getByRole('link', { name: /continue|go to dashboard/i })).toBeVisible();
  });

  // Happy path: continues to app after verification
  test('redirects to dashboard after clicking continue', async ({ page }) => {
    await page.goto('{{baseUrl}}/verify-email?token={{verificationToken}}');
    await page.getByRole('link', { name: /continue|go to dashboard/i }).click();
    await expect(page).toHaveURL('{{baseUrl}}/dashboard');
  });

  // Happy path: resend verification email
  test('resends verification email', async ({ page }) => {
    await page.goto('{{baseUrl}}/verify-email/resend');
    await page.getByRole('textbox', { name: /email/i }).fill('{{unverifiedEmail}}');
    await page.getByRole('button', { name: /resend/i }).click();
    await expect(page.getByRole('alert')).toContainText(/sent|check your email/i);
  });

  // Happy path: verification prompt on login for unverified user
  test('shows verification prompt when unverified user logs in', async ({ page }) => {
    await page.goto('{{baseUrl}}/login');
    await page.getByRole('textbox', { name: /email/i }).fill('{{unverifiedEmail}}');
    await page.getByRole('textbox', { name: /password/i }).fill('{{password}}');
    await page.getByRole('button', { name: /sign in/i }).click();
    await expect(page.getByText(/verify.*email|check.*inbox/i)).toBeVisible();
    await expect(page.getByRole('button', { name: /resend.*verification/i })).toBeVisible();
  });

  // Error case: expired token
  test('shows error for expired verification token', async ({ page }) => {
    await page.goto('{{baseUrl}}/verify-email?token={{expiredVerificationToken}}');
    await expect(page.getByRole('heading', { name: /link.*expired|verification.*failed/i })).toBeVisible();
    await expect(page.getByRole('link', { name: /resend|request new/i })).toBeVisible();
  });

  // Error case: invalid token
  test('shows error for invalid verification token', async ({ page }) => {
    await page.goto('{{baseUrl}}/verify-email?token=invalid-token-xyz');
    await expect(page.getByRole('heading', { name: /invalid|failed/i })).toBeVisible();
  });

  // Edge case: already verified user hitting link
  test('shows already verified message for used token', async ({ page }) => {
    await page.goto('{{baseUrl}}/verify-email?token={{usedVerificationToken}}');
    await expect(page.getByText(/already verified|email.*confirmed/i)).toBeVisible();
    await expect(page.getByRole('link', { name: /sign in/i })).toBeVisible();
  });
});
```

---

## JavaScript

```javascript
const { test, expect } = require('@playwright/test');

test.describe('Email Verification', () => {
  test('verifies email with valid token', async ({ page }) => {
    await page.goto('{{baseUrl}}/verify-email?token={{verificationToken}}');
    await expect(page.getByRole('heading', { name: /email verified/i })).toBeVisible();
  });

  test('shows error for expired token', async ({ page }) => {
    await page.goto('{{baseUrl}}/verify-email?token={{expiredVerificationToken}}');
    await expect(page.getByRole('heading', { name: /link.*expired/i })).toBeVisible();
    await expect(page.getByRole('link', { name: /resend|request new/i })).toBeVisible();
  });

  test('resends verification email', async ({ page }) => {
    await page.goto('{{baseUrl}}/verify-email/resend');
    await page.getByRole('textbox', { name: /email/i }).fill('{{unverifiedEmail}}');
    await page.getByRole('button', { name: /resend/i }).click();
    await expect(page.getByRole('alert')).toContainText(/sent/i);
  });

  test('shows verification prompt on login for unverified user', async ({ page }) => {
    await page.goto('{{baseUrl}}/login');
    await page.getByRole('textbox', { name: /email/i }).fill('{{unverifiedEmail}}');
    await page.getByRole('textbox', { name: /password/i }).fill('{{password}}');
    await page.getByRole('button', { name: /sign in/i }).click();
    await expect(page.getByText(/verify.*email/i)).toBeVisible();
  });
});
```

## Variants
| Variant | Description |
|---------|-------------|
| Valid token | Email verified heading + continue link |
| Continue CTA | Navigates to dashboard |
| Resend | Sends new email, success alert |
| Login prompt | Unverified login shows resend button |
| Expired token | Error heading + resend link |
| Invalid token | Generic error heading |
| Already verified | "Already verified" with login link |