Playwright E2E Testing Automation

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

test.describe('Dashboard Tests', () => {
  test.beforeEach(async ({ page }) => {
    // Login before each test
    await page.goto('http://localhost:3000/login');
    await page.getByLabel('Email').fill('user@example.com');
    await page.getByLabel('Password').fill('password123');
    await page.getByRole('button', { name: 'Sign In' }).click();
    await page.waitForURL('**/dashboard');
  });

  test('displays welcome message', async ({ page }) => {
    const heading = page.getByRole('heading', { name: /welcome/i });
    await expect(heading).toBeVisible();
  });

  test('loads user profile data', async ({ page }) => {
    await page.getByRole('link', { name: 'Profile' }).click();
    await expect(page.getByText('user@example.com')).toBeVisible();
  });
});

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

test.describe('API Tests', () => {
  test('GET /api/users returns valid data', async ({ request }) => {
    const response = await request.get('http://localhost:3000/api/users');
    expect(response.ok()).toBeTruthy();
    
    const users = await response.json();
    expect(users).toHaveLength(10);
    expect(users[0]).toHaveProperty('email');
  });

  test('POST /api/users creates new user', async ({ request }) => {
    const response = await request.post('http://localhost:3000/api/users', {
      data: {
        name: 'Test User',
        email: 'test@example.com'
      }
    });
    expect(response.status()).toBe(201);
    
    const user = await response.json();
    expect(user.id).toBeDefined();
  });
});

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 4 : undefined,
  reporter: [['html'], ['json', { outputFile: 'test-results.json' }]],
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 13'] },
    },
  ],
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

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

test('visual regression test', async ({ page }) => {
  await page.goto('http://localhost:3000/dashboard');
  
  // Take screenshot and compare with baseline
  await expect(page).toHaveScreenshot('dashboard.png', {
    maxDiffPixels: 100,
    threshold: 0.2
  });
});

test('network interception and mocking', async ({ page }) => {
  // Mock API response
  await page.route('**/api/users', route => route.fulfill({
    status: 200,
    body: JSON.stringify([{ id: 1, name: 'Test User' }])
  }));
  
  await page.goto('http://localhost:3000/users');
  await expect(page.getByText('Test User')).toBeVisible();
});

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

test('performance metrics', async ({ page }) => {
  await page.goto('http://localhost:3000');
  
  // Measure Web Vitals
  const metrics = await page.evaluate(() => {
    return new Promise((resolve) => {
      new PerformanceObserver((list) => {
        const entries = list.getEntries();
        resolve({
          fcp: entries.find(e => e.name === 'first-contentful-paint')?.startTime,
          lcp: entries.find(e => e.entryType === 'largest-contentful-paint')?.renderTime
        });
      }).observe({ entryTypes: ['paint', 'largest-contentful-paint'] });
    });
  });
  
  expect(metrics.fcp).toBeLessThan(2000);
  expect(metrics.lcp).toBeLessThan(2500);
});