57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
|
import { chromium } from 'playwright';
|
||
|
|
|
||
|
|
const browser = await chromium.launch();
|
||
|
|
const context = await browser.newContext({
|
||
|
|
viewport: { width: 375, height: 812 }
|
||
|
|
});
|
||
|
|
const page = await context.newPage();
|
||
|
|
|
||
|
|
await page.goto('http://localhost:1999');
|
||
|
|
await page.waitForTimeout(1500);
|
||
|
|
|
||
|
|
// Scroll to show back-to-top button
|
||
|
|
await page.evaluate(() => window.scrollTo(0, 500));
|
||
|
|
await page.waitForTimeout(500);
|
||
|
|
|
||
|
|
// Take screenshot of bottom-left floating buttons area
|
||
|
|
await page.screenshot({
|
||
|
|
path: 'tests/screenshots/button-icon-scaling-375px.png',
|
||
|
|
clip: { x: 0, y: 600, width: 200, height: 200 }
|
||
|
|
});
|
||
|
|
|
||
|
|
// Take full page for context
|
||
|
|
await page.screenshot({
|
||
|
|
path: 'tests/screenshots/full-page-375px.png',
|
||
|
|
fullPage: false
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('📸 Screenshots saved to tests/screenshots/');
|
||
|
|
|
||
|
|
// Print actual sizes for verification
|
||
|
|
const sizes = await page.evaluate(() => {
|
||
|
|
const results = [];
|
||
|
|
const selectors = ['.cmd-k-btn', '.download-btn', '.print-friendly-btn',
|
||
|
|
'.fixed-btn.contact-btn', '.shortcuts-btn',
|
||
|
|
'.color-theme-switcher', '.info-button', '.back-to-top'];
|
||
|
|
|
||
|
|
for (const sel of selectors) {
|
||
|
|
const btn = document.querySelector(sel);
|
||
|
|
if (btn) {
|
||
|
|
const btnStyle = getComputedStyle(btn);
|
||
|
|
const icon = btn.querySelector('iconify-icon');
|
||
|
|
const iconStyle = icon ? getComputedStyle(icon) : null;
|
||
|
|
results.push({
|
||
|
|
selector: sel,
|
||
|
|
button: Math.round(Number.parseFloat(btnStyle.width)) + 'x' + Math.round(Number.parseFloat(btnStyle.height)),
|
||
|
|
icon: iconStyle ? Math.round(Number.parseFloat(iconStyle.width)) + 'x' + Math.round(Number.parseFloat(iconStyle.height)) : 'N/A'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return results;
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('\n📐 Sizes at 375px viewport:');
|
||
|
|
sizes.forEach(s => console.log(' ' + s.selector + ': button=' + s.button + ', icon=' + s.icon));
|
||
|
|
|
||
|
|
await browser.close();
|