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.