Playwright + plop.email
Add email verification to your Playwright E2E tests. Test signup flows, password resets, and notifications.
Playwright DocumentationFeatures
Async Email Fetching
Use Playwright's built-in request API to fetch emails during tests.
Test Isolation
Generate unique email addresses per test for parallel execution.
Content Assertions
Assert on email subject, body, links, and attachments.
Visual Testing
Render email HTML in browser for visual regression testing.
Setup
# Install Playwright
npm init playwright@latest
# Add plop API key to your environment
echo "PLOP_API_KEY=your_api_key" >> .envBasic Email Test
Test that a user receives a welcome email after signing up.
Basic Email Testtypescript
import { test, expect } from '@playwright/test';
test('signup sends welcome email', async ({ page, request }) => {
const testEmail = `test+${Date.now()}@in.plop.email`;
// Complete signup flow
await page.goto('/signup');
await page.fill('[name="email"]', testEmail);
await page.fill('[name="password"]', 'SecurePass123!');
await page.click('button[type="submit"]');
// Wait for email to arrive
await page.waitForTimeout(2000);
// Fetch email via plop API
const response = await request.get(
`https://api.plop.email/v1/messages/latest`,
{
params: { to: testEmail },
headers: {
Authorization: `Bearer ${process.env.PLOP_API_KEY}`,
},
}
);
const email = await response.json();
expect(email.subject).toContain('Welcome');
});Email Link Verification
Extract and navigate to links from emails.
Email Link Verificationtypescript
import { test, expect } from '@playwright/test';
test('magic link authentication', async ({ page, request, context }) => {
const testEmail = `magic+${Date.now()}@in.plop.email`;
// Request magic link
await page.goto('/login');
await page.fill('[name="email"]', testEmail);
await page.click('text=Send Magic Link');
// Fetch the email
const emailResponse = await request.get(
'https://api.plop.email/v1/messages/latest',
{
params: { to: testEmail },
headers: { Authorization: `Bearer ${process.env.PLOP_API_KEY}` },
}
);
const email = await emailResponse.json();
// Extract magic link from email HTML
const magicLinkMatch = email.htmlContent.match(/href="([^"]*magic[^"]*)"/);
expect(magicLinkMatch).toBeTruthy();
// Navigate to magic link
await page.goto(magicLinkMatch[1]);
// Verify user is logged in
await expect(page.locator('text=Dashboard')).toBeVisible();
});Tips
- Use Date.now() or crypto.randomUUID() for unique test emails
- Add retry logic for email fetching in case of delivery delays
- Store PLOP_API_KEY in CI secrets, not in code
- Use Playwright's request fixture for API calls within tests
Related Use Cases
Start testing with Playwright
Add email verification to your Playwright tests in minutes.