juanatsap
65 lines
2.3 KiB
JavaScript
65 lines
2.3 KiB
JavaScript
const { chromium } = require('playwright');
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: false, slowMo: 600 });
|
|
const context = await browser.newContext({
|
|
viewport: { width: 1920, height: 1080 }
|
|
});
|
|
const page = await context.newPage();
|
|
|
|
console.log('🔍 Mobile Toggle Click Investigation\n');
|
|
|
|
// Capture ALL console messages
|
|
page.on('console', msg => {
|
|
console.log(` [${msg.type().toUpperCase()}]`, msg.text());
|
|
});
|
|
|
|
// Capture page errors
|
|
page.on('pageerror', error => {
|
|
console.log(` ❌ PAGE ERROR: ${error.message}`);
|
|
});
|
|
|
|
await page.goto('http://localhost:1999/?lang=en');
|
|
await page.waitForLoadState('networkidle');
|
|
await page.evaluate(() => window.scrollTo(0, 0));
|
|
await page.waitForTimeout(500);
|
|
|
|
// First click desktop to set state
|
|
console.log('Step 1: Click Desktop (to set up state)\n');
|
|
await page.locator('#desktop-length-toggle .icon-toggle').click();
|
|
await page.waitForTimeout(2000);
|
|
|
|
// Open menu
|
|
console.log('\nStep 2: Open Hamburger Menu\n');
|
|
await page.locator('.hamburger-btn').click();
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Check if mobile toggle is visible and clickable
|
|
const mobileToggle = page.locator('#mobile-length-toggle');
|
|
const isVisible = await mobileToggle.isVisible();
|
|
console.log(` Mobile toggle visible: ${isVisible}`);
|
|
|
|
const mobileInput = page.locator('#lengthToggleMenu');
|
|
const inputVisible = await mobileInput.isVisible();
|
|
console.log(` Mobile input visible: ${inputVisible}`);
|
|
|
|
// Try clicking directly on the input
|
|
console.log('\nStep 3: Attempting to click mobile toggle label\n');
|
|
try {
|
|
await page.locator('#mobile-length-toggle .icon-toggle').click({timeout: 5000});
|
|
console.log(' ✅ Click executed');
|
|
} catch (e) {
|
|
console.log(` ❌ Click failed: ${e.message}`);
|
|
}
|
|
|
|
await page.waitForTimeout(3000);
|
|
|
|
// Final state check
|
|
const finalDesktop = await page.evaluate(() => document.querySelector('#lengthToggle')?.checked);
|
|
const finalMobile = await page.evaluate(() => document.querySelector('#lengthToggleMenu')?.checked);
|
|
console.log(`\nFinal State: Desktop=${finalDesktop}, Mobile=${finalMobile}`);
|
|
|
|
await page.waitForTimeout(2000);
|
|
await browser.close();
|
|
})();
|