leptos-shadcn-ui/playwright.config.ts

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

/**
 * Enhanced Playwright Configuration for leptos-shadcn-ui
 * 
 * This configuration provides comprehensive E2E testing with CI/CD integration,
 * performance monitoring, and cross-browser compatibility testing.
 */

// Environment-based configuration
const isCI = !!process.env.CI;
const isDebug = !!process.env.DEBUG;
const isHeadless = process.env.HEADLESS !== 'false';

// Performance thresholds
const PERFORMANCE_THRESHOLDS = {
  maxInitializationTime: parseInt(process.env.MAX_INIT_TIME || '5000'),
  maxFirstPaint: parseInt(process.env.MAX_FIRST_PAINT || '3000'),
  maxFirstContentfulPaint: parseInt(process.env.MAX_FCP || '4000'),
  maxInteractionLatency: parseInt(process.env.MAX_INTERACTION_LATENCY || '100'),
};

// Browser-specific configurations
const browserConfigs = {
  chromium: {
    timeout: 30000,
    retries: isCI ? 2 : 0,
    headless: isHeadless,
  },
  firefox: {
    timeout: 35000,
    retries: isCI ? 2 : 0,
    headless: isHeadless,
  },
  webkit: {
    timeout: 40000,
    retries: isCI ? 3 : 0,
    headless: isHeadless,
  },
  'Mobile Chrome': {
    timeout: 45000,
    retries: isCI ? 2 : 0,
    headless: isHeadless,
  },
  'Mobile Safari': {
    timeout: 50000,
    retries: isCI ? 3 : 0,
    headless: isHeadless,
  },
};

export default defineConfig({
  testDir: './tests/e2e',
  
  /* Run tests in files in parallel */
  fullyParallel: !isDebug,
  
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: isCI,
  
  /* Retry on CI only */
  retries: isCI ? 2 : 0,
  
  /* Opt out of parallel tests on CI or debug mode. */
  workers: isCI ? 1 : isDebug ? 1 : undefined,
  
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: [
    // HTML reporter for local development
    ['html', { 
      open: isDebug ? 'always' : 'never',
      outputFolder: 'test-results/html-report'
    }],
    
    // JSON reporter for CI/CD integration
    ['json', { 
      outputFile: 'test-results/results.json' 
    }],
    
    // JUnit reporter for CI/CD systems
    ['junit', { 
      outputFile: 'test-results/results.xml' 
    }],
    
    // Line reporter for CI
    ...(isCI ? [['line']] : []),
    
    // List reporter for debug mode
    ...(isDebug ? [['list']] : []),
  ],
  
  /* Shared settings for all the projects below. */
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    baseURL: process.env.BASE_URL || 'http://localhost:8082',
    
    /* Collect trace when retrying the failed test. */
    trace: isCI ? 'on-first-retry' : 'retain-on-failure',
    
    /* Take screenshot on failure */
    screenshot: 'only-on-failure',
    
    /* Record video on failure */
    video: isCI ? 'retain-on-failure' : 'retain-on-failure',
    
    /* Global test timeout */
    actionTimeout: 10000,
    navigationTimeout: 30000,
    
    /* Ignore HTTPS errors */
    ignoreHTTPSErrors: true,
    
    /* Extra HTTP headers */
    extraHTTPHeaders: {
      'Accept-Language': 'en-US,en;q=0.9',
    },
    
    /* Viewport size */
    viewport: { width: 1280, height: 720 },
    
    /* User agent */
    userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
  },
  
  /* Configure projects for major browsers */
  projects: [
    // Desktop browsers
    {
      name: 'chromium',
      use: { 
        ...devices['Desktop Chrome'],
        ...browserConfigs.chromium,
      },
    },
    {
      name: 'firefox',
      use: { 
        ...devices['Desktop Firefox'],
        ...browserConfigs.firefox,
      },
    },
    {
      name: 'webkit',
      use: { 
        ...devices['Desktop Safari'],
        ...browserConfigs.webkit,
      },
    },
    
    // Mobile browsers
    {
      name: 'Mobile Chrome',
      use: { 
        ...devices['Pixel 5'],
        ...browserConfigs['Mobile Chrome'],
      },
    },
    {
      name: 'Mobile Safari',
      use: { 
        ...devices['iPhone 12'],
        ...browserConfigs['Mobile Safari'],
      },
    },
    
    // Test-specific projects
    {
      name: 'accessibility-tests',
      testMatch: '**/accessibility*.spec.ts',
      use: { 
        ...devices['Desktop Chrome'],
        ...browserConfigs.chromium,
      },
    },
    {
      name: 'performance-tests',
      testMatch: '**/performance*.spec.ts',
      use: { 
        ...devices['Desktop Chrome'],
        ...browserConfigs.chromium,
      },
    },
    {
      name: 'wasm-tests',
      testMatch: '**/wasm*.spec.ts',
      use: { 
        ...devices['Desktop Chrome'],
        ...browserConfigs.chromium,
      },
    },
  ],
  
  /* Run your local dev server before starting the tests */
  webServer: [
    {
      command: 'cd examples/leptos && trunk serve --port 8082',
      port: 8082,
      reuseExistingServer: !isCI,
      timeout: 120 * 1000,
      stdout: 'pipe',
      stderr: 'pipe',
    },
    // Additional server for WASM tests
    {
      command: 'cd minimal-wasm-test && python3 -m http.server 8083',
      port: 8083,
      reuseExistingServer: !isCI,
      timeout: 30 * 1000,
      stdout: 'pipe',
      stderr: 'pipe',
    },
  ],
  
  /* Global setup and teardown */
  globalSetup: require.resolve('./tests/e2e/global-setup.ts'),
  globalTeardown: require.resolve('./tests/e2e/global-teardown.ts'),
  
  /* Test timeout */
  timeout: 30 * 1000,
  expect: {
    timeout: 5 * 1000,
  },
  
  /* Output directory for test artifacts */
  outputDir: 'test-results/',
  
  /* Global test timeout */
  globalTimeout: isCI ? 60 * 60 * 1000 : 30 * 60 * 1000, // 1 hour in CI, 30 minutes locally
  
  /* Maximum number of test failures */
  maxFailures: isCI ? 10 : undefined,
  
  /* Update snapshots */
  updateSnapshots: process.env.UPDATE_SNAPSHOTS === 'true',
  
  /* Ignore test files */
  testIgnore: [
    '**/node_modules/**',
    '**/dist/**',
    '**/build/**',
    '**/.git/**',
  ],
  
  /* Test match patterns */
  testMatch: [
    '**/*.spec.ts',
    '**/*.test.ts',
  ],
  
  /* Metadata for test results */
  metadata: {
    testEnvironment: isCI ? 'ci' : 'local',
    browserVersions: {
      chromium: process.env.CHROMIUM_VERSION || 'latest',
      firefox: process.env.FIREFOX_VERSION || 'latest',
      webkit: process.env.WEBKIT_VERSION || 'latest',
    },
    performanceThresholds: PERFORMANCE_THRESHOLDS,
  },
});

// Export configuration for use in other files
export { PERFORMANCE_THRESHOLDS, browserConfigs };