85 lines
3.2 KiB
JavaScript
85 lines
3.2 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');
|
||
|
|
|
||
|
|
// Take a screenshot to see what's visible
|
||
|
|
await page.screenshot({
|
||
|
|
path: 'tests/screenshots/sidebar-debug-landscape.png',
|
||
|
|
fullPage: true
|
||
|
|
});
|
||
|
|
|
||
|
|
const details = await page.evaluate(() => {
|
||
|
|
const sidebar = document.querySelector('.cv-sidebar-left');
|
||
|
|
const accordion = document.querySelector('.sidebar-accordion');
|
||
|
|
|
||
|
|
// Get all children of sidebar
|
||
|
|
const sidebarChildren = Array.from(sidebar.children).map(child => ({
|
||
|
|
tag: child.tagName,
|
||
|
|
class: child.className,
|
||
|
|
height: Math.round(child.getBoundingClientRect().height),
|
||
|
|
display: window.getComputedStyle(child).display,
|
||
|
|
position: window.getComputedStyle(child).position
|
||
|
|
}));
|
||
|
|
|
||
|
|
// Get all children of accordion
|
||
|
|
const accordionChildren = Array.from(accordion.children).map(child => ({
|
||
|
|
tag: child.tagName,
|
||
|
|
class: child.className,
|
||
|
|
height: Math.round(child.getBoundingClientRect().height),
|
||
|
|
display: window.getComputedStyle(child).display
|
||
|
|
}));
|
||
|
|
|
||
|
|
// Check if there's a min-height or explicit height
|
||
|
|
const sidebarStyles = window.getComputedStyle(sidebar);
|
||
|
|
|
||
|
|
return {
|
||
|
|
sidebarChildren,
|
||
|
|
accordionChildren,
|
||
|
|
sidebarStyles: {
|
||
|
|
height: sidebarStyles.height,
|
||
|
|
minHeight: sidebarStyles.minHeight,
|
||
|
|
maxHeight: sidebarStyles.maxHeight,
|
||
|
|
boxSizing: sidebarStyles.boxSizing,
|
||
|
|
padding: sidebarStyles.padding,
|
||
|
|
}
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('Sidebar Children:');
|
||
|
|
details.sidebarChildren.forEach((child, i) => {
|
||
|
|
console.log(` ${i + 1}. <${child.tag}> .${child.class}`);
|
||
|
|
console.log(` Height: ${child.height}px, Display: ${child.display}, Position: ${child.position}`);
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('\nAccordion Children:');
|
||
|
|
details.accordionChildren.forEach((child, i) => {
|
||
|
|
console.log(` ${i + 1}. <${child.tag}> .${child.class}`);
|
||
|
|
console.log(` Height: ${child.height}px, Display: ${child.display}`);
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('\nSidebar Computed Styles:');
|
||
|
|
console.log(` • height: ${details.sidebarStyles.height}`);
|
||
|
|
console.log(` • min-height: ${details.sidebarStyles.minHeight}`);
|
||
|
|
console.log(` • max-height: ${details.sidebarStyles.maxHeight}`);
|
||
|
|
console.log(` • box-sizing: ${details.sidebarStyles.boxSizing}`);
|
||
|
|
console.log(` • padding: ${details.sidebarStyles.padding}`);
|
||
|
|
|
||
|
|
console.log('\nScreenshot saved to: tests/screenshots/sidebar-debug-landscape.png');
|
||
|
|
|
||
|
|
await browser.close();
|
||
|
|
})();
|