cv-site/tests/mjs/60-sidebar-content-debug.mjs

#!/usr/bin/env node

import { chromium } from 'playwright';

const LANDSCAPE_VIEWPORT = { width: 667, height: 375 };

(async () => {
    const browser = await chromium.launch({ headless: true });
    const context = await browser.newContext({
        viewport: LANDSCAPE_VIEWPORT,
        userAgent: 'Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.91 Mobile Safari/537.36',
        hasTouch: true
    });
    const page = await context.newPage();

    await page.goto('http://localhost:1999/?lang=en&view=extended');
    await page.waitForLoadState('networkidle');

    const sidebarDebug = await page.evaluate(() => {
        const sidebar = document.querySelector('.cv-sidebar-left');
        const accordion = document.querySelector('.sidebar-accordion');
        const accordionHeader = document.querySelector('.sidebar-accordion-header');
        const accordionContent = document.querySelector('.sidebar-accordion-content');
        const actualContent = sidebar?.querySelector('.actual-content');
        const skeletonContent = sidebar?.querySelector('.skeleton-content');

        const sidebarRect = sidebar?.getBoundingClientRect();
        const accordionRect = accordion?.getBoundingClientRect();
        const headerRect = accordionHeader?.getBoundingClientRect();
        const contentRect = accordionContent?.getBoundingClientRect();

        return {
            sidebarExists: !!sidebar,
            sidebarDisplay: sidebar ? window.getComputedStyle(sidebar).display : 'N/A',
            sidebarHeight: sidebarRect ? Math.round(sidebarRect.height) : 0,
            sidebarWidth: sidebarRect ? Math.round(sidebarRect.width) : 0,

            accordionExists: !!accordion,
            accordionOpen: accordion?.hasAttribute('open'),
            accordionHeight: accordionRect ? Math.round(accordionRect.height) : 0,

            headerExists: !!accordionHeader,
            headerHeight: headerRect ? Math.round(headerRect.height) : 0,
            headerDisplay: accordionHeader ? window.getComputedStyle(accordionHeader).display : 'N/A',

            contentExists: !!accordionContent,
            contentHeight: contentRect ? Math.round(contentRect.height) : 0,
            contentDisplay: accordionContent ? window.getComputedStyle(accordionContent).display : 'N/A',
            contentOpacity: accordionContent ? window.getComputedStyle(accordionContent).opacity : 'N/A',

            actualContentDisplay: actualContent ? window.getComputedStyle(actualContent).display : 'N/A',
            actualContentOpacity: actualContent ? window.getComputedStyle(actualContent).opacity : 'N/A',

            skeletonContentDisplay: skeletonContent ? window.getComputedStyle(skeletonContent).display : 'N/A',
            skeletonContentOpacity: skeletonContent ? window.getComputedStyle(skeletonContent).opacity : 'N/A',

            sidebarClasses: sidebar ? sidebar.className : 'N/A',
            parentClasses: sidebar?.parentElement ? sidebar.parentElement.className : 'N/A'
        };
    });

    console.log('Sidebar Content Debug:\n');
    console.log('Sidebar Element:');
    console.log(`  • Exists: ${sidebarDebug.sidebarExists ? '✅' : '❌'}`);
    console.log(`  • Display: ${sidebarDebug.sidebarDisplay}`);
    console.log(`  • Size: ${sidebarDebug.sidebarWidth}×${sidebarDebug.sidebarHeight}px`);
    console.log(`  • Classes: ${sidebarDebug.sidebarClasses}`);
    console.log(`  • Parent classes: ${sidebarDebug.parentClasses}\n`);

    console.log('Accordion:');
    console.log(`  • Exists: ${sidebarDebug.accordionExists ? '✅' : '❌'}`);
    console.log(`  • Open: ${sidebarDebug.accordionOpen ? '✅ YES' : '❌ COLLAPSED'}`);
    console.log(`  • Height: ${sidebarDebug.accordionHeight}px\n`);

    console.log('Accordion Header:');
    console.log(`  • Exists: ${sidebarDebug.headerExists ? '✅' : '❌'}`);
    console.log(`  • Display: ${sidebarDebug.headerDisplay}`);
    console.log(`  • Height: ${sidebarDebug.headerHeight}px\n`);

    console.log('Accordion Content:');
    console.log(`  • Exists: ${sidebarDebug.contentExists ? '✅' : '❌'}`);
    console.log(`  • Display: ${sidebarDebug.contentDisplay}`);
    console.log(`  • Opacity: ${sidebarDebug.contentOpacity}`);
    console.log(`  • Height: ${sidebarDebug.contentHeight}px\n`);

    console.log('Actual Content Wrapper:');
    console.log(`  • Display: ${sidebarDebug.actualContentDisplay}`);
    console.log(`  • Opacity: ${sidebarDebug.actualContentOpacity}\n`);

    console.log('Skeleton Content Wrapper:');
    console.log(`  • Display: ${sidebarDebug.skeletonContentDisplay}`);
    console.log(`  • Opacity: ${sidebarDebug.skeletonContentOpacity}\n`);

    await browser.close();
})();