cv-site/tests/test-visual-states.mjs

import { chromium } from '@playwright/test';
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';
import fs from 'fs';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const screenshotsDir = join(__dirname, 'test-screenshots');

// Ensure screenshots directory exists
if (!fs.existsSync(screenshotsDir)) {
  fs.mkdirSync(screenshotsDir);
}

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 }
  });
  const page = await context.newPage();

  console.log('🎨 Testing Zoom Toggle Button Visual States...\n');

  await page.goto('http://localhost:1999');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(1000);

  // Clear localStorage for fresh start
  await page.evaluate(() => localStorage.clear());
  await page.reload();
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(500);

  const toggleBtn = page.locator('#zoom-toggle-button');

  // State 1: Inactive (default)
  console.log('📸 State 1: Inactive (default)');
  const inactiveStyles = await toggleBtn.evaluate(el => {
    const styles = window.getComputedStyle(el);
    return {
      background: styles.backgroundColor,
      color: styles.color,
      opacity: styles.opacity
    };
  });
  console.log('   Background:', inactiveStyles.background);
  console.log('   Icon color:', inactiveStyles.color);
  console.log('   Opacity:', inactiveStyles.opacity);
  await page.screenshot({ path: join(screenshotsDir, '1-inactive.png') });

  // State 2: Inactive hover
  console.log('\n📸 State 2: Inactive hover');
  await toggleBtn.hover();
  await page.waitForTimeout(300);
  const inactiveHoverStyles = await toggleBtn.evaluate(el => {
    const styles = window.getComputedStyle(el);
    return {
      background: styles.backgroundColor,
      color: styles.color,
      opacity: styles.opacity,
      transform: styles.transform
    };
  });
  console.log('   Background:', inactiveHoverStyles.background);
  console.log('   Icon color:', inactiveHoverStyles.color);
  console.log('   Opacity:', inactiveHoverStyles.opacity);
  console.log('   Transform:', inactiveHoverStyles.transform);
  await page.screenshot({ path: join(screenshotsDir, '2-inactive-hover.png') });

  // Move mouse away
  await page.mouse.move(500, 500);
  await page.waitForTimeout(300);

  // State 3: Active (zoom opened)
  console.log('\n📸 State 3: Active (zoom opened)');
  await toggleBtn.click();
  await page.waitForTimeout(500);
  const activeStyles = await toggleBtn.evaluate(el => {
    const styles = window.getComputedStyle(el);
    return {
      background: styles.backgroundColor,
      color: styles.color,
      opacity: styles.opacity
    };
  });
  console.log('   Background:', activeStyles.background);
  console.log('   Icon color:', activeStyles.color);
  console.log('   Opacity:', activeStyles.opacity);
  await page.screenshot({ path: join(screenshotsDir, '3-active.png') });

  // State 4: Active hover
  console.log('\n📸 State 4: Active hover');
  await toggleBtn.hover();
  await page.waitForTimeout(300);
  const activeHoverStyles = await toggleBtn.evaluate(el => {
    const styles = window.getComputedStyle(el);
    return {
      background: styles.backgroundColor,
      color: styles.color,
      opacity: styles.opacity,
      transform: styles.transform,
      boxShadow: styles.boxShadow
    };
  });
  console.log('   Background:', activeHoverStyles.background);
  console.log('   Icon color:', activeHoverStyles.color);
  console.log('   Opacity:', activeHoverStyles.opacity);
  console.log('   Transform:', activeHoverStyles.transform);
  console.log('   Box shadow:', activeHoverStyles.boxShadow);
  await page.screenshot({ path: join(screenshotsDir, '4-active-hover.png') });

  console.log('\n✅ Visual state tests complete!');
  console.log(`📁 Screenshots saved to: ${screenshotsDir}`);
  console.log('\n🎯 Summary:');
  console.log('   - Inactive: Gray icon (#888), 60% opacity');
  console.log('   - Inactive hover: Lighter gray bg, brighter icon (#aaa), 80% opacity');
  console.log('   - Active: Blue bg, white icon, 100% opacity');
  console.log('   - Active hover: Darker blue, blue glow, slight scale');

  await page.waitForTimeout(5000);
  await browser.close();
})();