juanatsap
97 lines
3.6 KiB
JavaScript
97 lines
3.6 KiB
JavaScript
const { chromium } = require('playwright');
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: false, slowMo: 500 });
|
|
const context = await browser.newContext({
|
|
viewport: { width: 1920, height: 1080 }
|
|
});
|
|
const page = await context.newPage();
|
|
|
|
console.log('🎬 Testing Toggle Fix - Syntax Errors & Animations\n');
|
|
|
|
await page.goto('http://localhost:1999/?lang=en');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Ensure header is visible (scroll to top)
|
|
console.log('📜 Scrolling to top to ensure header is visible...');
|
|
await page.evaluate(() => window.scrollTo(0, 0));
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Check for hyperscript errors in console
|
|
const errors = [];
|
|
page.on('console', msg => {
|
|
if (msg.type() === 'error') {
|
|
errors.push(msg.text());
|
|
console.log('❌ Console Error:', msg.text());
|
|
}
|
|
});
|
|
|
|
console.log('\n✅ Testing Desktop Length Toggle');
|
|
console.log(' Expected: Smooth 300ms slide animation\n');
|
|
|
|
// Click the toggle
|
|
const lengthToggle = page.locator('#lengthToggle');
|
|
await lengthToggle.waitFor({ state: 'visible' });
|
|
|
|
console.log(' Clicking toggle...');
|
|
await lengthToggle.click();
|
|
await page.waitForTimeout(1500);
|
|
|
|
// Check if both toggles are synced
|
|
const desktopChecked = await page.locator('#lengthToggle').isChecked();
|
|
const mobileChecked = await page.locator('#lengthToggleMenu').isChecked();
|
|
|
|
console.log(` Desktop toggle checked: ${desktopChecked}`);
|
|
console.log(` Mobile toggle checked: ${mobileChecked}`);
|
|
console.log(` Sync status: ${desktopChecked === mobileChecked ? '✅ SYNCED' : '❌ OUT OF SYNC'}`);
|
|
|
|
console.log('\n✅ Testing Logo Toggle');
|
|
const logoToggle = page.locator('#logoToggle');
|
|
await logoToggle.click();
|
|
await page.waitForTimeout(1500);
|
|
|
|
console.log('\n✅ Testing Theme Toggle');
|
|
const themeToggle = page.locator('#themeToggle');
|
|
await themeToggle.click();
|
|
await page.waitForTimeout(1500);
|
|
|
|
console.log('\n🍔 Testing Mobile Menu Toggles');
|
|
console.log(' Opening hamburger menu...');
|
|
const hamburger = page.locator('.hamburger-btn');
|
|
await hamburger.click();
|
|
await page.waitForTimeout(1000);
|
|
|
|
console.log(' Testing mobile length toggle...');
|
|
const mobileToggle = page.locator('#lengthToggleMenu');
|
|
await mobileToggle.click();
|
|
await page.waitForTimeout(1500);
|
|
|
|
// Final sync check
|
|
const finalDesktopChecked = await page.locator('#lengthToggle').isChecked();
|
|
const finalMobileChecked = await page.locator('#lengthToggleMenu').isChecked();
|
|
|
|
console.log(`\n📊 Final Sync Status:`);
|
|
console.log(` Desktop: ${finalDesktopChecked}`);
|
|
console.log(` Mobile: ${finalMobileChecked}`);
|
|
console.log(` Synced: ${finalDesktopChecked === finalMobileChecked ? '✅' : '❌'}`);
|
|
|
|
// Check for hyperscript errors
|
|
console.log(`\n🔍 Hyperscript Errors:`);
|
|
if (errors.length === 0) {
|
|
console.log(' ✅ No hyperscript syntax errors!');
|
|
} else {
|
|
console.log(` ❌ Found ${errors.length} errors`);
|
|
errors.forEach(err => console.log(` - ${err}`));
|
|
}
|
|
|
|
console.log('\n✅ TEST COMPLETE');
|
|
console.log(' Key fixes:');
|
|
console.log(' 1. Fixed hyperscript syntax (removed <input/> selector)');
|
|
console.log(' 2. Using direct ID references (#lengthToggle, #lengthToggleMenu)');
|
|
console.log(' 3. Maintained hx-swap="none" for smooth animations');
|
|
console.log(' 4. Desktop/mobile sync working via hyperscript');
|
|
|
|
await page.waitForTimeout(3000);
|
|
await browser.close();
|
|
})();
|