Automated Testing with Browser Automation: Complete Guide 2026

// Page Object encapsulating login page interactions
export class LoginPage {
  constructor(private page: Page) {}

  // Selectors encapsulated within page object
  private selectors = {
    emailInput: '[data-testid="email-input"]',
    passwordInput: '[data-testid="password-input"]',
    submitButton: '[data-testid="login-submit"]',
    errorMessage: '[data-testid="error-message"]',
  };

  // High-level actions exposing page functionality
  async login(email: string, password: string): Promise<void> {
    await this.page.fill(this.selectors.emailInput, email);
    await this.page.fill(this.selectors.passwordInput, password);
    await this.page.click(this.selectors.submitButton);
  }

  async getErrorMessage(): Promise<string> {
    return await this.page.textContent(this.selectors.errorMessage);
  }

  async waitForPageLoad(): Promise<void> {
    await this.page.waitForSelector(this.selectors.emailInput);
  }
}

// Test using page object abstraction
test('displays error for invalid credentials', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.waitForPageLoad();
  await loginPage.login('[email protected]', 'wrongpassword');

  const error = await loginPage.getErrorMessage();
  expect(error).toContain('Invalid credentials');
});

// Component test bypassing application routing
import { render, screen, fireEvent } from '@testing-library/react';
import { LoginForm } from './LoginForm';

test('validates email format before submission', async () => {
  const onSubmit = jest.fn();
  render(<LoginForm onSubmit={onSubmit} />);

  const emailInput = screen.getByLabelText('Email');
  const submitButton = screen.getByRole('button', { name: 'Log In' });

  await fireEvent.change(emailInput, { target: { value: 'invalid-email' } });
  await fireEvent.click(submitButton);

  expect(onSubmit).not.toHaveBeenCalled();
  expect(screen.getByText('Please enter a valid email')).toBeInTheDocument();
});

// Factory pattern for test data generation
export class UserFactory {
  static createUser(overrides?: Partial<User>): User {
    return {
      id: randomUUID(),
      email: `test-${Date.now()}@example.com`,
      name: 'Test User',
      role: 'user',
      ...overrides,
    };
  }

  static async createInDatabase(overrides?: Partial<User>): Promise<User> {
    const user = this.createUser(overrides);
    await database.users.insert(user);
    return user;
  }
}

// Test using factory-generated data
test('user can update profile information', async ({ page }) => {
  const user = await UserFactory.createInDatabase();
  await loginAs(page, user);

  await page.goto('/profile');
  await page.fill('[name="displayName"]', 'Updated Name');
  await page.click('button[type="submit"]');

  await expect(page.locator('.success-message')).toBeVisible();
});

// Playwright configuration for parallel execution
export default defineConfig({
  fullyParallel: true,
  workers: process.env.CI ? 4 : undefined, // CI: 4 workers, local: CPU cores
  retries: process.env.CI ? 2 : 0, // Retry flaky tests in CI
  use: {
    trace: 'on-first-retry', // Capture trace only when retrying
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
});

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

test('complete purchase workflow', async ({ page }) => {
  await page.goto('https://example.com/products');

  // Auto-waiting for elements
  await page.click('text=Add to Cart');
  await page.click('data-testid=checkout-button');

  // Network request interception
  await page.route('**/api/payment', route => {
    route.fulfill({
      status: 200,
      body: JSON.stringify({ success: true, orderId: '12345' }),
    });
  });

  await page.fill('[name="cardNumber"]', '4242424242424242');
  await page.click('button:has-text("Complete Purchase")');

  // Assertion with auto-retry
  await expect(page.locator('.order-confirmation')).toContainText('Order #12345');
});

describe('User authentication flow', () => {
  it('allows registered user to log in', () => {
    cy.visit('/login');

    // Chainable API with automatic retry
    cy.get('[data-testid="email"]').type('[email protected]');
    cy.get('[data-testid="password"]').type('securePassword123');
    cy.get('button[type="submit"]').click();

    // URL and element assertions
    cy.url().should('include', '/dashboard');
    cy.contains('Welcome back').should('be.visible');

    // Local storage verification
    cy.window().its('localStorage.token').should('exist');
  });
});

// Selenium Java example with explicit waits
WebDriver driver = new ChromeDriver();
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

driver.get("https://example.com/checkout");

WebElement emailField = wait.until(
    ExpectedConditions.presenceOfElementLocated(By.id("email"))
);
emailField.sendKeys("[email protected]");

WebElement submitButton = driver.findElement(By.cssSelector("button[type='submit']"));
submitButton.click();

WebElement confirmation = wait.until(
    ExpectedConditions.visibilityOfElementLocated(By.className("success-message"))
);
assertEquals("Order confirmed", confirmation.getText());

driver.quit();

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();

await page.goto('https://example.com', { waitUntil: 'networkidle2' });

// Evaluate JavaScript in browser context
const title = await page.evaluate(() => document.title);

// Screenshot and PDF generation
await page.screenshot({ path: 'page.png', fullPage: true });
await page.pdf({ path: 'page.pdf', format: 'A4' });

// Performance metrics extraction
const metrics = await page.metrics();
console.log('Page metrics:', metrics);

await browser.close();

// Selenium: Manual wait management
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
WebElement element = wait.until(ExpectedConditions.elementToBeClickable(By.id("submit")));
element.click();

// Playwright: Auto-waiting built-in
await page.click('#submit'); // Automatically waits for element to be actionable

// Migration pattern: Reuse existing page objects with Playwright
class LegacyLoginPage {
  async login(page: Page, email: string, password: string) {
    // Translate Selenium locators to Playwright
    await page.fill('#email', email);
    await page.fill('#password', password);
    await page.click('button[type="submit"]');
  }
}

import { Selector } from 'testcafe';

fixture('Authentication')
  .page('https://example.com/login');

test('User can log in with valid credentials', async t => {
  await t
    .typeText('#email', '[email protected]')
    .typeText('#password', 'securePassword')
    .click('button[type="submit"]')
    .expect(Selector('.dashboard').exists).ok();
});

describe('Shopping cart', () => {
  it('adds items to cart', async () => {
    await browser.url('/products');
    const addButton = await $('button=Add to Cart');
    await addButton.click();

    const cartBadge = await $('.cart-badge');
    await expect(cartBadge).toHaveText('1');
  });
});

// Priority 1: Critical business flows
test('complete purchase flow - authenticated user', async ({ page }) => {
  // Login → Browse → Add to Cart → Checkout → Payment → Confirmation
});

// Priority 2: Common user workflows
test('user can update profile settings', async ({ page }) => {
  // Settings → Edit Profile → Save → Verify
});

// Priority 3: Edge cases and error scenarios
test('displays error when payment fails', async ({ page }) => {
  // Checkout → Invalid Payment → Error Display
});

// Anti-pattern: Tests depending on execution order
test('user registers account', async () => { /* creates account */ });
test('user logs in', async () => { /* assumes account exists */ }); // FRAGILE

// Best practice: Each test establishes required state
test('user logs in with valid credentials', async ({ page }) => {
  // Create user in before hook or factory
  const user = await UserFactory.createInDatabase();

  await page.goto('/login');
  await page.fill('[name="email"]', user.email);
  await page.fill('[name="password"]', user.password);
  await page.click('button[type="submit"]');

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

// Selector reliability hierarchy (best to worst)
const selectors = {
  // Best: Test-specific data attributes
  testId: '[data-testid="submit-button"]',

  // Good: ARIA labels and roles
  ariaLabel: 'button[aria-label="Submit form"]',
  role: 'button:has-text("Submit")',

  // Acceptable: Semantic HTML with stable classes
  semantic: 'form.checkout button.submit-btn',

  // Avoid: Generic classes, absolute XPath, text-only
  fragile: '.btn-123', // Class names change frequently
  xpath: '/html/body/div[3]/form/button[1]', // Breaks with DOM structure changes
};

// React component with test identifiers
export function LoginForm() {
  return (
    <form data-testid="login-form">
      <input data-testid="email-input" type="email" name="email" />
      <input data-testid="password-input" type="password" name="password" />
      <button data-testid="submit-button" type="submit">Log In</button>
    </form>
  );
}

// Implicit auto-waiting (Playwright, Cypress)
await page.click('button'); // Waits for element to be visible and enabled

// Explicit wait for network completion
await page.click('button');
await page.waitForResponse(resp =>
  resp.url().includes('/api/submit') && resp.status() === 200
);

// Wait for specific state transitions
await page.waitForSelector('.loading-spinner', { state: 'hidden' });
await page.waitForSelector('.results', { state: 'visible' });

// Timeout handling for slow operations
await page.click('button', { timeout: 30000 }); // 30s timeout

import { test as base } from '@playwright/test';

// Extend test fixture to seed database
export const test = base.extend({
  authenticatedUser: async ({ page }, use) => {
    const user = await database.users.create({
      email: '[email protected]',
      password: await hashPassword('testPassword123'),
    });

    // Login before test
    await page.goto('/login');
    await page.fill('[name="email"]', user.email);
    await page.fill('[name="password"]', 'testPassword123');
    await page.click('button[type="submit"]');

    await use(user);

    // Cleanup after test
    await database.users.delete(user.id);
  },
});

// Use fixture in tests
test('user can access dashboard', async ({ page, authenticatedUser }) => {
  await page.goto('/dashboard');
  await expect(page.locator('h1')).toContainText(`Welcome, ${authenticatedUser.name}`);
});

test('user can view order history', async ({ page, request }) => {
  // Create test data via API (faster than UI)
  const user = await request.post('/api/users', {
    data: { email: '[email protected]', password: 'pass123' }
  });

  const order = await request.post('/api/orders', {
    data: { userId: user.id, items: [...] }
  });

  // Test UI with data already in place
  await loginAs(page, user);
  await page.goto('/orders');
  await expect(page.locator('.order-list')).toContainText(order.id);
});

// Environment-specific configuration
const config = {
  development: {
    baseURL: 'http://localhost:3000',
    apiURL: 'http://localhost:8000',
  },
  staging: {
    baseURL: 'https://staging.example.com',
    apiURL: 'https://api-staging.example.com',
  },
  production: {
    baseURL: 'https://example.com',
    apiURL: 'https://api.example.com',
  },
};

export default defineConfig({
  use: {
    baseURL: config[process.env.TEST_ENV || 'development'].baseURL,
  },
});

# .github/workflows/e2e-tests.yml
name: E2E Tests

on:
  pull_request:
    branches: [main, develop]
  push:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    timeout-minutes: 30

    strategy:
      fail-fast: false
      matrix:
        browser: [chromium, firefox, webkit]
        shard: [1, 2, 3, 4] # Parallel execution across 4 shards

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install

      - name: Install Playwright browsers
        run: pnpm exec playwright install --with-deps ${{ matrix.browser }}

      - name: Run E2E tests
        run: pnpm exec playwright test --browser=${{ matrix.browser }} --shard=${{ matrix.shard }}/4
        env:
          TEST_ENV: ci
          BASE_URL: http://localhost:3000

      - name: Upload test artifacts
        if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report-${{ matrix.browser }}-${{ matrix.shard }}
          path: playwright-report/
          retention-days: 7

      - name: Upload trace files
        if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-traces-${{ matrix.browser }}-${{ matrix.shard }}
          path: test-results/
          retention-days: 7

# Dockerfile.test
FROM mcr.microsoft.com/playwright:v1.40.0-focal

WORKDIR /app

# Install dependencies
COPY package*.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install --frozen-lockfile

# Copy application code
COPY . .

# Run tests
CMD ["pnpm", "exec", "playwright", "test"]

# docker-compose.test.yml
version: '3.8'
services:
  test:
    build:
      context: .
      dockerfile: Dockerfile.test
    environment:
      - BASE_URL=http://app:3000
      - CI=true
    depends_on:
      - app
      - database
    volumes:
      - ./playwright-report:/app/playwright-report
      - ./test-results:/app/test-results

  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=postgresql://postgres:password@database:5432/testdb

  database:
    image: postgres:15
    environment:
      - POSTGRES_DB=testdb
      - POSTGRES_PASSWORD=password

docker-compose -f docker-compose.test.yml up --abort-on-container-exit

# Fast feedback: Critical smoke tests (2-5 minutes)
- name: Smoke tests
  run: pnpm test:smoke

# If smoke passes, run component tests (5-10 minutes)
- name: Component tests
  if: success()
  run: pnpm test:component

# Full E2E suite only if previous stages pass (15-30 minutes)
- name: Full E2E tests
  if: success()
  run: pnpm test:e2e

# Visual regression tests (parallel with E2E)
- name: Visual regression
  if: success()
  run: pnpm test:visual

// playwright.config.ts - Sharding configuration
export default defineConfig({
  workers: process.env.CI ? 4 : undefined,
  fullyParallel: true,

  // Retry only in CI environments
  retries: process.env.CI ? 2 : 0,

  // Capture diagnostics on retry or failure
  use: {
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
});

// Custom reporter for test analytics
class AnalyticsReporter {
  onTestEnd(test, result) {
    // Send metrics to analytics platform
    analytics.track('test_execution', {
      testName: test.title,
      duration: result.duration,
      status: result.status,
      browser: test.project.name,
      retries: result.retry,
      flaky: result.retry > 0 && result.status === 'passed',
    });
  }
}

# Deploy only after tests pass
deploy:
  needs: [test, security-scan]
  if: success()
  runs-on: ubuntu-latest
  steps:
    - name: Deploy to production
      run: ./deploy.sh production

    - name: Run production smoke tests
      run: pnpm test:smoke --env=production

    - name: Rollback on failure
      if: failure()
      run: ./rollback.sh

// ❌ Fragile: Tied to implementation details
test('updates user state on button click', async ({ page }) => {
  await page.click('#update-btn');
  const state = await page.evaluate(() => window.appState.user.updated);
  expect(state).toBe(true);
});

// ✅ Resilient: Tests user-observable behavior
test('user sees confirmation after updating profile', async ({ page }) => {
  await page.click('text=Update Profile');
  await expect(page.locator('.success-message')).toContainText('Profile updated successfully');
});

// ❌ Tests share state (fragile, can't run in parallel)
let userId;
test('creates user account', async () => {
  userId = await createUser();
});
test('user can login', async () => {
  await loginWithUserId(userId); // Depends on previous test
});

// ✅ Each test creates required state independently
test('user can login after registration', async ({ page }) => {
  const user = await UserFactory.create(); // Fresh state per test
  await page.goto('/login');
  await page.fill('[name="email"]', user.email);
  await page.fill('[name="password"]', user.password);
  await page.click('button[type="submit"]');

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

// Priority 1: Revenue-critical flows
describe('Checkout flow', () => {
  test('guest checkout completes successfully', async () => {});
  test('authenticated user checkout with saved payment', async () => {});
  test('applies discount code correctly', async () => {});
  test('handles payment failure gracefully', async () => {});
});

// Priority 2: Common workflows
describe('User account management', () => {
  test('user can update profile information', async () => {});
  test('user can change password', async () => {});
});

// Priority 3: Edge cases (fewer tests, acceptable to skip in CI)
describe('Error handling', () => {
  test('displays error on network timeout', async () => {});
});

// ❌ Mega-test covering multiple scenarios (slow, hard to debug)
test('complete user journey', async ({ page }) => {
  // 200 lines testing registration, login, browsing, cart, checkout, profile...
});

// ✅ Focused tests (fast, clear failure diagnosis)
test('user can register new account', async ({ page }) => {
  // 10-20 lines focused on registration
});

test('registered user can complete checkout', async ({ page }) => {
  // 15-25 lines focused on checkout
});

// Define reusable fixture
export const test = base.extend({
  authenticatedPage: async ({ page, context }, use) => {
    // Setup: Create user and login
    const user = await createUser();
    await context.addCookies([{
      name: 'auth_token',
      value: await generateToken(user),
      domain: 'example.com',
      path: '/',
    }]);

    await use(page);

    // Teardown: Cleanup user
    await deleteUser(user.id);
  },
});

// Use in tests without duplication
test('authenticated user can view orders', async ({ authenticatedPage }) => {
  await authenticatedPage.goto('/orders');
  await expect(authenticatedPage.locator('h1')).toContainText('Your Orders');
});

test('user can submit contact form', async ({ page }) => {
  await test.step('Navigate to contact page', async () => {
    await page.goto('/contact');
    await expect(page.locator('h1')).toContainText('Contact Us');
  });

  await test.step('Fill form fields', async () => {
    await page.fill('[name="name"]', 'Test User');
    await page.fill('[name="email"]', '[email protected]');
    await page.fill('[name="message"]', 'Test message content');
  });

  await test.step('Submit form and verify confirmation', async () => {
    await page.click('button[type="submit"]');
    await expect(page.locator('.success-message')).toBeVisible();
  });
});

// ❌ Flaky: Race condition between click and navigation
await page.click('a[href="/next-page"]');
await expect(page.locator('h1')).toContainText('Next Page');

// ✅ Reliable: Wait for navigation to complete
await Promise.all([
  page.waitForNavigation(),
  page.click('a[href="/next-page"]'),
]);
await expect(page.locator('h1')).toContainText('Next Page');

// ❌ Flaky: Element not ready for interaction
await page.click('button');

// ✅ Reliable: Ensure element is actionable
await page.waitForSelector('button:not([disabled])');
await page.click('button');

// ❌ Flaky: Timing-dependent assertion
await page.click('button');
expect(await page.textContent('.result')).toBe('Success'); // May not be ready

// ✅ Reliable: Assertion with auto-retry
await page.click('button');
await expect(page.locator('.result')).toHaveText('Success'); // Retries until timeout

import { injectAxe, checkA11y } from 'axe-playwright';

test('homepage is accessible', async ({ page }) => {
  await page.goto('/');
  await injectAxe(page);

  // Check entire page for accessibility violations
  await checkA11y(page, null, {
    detailedReport: true,
    detailedReportOptions: { html: true },
  });
});

test('form fields have proper labels', async ({ page }) => {
  await page.goto('/signup');

  // Check specific element
  const emailInput = page.locator('[name="email"]');
  await expect(emailInput).toHaveAttribute('aria-label');

  // Verify keyboard navigation
  await page.keyboard.press('Tab');
  await expect(emailInput).toBeFocused();
});

// playwright.config.ts - Optimized parallel configuration
export default defineConfig({
  // Adjust workers based on available resources
  workers: process.env.CI ? Math.min(os.cpus().length, 10) : undefined,

  // Enable full parallelization
  fullyParallel: true,

  // Set aggressive timeouts for CI
  timeout: 30 * 1000, // 30s per test
  expect: {
    timeout: 5 * 1000, // 5s for assertions
  },

  // Reuse browser contexts to reduce overhead
  use: {
    launchOptions: {
      slowMo: 0, // No artificial delays
    },
  },
});

// Reuse browser context across tests in same file (faster)
let context;

test.beforeAll(async ({ browser }) => {
  context = await browser.newContext();
});

test.afterAll(async () => {
  await context.close();
});

test('test 1', async () => {
  const page = await context.newPage();
  // Test implementation
});

test('test 2', async () => {
  const page = await context.newPage();
  // Test implementation
});

// Mock unstable external services
await page.route('**/api.external-service.com/**', route => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ data: 'mocked response' }),
  });
});

// Wait for specific network requests
await Promise.all([
  page.waitForResponse(resp => resp.url().includes('/api/data') && resp.ok()),
  page.click('button'),
]);

// Disable animations globally (faster, more reliable)
await page.addStyleTag({
  content: `
    *, *::before, *::after {
      animation-duration: 0s !important;
      animation-delay: 0s !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
    }
  `
});

// Or wait for animations to complete
await page.waitForFunction(() => {
  const el = document.querySelector('.animated-element');
  return window.getComputedStyle(el).animationPlayState === 'finished';
});

// ❌ Flaky: Immediate assertion
await page.click('button');
const text = await page.textContent('.result');
expect(text).toBe('Success');

// ✅ Reliable: Auto-retrying assertion
await page.click('button');
await expect(page.locator('.result')).toHaveText('Success', { timeout: 10000 });

// playwright.config.ts
export default defineConfig({
  // Retry failed tests in CI only
  retries: process.env.CI ? 2 : 0,

  // Capture detailed diagnostics on retry
  use: {
    trace: 'retain-on-failure',
    screenshot: 'only-on-failure',
    video: 'retry-with-video',
  },

  // Different retry strategy per project
  projects: [
    {
      name: 'chromium-stable',
      use: { ...devices['Desktop Chrome'] },
      retries: 1, // Fewer retries for stable browser
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
      retries: 3, // More retries for less stable browser
    },
  ],
});

# Lock browser versions for consistency
pnpm exec playwright install --with-deps [email protected]

# Verify installed browsers
pnpm exec playwright install --dry-run

// Prevent resource exhaustion in long-running suites
test.afterEach(async ({ page, context }) => {
  // Clear storage between tests
  await context.clearCookies();
  await page.evaluate(() => {
    localStorage.clear();
    sessionStorage.clear();
  });

  // Close unused pages
  const pages = context.pages();
  await Promise.all(pages.slice(1).map(p => p.close()));
});

// Custom reporter tracking test health metrics
class HealthReporter {
  private metrics = {
    totalTests: 0,
    flakyTests: new Set(),
    slowTests: [],
    avgDuration: 0,
  };

  onTestEnd(test, result) {
    this.metrics.totalTests++;

    // Track flaky tests (passed after retry)
    if (result.retry > 0 && result.status === 'passed') {
      this.metrics.flakyTests.add(test.title);
    }

    // Track slow tests (>30s)
    if (result.duration > 30000) {
      this.metrics.slowTests.push({
        name: test.title,
        duration: result.duration,
      });
    }
  }

  onEnd() {
    // Alert if flakiness exceeds threshold
    if (this.metrics.flakyTests.size > 5) {
      console.error(`⚠️ High flakiness detected: ${this.metrics.flakyTests.size} flaky tests`);
    }
  }
}

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

test('homepage matches visual baseline', async ({ page }) => {
  await page.goto('/');

  // Wait for dynamic content to load
  await page.waitForSelector('.hero-section img');

  // Capture and compare screenshot
  await expect(page).toHaveScreenshot('homepage.png', {
    fullPage: true,
    animations: 'disabled',
    maxDiffPixels: 100, // Allow minor anti-aliasing differences
  });
});

test('button states match design system', async ({ page }) => {
  await page.goto('/components');

  const button = page.locator('button.primary');

  // Default state
  await expect(button).toHaveScreenshot('button-default.png');

  // Hover state
  await button.hover();
  await expect(button).toHaveScreenshot('button-hover.png');

  // Focus state
  await button.focus();
  await expect(button).toHaveScreenshot('button-focus.png');
});

pnpm exec playwright test --update-snapshots

// Integration with visual testing platform
import { percySnapshot } from '@percy/playwright';

test('responsive design across breakpoints', async ({ page }) => {
  await page.goto('/');

  // Capture at multiple viewports
  await page.setViewportSize({ width: 375, height: 667 }); // Mobile
  await percySnapshot(page, 'Homepage - Mobile');

  await page.setViewportSize({ width: 768, height: 1024 }); // Tablet
  await percySnapshot(page, 'Homepage - Tablet');

  await page.setViewportSize({ width: 1920, height: 1080 }); // Desktop
  await percySnapshot(page, 'Homepage - Desktop');
});

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

test('homepage loads within performance budget', async ({ page }) => {
  await page.goto('/');

  // Capture performance metrics
  const metrics = await page.evaluate(() => {
    const navigation = performance.getEntriesByType('navigation')[0];
    const paint = performance.getEntriesByType('paint');

    return {
      domContentLoaded: navigation.domContentLoadedEventEnd - navigation.fetchStart,
      loadComplete: navigation.loadEventEnd - navigation.fetchStart,
      firstPaint: paint.find(p => p.name === 'first-paint')?.startTime,
      firstContentfulPaint: paint.find(p => p.name === 'first-contentful-paint')?.startTime,
      transferSize: navigation.transferSize,
    };
  });

  // Assert performance budgets
  expect(metrics.domContentLoaded).toBeLessThan(1500); // <1.5s
  expect(metrics.loadComplete).toBeLessThan(3000); // <3s
  expect(metrics.firstContentfulPaint).toBeLessThan(1000); // <1s
  expect(metrics.transferSize).toBeLessThan(500000); // <500KB
});

test('core web vitals meet thresholds', async ({ page }) => {
  await page.goto('/');

  const vitals = await page.evaluate(async () => {
    // Import web-vitals library
    const { onLCP, onFID, onCLS } = await import('https://unpkg.com/web-vitals@3?module');

    return new Promise(resolve => {
      const metrics = {};
      onLCP(metric => metrics.lcp = metric.value);
      onFID(metric => metrics.fid = metric.value);
      onCLS(metric => metrics.cls = metric.value);

      setTimeout(() => resolve(metrics), 5000);
    });
  });

  // Assert Core Web Vitals thresholds
  expect(vitals.lcp).toBeLessThan(2500); // Good LCP: <2.5s
  expect(vitals.fid).toBeLessThan(100); // Good FID: <100ms
  expect(vitals.cls).toBeLessThan(0.1); // Good CLS: <0.1
});

// playwright.config.ts
export default defineConfig({
  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'] },
    },
  ],
});

// Test with browser-specific handling
test('file upload works across browsers', async ({ page, browserName }) => {
  await page.goto('/upload');

  const fileInput = page.locator('input[type="file"]');

  // Set file
  await fileInput.setInputFiles('./test-file.pdf');

  // Browser-specific assertion handling
  if (browserName === 'webkit') {
    // WebKit displays file name differently
    await expect(page.locator('.file-name')).toContainText('test-file');
  } else {
    await expect(page.locator('.file-name')).toContainText('test-file.pdf');
  }
});

test('checkout flow persists order correctly', async ({ page, request }) => {
  // UI interaction
  await page.goto('/products');
  await page.click('text=Add to Cart');
  await page.click('data-testid=checkout');
  await fillCheckoutForm(page);
  await page.click('button:has-text("Place Order")');

  // Extract order ID from UI
  const orderId = await page.locator('.order-id').textContent();

  // Verify via API
  const orderResponse = await request.get(`/api/orders/${orderId}`);
  expect(orderResponse.ok()).toBeTruthy();

  const orderData = await orderResponse.json();
  expect(orderData).toMatchObject({
    status: 'pending',
    items: expect.arrayContaining([
      expect.objectContaining({ productId: expect.any(String) })
    ]),
    total: expect.any(Number),
  });
});

const viewports = [
  { name: 'mobile', width: 375, height: 667 },
  { name: 'tablet', width: 768, height: 1024 },
  { name: 'desktop', width: 1920, height: 1080 },
];

for (const viewport of viewports) {
  test(`navigation works on ${viewport.name}`, async ({ page }) => {
    await page.setViewportSize(viewport);
    await page.goto('/');

    if (viewport.width < 768) {
      // Mobile: hamburger menu
      await page.click('[aria-label="Menu"]');
      await expect(page.locator('.mobile-nav')).toBeVisible();
    } else {
      // Desktop: inline navigation
      await expect(page.locator('.desktop-nav')).toBeVisible();
    }
  });
}

test('application is secure against common vulnerabilities', async ({ page }) => {
  await page.goto('/login');

  // Test CSRF protection
  const csrfToken = await page.getAttribute('input[name="_csrf"]', 'value');
  expect(csrfToken).toBeTruthy();

  // Test XSS protection
  await page.fill('[name="username"]', '<script>alert("XSS")</script>');
  await page.click('button[type="submit"]');

  // Verify script not executed
  const dialogPromise = page.waitForEvent('dialog', { timeout: 1000 }).catch(() => null);
  const dialog = await dialogPromise;
  expect(dialog).toBeNull(); // No alert should appear

  // Test Content Security Policy
  const cspHeader = await page.evaluate(() => {
    const meta = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
    return meta?.getAttribute('content');
  });
  expect(cspHeader).toContain("script-src 'self'");
});

# Docker-based self-hosted test grid
version: '3.8'
services:
  selenium-hub:
    image: selenium/hub:latest
    ports:
      - "4444:4444"

  chrome:
    image: selenium/node-chrome:latest
    depends_on:
      - selenium-hub
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443
    volumes:
      - /dev/shm:/dev/shm
    deploy:
      replicas: 4 # Scale based on load

// Cost-optimized test configuration
export default defineConfig({
  // Aggressive parallelization
  workers: '75%', // Use 75% of available CPU cores
  fullyParallel: true,

  // Fail fast to save compute time
  maxFailures: process.env.CI ? 10 : undefined,

  // Minimal retries to reduce duplicate execution
  retries: 1,

  // Disable expensive features in CI
  use: {
    video: 'retain-on-failure', // Only when needed
    trace: 'on-first-retry', // Not every test
    screenshot: 'only-on-failure',
  },
});

// playwright.config.ts - Tiered testing strategy
export default defineConfig({
  projects: [
    // Tier 1: All tests in Chromium (primary browser)
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      testMatch: '**/*.spec.ts', // All tests
    },

    // Tier 2: Critical paths only in Firefox/Safari
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
      testMatch: '**/critical/**/*.spec.ts', // Subset
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
      testMatch: '**/critical/**/*.spec.ts', // Subset
    },
  ],
});

// Intelligent artifact retention
test.afterEach(async ({ page }, testInfo) => {
  // Only save artifacts for failures
  if (testInfo.status !== 'passed') {
    // Compress screenshots before saving
    const screenshot = await page.screenshot();
    await sharp(screenshot)
      .resize({ width: 1280 }) // Reduce resolution
      .jpeg({ quality: 80 }) // Compress
      .toFile(`screenshots/${testInfo.testId}.jpg`);
  }
});

# GitHub Actions artifact retention policy
- name: Upload artifacts
  if: failure()
  uses: actions/upload-artifact@v4
  with:
    name: test-artifacts
    path: test-results/
    retention-days: 7 # Reduce from default 90 days

# Playwright experimental test selection
pnpm exec playwright test --only-changed

# Custom implementation based on git diff
git diff --name-only HEAD^ HEAD | \
  grep -E 'src/components/Checkout' && \
  pnpm exec playwright test tests/checkout/ || \
  echo "No checkout changes, skipping tests"

# Run single test with inspector (step through execution)
pnpm exec playwright test --debug tests/login.spec.ts

# Generate trace for specific test
pnpm exec playwright test --trace on tests/checkout.spec.ts

# Open trace viewer for failed test
pnpm exec playwright show-trace test-results/checkout-failed/trace.zip

test('complex workflow with detailed logging', async ({ page }) => {
  console.log('🎯 Starting checkout workflow test');

  await page.goto('/products');
  console.log('✅ Navigated to products page');

  await page.click('text=Add to Cart');
  const cartCount = await page.locator('.cart-badge').textContent();
  console.log(`🛒 Cart updated: ${cartCount} items`);

  await page.click('[href="/checkout"]');
  const url = page.url();
  console.log(`🔗 Current URL: ${url}`);

  // Capture network requests
  page.on('response', response => {
    if (response.url().includes('/api/')) {
      console.log(`📡 API Response: ${response.url()} - ${response.status()}`);
    }
  });

  await page.fill('[name="email"]', '[email protected]');
  console.log('📝 Email field populated');
});

// Log all network requests
page.on('request', request => {
  console.log(`→ ${request.method()} ${request.url()}`);
});

page.on('response', async response => {
  const request = response.request();
  const status = response.status();
  const body = await response.text().catch(() => '[binary]');

  console.log(`← ${status} ${request.url()}`);
  if (status >= 400) {
    console.error(`❌ Failed request body:`, body);
  }
});

// Mock failing requests for debugging error handling
await page.route('**/api/submit', route => {
  route.fulfill({
    status: 500,
    contentType: 'application/json',
    body: JSON.stringify({ error: 'Internal Server Error' }),
  });
});

test('debug element visibility', async ({ page }) => {
  await page.goto('/form');

  const button = page.locator('button[type="submit"]');

  // Check element state
  console.log('Visible:', await button.isVisible());
  console.log('Enabled:', await button.isEnabled());
  console.log('Editable:', await button.isEditable());

  // Get computed styles
  const styles = await button.evaluate(el => {
    const computed = window.getComputedStyle(el);
    return {
      display: computed.display,
      visibility: computed.visibility,
      opacity: computed.opacity,
      pointerEvents: computed.pointerEvents,
    };
  });
  console.log('Styles:', styles);

  // Check bounding box
  const box = await button.boundingBox();
  console.log('Position:', box);
});

// ❌ Fails immediately if element not ready
await page.click('.dynamic-button');

// ✅ Wait for element with explicit timeout
await page.waitForSelector('.dynamic-button', { state: 'visible', timeout: 10000 });
await page.click('.dynamic-button');

// ✅ Use assertion with auto-retry
await expect(page.locator('.dynamic-button')).toBeVisible();
await page.click('.dynamic-button');

// ❌ Overlay blocking target element
await page.click('.submit-button'); // Error: element is not visible

// ✅ Wait for overlay to disappear
await page.waitForSelector('.loading-overlay', { state: 'hidden' });
await page.click('.submit-button');

// ✅ Force click (use cautiously)
await page.click('.submit-button', { force: true });

// ❌ Race condition between click and assertion
await page.click('button');
expect(await page.textContent('.result')).toBe('Success');

// ✅ Wait for state change
await page.click('button');
await page.waitForSelector('.result:has-text("Success")');
await expect(page.locator('.result')).toHaveText('Success');