96 lines
4.7 KiB
JavaScript
96 lines
4.7 KiB
JavaScript
|
#!/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();
|
|||
|
|
})();
|