65 lines
2.2 KiB
JavaScript
65 lines
2.2 KiB
JavaScript
|
#!/usr/bin/env node
|
||
|
|
|
||
|
|
import { chromium } from 'playwright';
|
||
|
|
|
||
|
|
const MOBILE_VIEWPORT = { width: 375, height: 667 };
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
const browser = await chromium.launch({ headless: true });
|
||
|
|
const context = await browser.newContext({
|
||
|
|
viewport: MOBILE_VIEWPORT,
|
||
|
|
ignoreHTTPSErrors: true
|
||
|
|
});
|
||
|
|
const page = await context.newPage();
|
||
|
|
|
||
|
|
console.log('🧪 Testing Mobile Button Opacity (Should be Full - No Transparency)\n');
|
||
|
|
|
||
|
|
await page.goto('http://localhost:1999/?lang=en&view=extended');
|
||
|
|
await page.waitForLoadState('networkidle');
|
||
|
|
|
||
|
|
// Check button opacities and backgrounds
|
||
|
|
const buttons = {
|
||
|
|
download: await page.locator('.download-btn'),
|
||
|
|
print: await page.locator('.print-friendly-btn'),
|
||
|
|
shortcuts: await page.locator('.shortcuts-btn'),
|
||
|
|
info: await page.locator('.info-button'),
|
||
|
|
backToTop: await page.locator('.back-to-top'),
|
||
|
|
theme: await page.locator('.color-theme-switcher')
|
||
|
|
};
|
||
|
|
|
||
|
|
console.log('📊 Button Opacity Check:\n');
|
||
|
|
|
||
|
|
for (const [name, button] of Object.entries(buttons)) {
|
||
|
|
const styles = await button.evaluate(el => {
|
||
|
|
const computed = window.getComputedStyle(el);
|
||
|
|
const bg = computed.backgroundColor;
|
||
|
|
|
||
|
|
// Extract rgba values
|
||
|
|
const match = bg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
|
||
|
|
const alpha = match && match[4] ? parseFloat(match[4]) : 1.0;
|
||
|
|
|
||
|
|
return {
|
||
|
|
background: bg,
|
||
|
|
opacity: computed.opacity,
|
||
|
|
alpha: alpha
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
const isFullOpacity = styles.alpha === 1.0 && parseFloat(styles.opacity) === 1.0;
|
||
|
|
|
||
|
|
console.log(`${name}:`);
|
||
|
|
console.log(` • Background: ${styles.background}`);
|
||
|
|
console.log(` • Opacity: ${styles.opacity}`);
|
||
|
|
console.log(` • Alpha: ${styles.alpha}`);
|
||
|
|
console.log(` • Full opacity: ${isFullOpacity ? '✅' : '❌'}\n`);
|
||
|
|
}
|
||
|
|
|
||
|
|
await page.screenshot({
|
||
|
|
path: 'tests/screenshots/mobile-buttons-full-opacity.png',
|
||
|
|
fullPage: true
|
||
|
|
});
|
||
|
|
console.log('📸 Screenshot: tests/screenshots/mobile-buttons-full-opacity.png\n');
|
||
|
|
|
||
|
|
await browser.close();
|
||
|
|
})();
|