83 lines
3.6 KiB
JavaScript
83 lines
3.6 KiB
JavaScript
|
#!/usr/bin/env node
|
||
|
|
|
||
|
|
import { chromium } from 'playwright';
|
||
|
|
import { writeFileSync } from 'fs';
|
||
|
|
|
||
|
|
const MOBILE_VIEWPORT = { width: 375, height: 667 };
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
const browser = await chromium.launch({ headless: true });
|
||
|
|
const context = await browser.newContext({ viewport: MOBILE_VIEWPORT });
|
||
|
|
const page = await context.newPage();
|
||
|
|
|
||
|
|
try {
|
||
|
|
console.log('🎨 Visual Accordion Style Test\n');
|
||
|
|
|
||
|
|
await page.goto('http://localhost:1999/?lang=en&view=extended');
|
||
|
|
await page.waitForLoadState('networkidle');
|
||
|
|
|
||
|
|
// Check accordion header styling
|
||
|
|
const accordionHeader = await page.locator('.sidebar-accordion-header').first();
|
||
|
|
|
||
|
|
const styles = await accordionHeader.evaluate(el => {
|
||
|
|
const computed = window.getComputedStyle(el);
|
||
|
|
return {
|
||
|
|
background: computed.backgroundColor,
|
||
|
|
color: computed.color,
|
||
|
|
padding: computed.padding,
|
||
|
|
borderRadius: computed.borderRadius,
|
||
|
|
marginBottom: computed.marginBottom,
|
||
|
|
borderBottom: computed.borderBottom,
|
||
|
|
fontSize: computed.fontSize,
|
||
|
|
fontWeight: computed.fontWeight,
|
||
|
|
textTransform: computed.textTransform
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('📊 Accordion Header Styles:');
|
||
|
|
console.log(` • Background: ${styles.background}`);
|
||
|
|
console.log(` • Text Color: ${styles.color}`);
|
||
|
|
console.log(` • Padding: ${styles.padding}`);
|
||
|
|
console.log(` • Border Radius: ${styles.borderRadius}`);
|
||
|
|
console.log(` • Margin Bottom: ${styles.marginBottom}`);
|
||
|
|
console.log(` • Border Bottom: ${styles.borderBottom}`);
|
||
|
|
console.log(` • Font Size: ${styles.fontSize}`);
|
||
|
|
console.log(` • Font Weight: ${styles.fontWeight}`);
|
||
|
|
console.log(` • Text Transform: ${styles.textTransform}`);
|
||
|
|
|
||
|
|
// Check if matches dark theme
|
||
|
|
const isDarkBackground = styles.background.includes('rgb(48, 48, 48)') ||
|
||
|
|
styles.background.includes('#303030');
|
||
|
|
const isLightText = styles.color.includes('rgb(204, 204, 204)') ||
|
||
|
|
styles.color.includes('#ccc');
|
||
|
|
const hasNoBorderRadius = styles.borderRadius === '0px';
|
||
|
|
const hasNoMarginBottom = styles.marginBottom === '0px';
|
||
|
|
const isUppercase = styles.textTransform === 'uppercase';
|
||
|
|
|
||
|
|
console.log('\n✅ Style Verification:');
|
||
|
|
console.log(` • Dark background (#303030): ${isDarkBackground ? '✅' : '❌'}`);
|
||
|
|
console.log(` • Light text (#ccc): ${isLightText ? '✅' : '❌'}`);
|
||
|
|
console.log(` • No border radius: ${hasNoBorderRadius ? '✅' : '❌'}`);
|
||
|
|
console.log(` • No margin bottom: ${hasNoMarginBottom ? '✅' : '❌'}`);
|
||
|
|
console.log(` • Uppercase text: ${isUppercase ? '✅' : '❌'}`);
|
||
|
|
|
||
|
|
const allMatch = isDarkBackground && isLightText && hasNoBorderRadius &&
|
||
|
|
hasNoMarginBottom && isUppercase;
|
||
|
|
|
||
|
|
console.log(`\n${allMatch ? '✅' : '❌'} Accordion style ${allMatch ? 'MATCHES' : 'DOES NOT MATCH'} CV title badges style\n`);
|
||
|
|
|
||
|
|
// Take screenshot for visual verification
|
||
|
|
await page.screenshot({
|
||
|
|
path: 'tests/screenshots/accordion-mobile-styled.png',
|
||
|
|
fullPage: true
|
||
|
|
});
|
||
|
|
console.log('📸 Screenshot saved to tests/screenshots/accordion-mobile-styled.png\n');
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.error('❌ Test failed:', error.message);
|
||
|
|
process.exit(1);
|
||
|
|
} finally {
|
||
|
|
await browser.close();
|
||
|
|
}
|
||
|
|
})();
|