e2e-testing

E2E Testing with Playwright

Write and run end-to-end tests for full user flows using Playwright, with support for both the Playwright test framework and Playwright MCP tools for interactive browser automation.

When to Use

• User needs to test a complete user flow (login, create, edit, delete)
• User wants to validate frontend-backend integration
• User needs to set up a Playwright test suite from scratch
• User wants to automate visual testing or screenshots
• User needs to debug a failing E2E test

Available Operations

1. Set up Playwright in a project
2. Write tests for user flows (login, CRUD, navigation)
3. Create Page Object Models for complex tests
4. Run tests and debug failures
5. Use Playwright MCP tools for interactive browser testing

Multi-Step Workflow

Step 1: Install and Set Up Playwright

npm init playwright@latest
# Select TypeScript, tests folder, GitHub Actions workflow

# Or add to existing project:
npm install -D @playwright/test
npx playwright install

Verify installation:

npx playwright --version

Step 2: Configure Playwright

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:5173',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'mobile', use: { ...devices['iPhone 13'] } },
  ],
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

Step 3: Create Auth Setup (Reusable Login)

// tests/e2e/auth.setup.ts
import { test as setup, expect } from '@playwright/test';

setup('authenticate', async ({ page }) => {
  await page.goto('/login');
  await page.fill('[name="email"]', '[email protected]');
  await page.fill('[name="password"]', 'admin123');
  await page.click('button[type="submit"]');
  await page.waitForURL('**/dashboard');

  // Save auth state for other tests to reuse
  await page.context().storageState({ path: 'tests/e2e/.auth/user.json' });
});