veza/apps/web/playwright.config.visual.ts

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

/**
 * Playwright config for pixel-perfect visual regression (capture & compare).
 *
 * - Viewport fixe 1280×720, dark mode forcé, reduced motion.
 * - Désactivation des animations CSS via inject-style (fixture / beforeEach).
 * - Sortie : visual-tests/current/ (capture) ou visual-tests/baselines/ (update).
 *
 * Usage:
 *   npm run visual:capture   → écrit dans visual-tests/current/
 *   npm run visual:update    → écrit dans visual-tests/baselines/
 *   npm run visual:compare   → script generate-visual-report.mjs (baselines vs current)
 */
const VIEWPORT = { width: 1280, height: 720 };
const THEME = 'dark';
const VIEWPORT_LABEL = 'desktop';

export const visualOutputDir = process.env.VISUAL_UPDATE_BASELINES
  ? path.join(process.cwd(), 'visual-tests', 'baselines')
  : path.join(process.cwd(), 'visual-tests', 'current');

export function screenshotName(screenName: string): string {
  return `${screenName}-${VIEWPORT_LABEL}-${THEME}.png`;
}

export default defineConfig({
  testDir: './e2e',
  testMatch: /visual-complete\.spec\.ts/,
  fullyParallel: false,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 1 : 0,
  workers: 1,
  timeout: 45000,

  outputDir: 'e2e/test-results-visual',
  reporter: [
    ['html', { outputFolder: 'e2e/playwright-report-visual', open: 'never' }],
    ['list'],
  ],

  use: {
    baseURL: process.env.PLAYWRIGHT_BASE_URL || process.env.VITE_FRONTEND_URL || 'http://localhost:5173',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'off',
    viewport: VIEWPORT,
    deviceScaleFactor: 1,
    isMobile: false,
    hasTouch: false,
    locale: 'en-US',
    timezoneId: 'Europe/Paris',
    reducedMotion: 'reduce',
    colorScheme: 'dark',
    storageState: process.env.VISUAL_NO_AUTH ? undefined : 'e2e/.auth/user.json',
  },

  projects: [
    {
      name: 'chromium-desktop',
      use: {
        ...devices['Desktop Chrome'],
        viewport: VIEWPORT,
        deviceScaleFactor: 1,
        reducedMotion: 'reduce',
        colorScheme: 'dark',
      },
    },
  ],

  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: true,
    timeout: 120_000,
  },
});