juanatsap
78 lines
2.9 KiB
JavaScript
78 lines
2.9 KiB
JavaScript
const { chromium } = require('playwright');
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: false, slowMo: 300 });
|
|
const context = await browser.newContext({
|
|
viewport: { width: 1920, height: 1080 }
|
|
});
|
|
const page = await context.newPage();
|
|
|
|
console.log('🔍 Debugging Toggle Sync Issue\n');
|
|
|
|
// Capture ALL console messages
|
|
page.on('console', msg => {
|
|
const type = msg.type();
|
|
const text = msg.text();
|
|
if (type === 'log') {
|
|
console.log(' 📝', text);
|
|
} else if (type === 'error') {
|
|
console.log(' ❌', text);
|
|
}
|
|
});
|
|
|
|
await page.goto('http://localhost:1999/?lang=en');
|
|
await page.waitForLoadState('networkidle');
|
|
await page.evaluate(() => window.scrollTo(0, 0));
|
|
await page.waitForTimeout(500);
|
|
|
|
// Add debug logging to the page
|
|
await page.evaluate(() => {
|
|
console.log('🔧 Setting up debug listeners...');
|
|
|
|
const desktopToggle = document.querySelector('#lengthToggle');
|
|
const mobileToggle = document.querySelector('#lengthToggleMenu');
|
|
|
|
desktopToggle.addEventListener('change', (e) => {
|
|
console.log(`Desktop changed: ${e.target.checked}`);
|
|
}, true);
|
|
|
|
mobileToggle.addEventListener('change', (e) => {
|
|
console.log(`Mobile changed: ${e.target.checked}`);
|
|
}, true);
|
|
});
|
|
|
|
console.log('\n📱 Step 1: Click Desktop Toggle');
|
|
const desktopLabel = page.locator('#desktop-length-toggle .icon-toggle');
|
|
await desktopLabel.click();
|
|
await page.waitForTimeout(1500);
|
|
|
|
let desktopState = await page.locator('#lengthToggle').isChecked();
|
|
let mobileState = await page.locator('#lengthToggleMenu').isChecked();
|
|
console.log(`Result: Desktop=${desktopState}, Mobile=${mobileState}`);
|
|
|
|
console.log('\n🍔 Step 2: Open Menu');
|
|
const hamburger = page.locator('.hamburger-btn');
|
|
await hamburger.click();
|
|
await page.waitForTimeout(500);
|
|
|
|
console.log('\n📱 Step 3: Click Mobile Toggle');
|
|
const mobileLabel = page.locator('#mobile-length-toggle .icon-toggle');
|
|
await mobileLabel.click();
|
|
await page.waitForTimeout(1500);
|
|
|
|
desktopState = await page.locator('#lengthToggle').isChecked();
|
|
mobileState = await page.locator('#lengthToggleMenu').isChecked();
|
|
console.log(`Result: Desktop=${desktopState}, Mobile=${mobileState}`);
|
|
|
|
// Final check
|
|
console.log('\n📊 Final State Check:');
|
|
const finalDesktop = await page.evaluate(() => document.querySelector('#lengthToggle').checked);
|
|
const finalMobile = await page.evaluate(() => document.querySelector('#lengthToggleMenu').checked);
|
|
console.log(` Desktop (via evaluate): ${finalDesktop}`);
|
|
console.log(` Mobile (via evaluate): ${finalMobile}`);
|
|
console.log(` Match: ${finalDesktop === finalMobile ? '✅' : '❌'}`);
|
|
|
|
await page.waitForTimeout(3000);
|
|
await browser.close();
|
|
})();
|