juanatsap
95 lines
3.4 KiB
JavaScript
95 lines
3.4 KiB
JavaScript
#!/usr/bin/env node
|
|
|
|
/**
|
|
* Test fixed button sizes at different zoom levels
|
|
*/
|
|
|
|
import { chromium } from 'playwright';
|
|
|
|
async function testButtonSizes() {
|
|
console.log('🧪 Testing Fixed Button Sizes at Different Zoom Levels\n');
|
|
|
|
const browser = await chromium.launch({ headless: false });
|
|
const context = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
|
|
const page = await context.newPage();
|
|
|
|
try {
|
|
await page.goto('http://localhost:1999/?lang=en', { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(2000);
|
|
|
|
const zoomSlider = page.locator('#zoom-slider');
|
|
await zoomSlider.waitFor({ state: 'visible' });
|
|
|
|
// Test at different zoom levels
|
|
const zoomLevels = [25, 100, 175];
|
|
const results = {};
|
|
|
|
for (const zoomLevel of zoomLevels) {
|
|
console.log(`\n📏 Testing at ${zoomLevel}% zoom...`);
|
|
|
|
// Set zoom level
|
|
await zoomSlider.fill(zoomLevel.toString());
|
|
await page.waitForTimeout(500);
|
|
|
|
// Measure button sizes
|
|
const backToTop = await page.locator('#back-to-top').boundingBox();
|
|
const infoButton = await page.locator('#info-button').boundingBox();
|
|
const shortcutsButton = await page.locator('#shortcuts-button').boundingBox();
|
|
|
|
results[zoomLevel] = {
|
|
backToTop: backToTop ? Math.round(backToTop.width) : 0,
|
|
infoButton: infoButton ? Math.round(infoButton.width) : 0,
|
|
shortcutsButton: shortcutsButton ? Math.round(shortcutsButton.width) : 0
|
|
};
|
|
|
|
console.log(` Back-to-top: ${results[zoomLevel].backToTop}px`);
|
|
console.log(` Info button: ${results[zoomLevel].infoButton}px`);
|
|
console.log(` Shortcuts button: ${results[zoomLevel].shortcutsButton}px`);
|
|
}
|
|
|
|
// Check if sizes are consistent
|
|
console.log('\n' + '='.repeat(60));
|
|
console.log('📊 BUTTON SIZE CONSISTENCY CHECK');
|
|
console.log('='.repeat(60));
|
|
|
|
const baseSize = results[100];
|
|
let allConsistent = true;
|
|
|
|
for (const [zoomLevel, sizes] of Object.entries(results)) {
|
|
if (zoomLevel === '100') continue;
|
|
|
|
const backTopDiff = Math.abs(sizes.backToTop - baseSize.backToTop);
|
|
const infoDiff = Math.abs(sizes.infoButton - baseSize.infoButton);
|
|
const shortcutsDiff = Math.abs(sizes.shortcutsButton - baseSize.shortcutsButton);
|
|
|
|
const maxDiff = Math.max(backTopDiff, infoDiff, shortcutsDiff);
|
|
|
|
if (maxDiff <= 2) {
|
|
console.log(`✅ ${zoomLevel}% zoom: Buttons stay consistent (max diff: ${maxDiff}px)`);
|
|
} else {
|
|
console.log(`❌ ${zoomLevel}% zoom: Buttons changed size (max diff: ${maxDiff}px)`);
|
|
allConsistent = false;
|
|
}
|
|
}
|
|
|
|
console.log('='.repeat(60));
|
|
|
|
if (allConsistent) {
|
|
console.log('✅ SUCCESS: Fixed buttons maintain consistent size at all zoom levels!');
|
|
} else {
|
|
console.log('❌ FAIL: Fixed buttons change size with zoom level');
|
|
}
|
|
|
|
console.log('\n⏸️ Browser will stay open for 5 seconds for manual verification...');
|
|
await page.waitForTimeout(5000);
|
|
|
|
} catch (error) {
|
|
console.error('\n❌ Test failed:', error.message);
|
|
} finally {
|
|
await browser.close();
|
|
console.log('\n✅ Test completed\n');
|
|
}
|
|
}
|
|
|
|
testButtonSizes();
|