cv-site/tests/mjs/verify-theme-button-fix.mjs

#!/usr/bin/env bun
import { chromium } from 'playwright';

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

  console.log('🔍 Testing theme button visibility on DESKTOP...\n');

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

  // Check theme button
  const themeButton = page.locator('#color-theme-switcher');
  const exists = await themeButton.count() > 0;
  console.log(exists ? '✅ Theme button exists in DOM' : '❌ Theme button NOT in DOM');

  if (exists) {
    const isVisible = await themeButton.isVisible();
    console.log(isVisible ? '✅ Theme button is VISIBLE' : '❌ Theme button is NOT visible');

    const box = await themeButton.boundingBox();
    console.log('\n📦 Bounding box:', box);

    // Check if Y position is positive (on screen)
    if (box && box.y > 0) {
      console.log('✅ Button is ON SCREEN (y > 0)');
    } else if (box && box.y < 0) {
      console.log('❌ Button is ABOVE SCREEN (y < 0) - STILL BROKEN');
    }

    // Get computed position
    const position = await page.evaluate(() => {
      const btn = document.getElementById('color-theme-switcher');
      const computed = window.getComputedStyle(btn);
      return {
        position: computed.position,
        bottom: computed.bottom,
        left: computed.left,
        top: computed.top
      };
    });

    console.log('\n🎨 Computed position:', position);

    if (position.position === 'fixed') {
      console.log('✅ Position is FIXED (correct!)');
    } else {
      console.log(`❌ Position is ${position.position} (should be fixed)`);
    }

    // Take screenshot
    await page.screenshot({
      path: '/Users/txeo/Git/yo/cv/tests/mjs/screenshots/theme-button-fixed.png',
      fullPage: false
    });
    console.log('\n📸 Screenshot saved to screenshots/theme-button-fixed.png');

    // Test tooltip
    console.log('\n🎯 Testing tooltip...');
    await themeButton.hover();
    await page.waitForTimeout(500);

    const tooltipVisible = await page.evaluate(() => {
      const btn = document.getElementById('color-theme-switcher');
      const computed = window.getComputedStyle(btn, '::before');
      return {
        opacity: computed.opacity,
        visibility: computed.visibility,
        content: computed.content
      };
    });

    console.log('💬 Tooltip state:', tooltipVisible);
    if (parseFloat(tooltipVisible.opacity) > 0.5) {
      console.log('✅ Tooltip is VISIBLE on hover');
    } else {
      console.log('⚠️  Tooltip opacity is low or hidden');
    }
  }

  console.log('\n✅ Test complete - browser will close in 5 seconds');
  await page.waitForTimeout(5000);
  await browser.close();
})();