74 lines
2.5 KiB
JavaScript
74 lines
2.5 KiB
JavaScript
|
#!/usr/bin/env node
|
||
|
|
|
||
|
|
import { chromium } from 'playwright';
|
||
|
|
|
||
|
|
const LANDSCAPE = { width: 844, height: 390 }; // iPhone 14 Pro landscape
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
const browser = await chromium.launch({ headless: true });
|
||
|
|
const context = await browser.newContext({ viewport: LANDSCAPE });
|
||
|
|
const page = await context.newPage();
|
||
|
|
|
||
|
|
console.log('📱 Checking iPhone Landscape Layout\n');
|
||
|
|
|
||
|
|
await page.goto('http://localhost:1999/?lang=en&view=extended');
|
||
|
|
await page.waitForLoadState('networkidle');
|
||
|
|
|
||
|
|
// Check key layout elements
|
||
|
|
const pageContent = await page.locator('.page-content').first();
|
||
|
|
const sidebar = await page.locator('.cv-sidebar').first();
|
||
|
|
const cvMain = await page.locator('.cv-main').first();
|
||
|
|
|
||
|
|
const pageContentStyles = await pageContent.evaluate(el => {
|
||
|
|
const computed = window.getComputedStyle(el);
|
||
|
|
return {
|
||
|
|
display: computed.display,
|
||
|
|
gridTemplateColumns: computed.gridTemplateColumns
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
const sidebarStyles = await sidebar.evaluate(el => {
|
||
|
|
const computed = window.getComputedStyle(el);
|
||
|
|
return {
|
||
|
|
display: computed.display,
|
||
|
|
width: computed.width
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
const mainStyles = await cvMain.evaluate(el => {
|
||
|
|
const computed = window.getComputedStyle(el);
|
||
|
|
return {
|
||
|
|
display: computed.display,
|
||
|
|
width: computed.width
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('📊 Layout Analysis:\n');
|
||
|
|
console.log('Page Content:');
|
||
|
|
console.log(` • Display: ${pageContentStyles.display}`);
|
||
|
|
console.log(` • Grid Template Columns: ${pageContentStyles.gridTemplateColumns}`);
|
||
|
|
console.log(` • Expected: Should be single column (1fr) on mobile\n`);
|
||
|
|
|
||
|
|
console.log('Sidebar:');
|
||
|
|
console.log(` • Display: ${sidebarStyles.display}`);
|
||
|
|
console.log(` • Width: ${sidebarStyles.width}\n`);
|
||
|
|
|
||
|
|
console.log('Main Content:');
|
||
|
|
console.log(` • Display: ${mainStyles.display}`);
|
||
|
|
console.log(` • Width: ${mainStyles.width}\n`);
|
||
|
|
|
||
|
|
// Check if it's a 2-column layout (wrong) or 1-column (correct)
|
||
|
|
const isTwoColumn = pageContentStyles.gridTemplateColumns &&
|
||
|
|
pageContentStyles.gridTemplateColumns.includes('minmax');
|
||
|
|
|
||
|
|
console.log(`Layout Type: ${isTwoColumn ? '❌ TWO COLUMNS (WRONG)' : '✅ SINGLE COLUMN (CORRECT)'}\n`);
|
||
|
|
|
||
|
|
await page.screenshot({
|
||
|
|
path: 'tests/screenshots/landscape-layout-detailed.png',
|
||
|
|
fullPage: true
|
||
|
|
});
|
||
|
|
console.log('📸 Screenshot: tests/screenshots/landscape-layout-detailed.png\n');
|
||
|
|
|
||
|
|
await browser.close();
|
||
|
|
})();
|