87 lines
2.8 KiB
JavaScript
87 lines
2.8 KiB
JavaScript
|
#!/usr/bin/env bun
|
||
|
|
import { chromium } from 'playwright';
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
const browser = await chromium.launch({ headless: false });
|
||
|
|
const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
|
||
|
|
|
||
|
|
console.log('🔍 Testing theme button visibility on DESKTOP...\n');
|
||
|
|
|
||
|
|
await page.goto('http://localhost:1999/');
|
||
|
|
await page.waitForLoadState('networkidle');
|
||
|
|
await page.waitForTimeout(1000);
|
||
|
|
|
||
|
|
// Check theme button
|
||
|
|
const themeButton = page.locator('#color-theme-switcher');
|
||
|
|
const exists = await themeButton.count() > 0;
|
||
|
|
console.log(exists ? '✅ Theme button exists in DOM' : '❌ Theme button NOT in DOM');
|
||
|
|
|
||
|
|
if (exists) {
|
||
|
|
const isVisible = await themeButton.isVisible();
|
||
|
|
console.log(isVisible ? '✅ Theme button is VISIBLE' : '❌ Theme button is NOT visible');
|
||
|
|
|
||
|
|
const box = await themeButton.boundingBox();
|
||
|
|
console.log('\n📦 Bounding box:', box);
|
||
|
|
|
||
|
|
// Check if Y position is positive (on screen)
|
||
|
|
if (box && box.y > 0) {
|
||
|
|
console.log('✅ Button is ON SCREEN (y > 0)');
|
||
|
|
} else if (box && box.y < 0) {
|
||
|
|
console.log('❌ Button is ABOVE SCREEN (y < 0) - STILL BROKEN');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Get computed position
|
||
|
|
const position = await page.evaluate(() => {
|
||
|
|
const btn = document.getElementById('color-theme-switcher');
|
||
|
|
const computed = window.getComputedStyle(btn);
|
||
|
|
return {
|
||
|
|
position: computed.position,
|
||
|
|
bottom: computed.bottom,
|
||
|
|
left: computed.left,
|
||
|
|
top: computed.top
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('\n🎨 Computed position:', position);
|
||
|
|
|
||
|
|
if (position.position === 'fixed') {
|
||
|
|
console.log('✅ Position is FIXED (correct!)');
|
||
|
|
} else {
|
||
|
|
console.log(`❌ Position is ${position.position} (should be fixed)`);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Take screenshot
|
||
|
|
await page.screenshot({
|
||
|
|
path: '/Users/txeo/Git/yo/cv/tests/mjs/screenshots/theme-button-fixed.png',
|
||
|
|
fullPage: false
|
||
|
|
});
|
||
|
|
console.log('\n📸 Screenshot saved to screenshots/theme-button-fixed.png');
|
||
|
|
|
||
|
|
// Test tooltip
|
||
|
|
console.log('\n🎯 Testing tooltip...');
|
||
|
|
await themeButton.hover();
|
||
|
|
await page.waitForTimeout(500);
|
||
|
|
|
||
|
|
const tooltipVisible = await page.evaluate(() => {
|
||
|
|
const btn = document.getElementById('color-theme-switcher');
|
||
|
|
const computed = window.getComputedStyle(btn, '::before');
|
||
|
|
return {
|
||
|
|
opacity: computed.opacity,
|
||
|
|
visibility: computed.visibility,
|
||
|
|
content: computed.content
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('💬 Tooltip state:', tooltipVisible);
|
||
|
|
if (parseFloat(tooltipVisible.opacity) > 0.5) {
|
||
|
|
console.log('✅ Tooltip is VISIBLE on hover');
|
||
|
|
} else {
|
||
|
|
console.log('⚠️ Tooltip opacity is low or hidden');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log('\n✅ Test complete - browser will close in 5 seconds');
|
||
|
|
await page.waitForTimeout(5000);
|
||
|
|
await browser.close();
|
||
|
|
})();
|