Create E2E Test

Create E2E Test

When to Use

• Testing complete user flows
• Testing protected routes and middleware
• Verifying form submissions
• User asks to "add E2E test" or "test user flow"

Test Location

tests/
├── authentication.spec.ts
├── dashboard.spec.ts
└── profile.spec.ts

Basic Test

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

test.describe('Feature Name', () => {
    test('should do something', async ({ page }) => {
        await page.goto('/');
        await expect(page.getByRole('heading', { name: 'Title' })).toBeVisible();
    });
});

Authentication Flow

test('signs in and accesses dashboard', async ({ page }) => {
    await page.goto('/​sign-in');
    await page.getByLabel(/​email/​i).fill('[email protected]');
    await page.getByLabel(/​password/​i).fill('Admin123!');
    await page.getByRole('button', { name: /​sign in/​i }).click();

    await expect(page).toHaveURL(/​dashboard/);
});

Form Testing

test('shows validation errors', async ({ page }) => {
    await page.goto('/​sign-in');
    await page.getByRole('button', { name: /​sign in/​i }).click();

    await expect(page.getByText(/​email is required/​i)).toBeVisible();
});

Selectors - Use Semantic

// GOOD
page.getByRole('button', { name: /​submit/​i })
page.getByLabel(/​email/​i)
page.getByText(/​success/​i)

// BAD
page.locator('.btn-primary')
page.locator('#submit-button')

Test Credentials

Running Tests

npm run e2e           # Headless
npm run e2e:ui        # Visual UI (recommended)
npm run e2e:headed    # Browser visible
npm run e2e:debug     # Debug mode

Common Assertions

await expect(page).toHaveURL(/​dashboard/);
await expect(page).toHaveTitle('Page Title');
await expect(page.getByText('Hello')).toBeVisible();
await expect(page.getByRole('button')).toBeDisabled();

Checklist

1. Create *.spec.ts in tests/ directory
2. Use semantic selectors (role, label, text)
3. Set up authentication if testing protected routes
4. Avoid hardcoded waits (waitForTimeout)

Full Reference

See .github/​instructions/​playwright.instructions.md for:

• API response testing
• Role-based access testing
• CI/​CD integration
• Debugging strategies