82 lines
3.3 KiB
JavaScript
82 lines
3.3 KiB
JavaScript
|
const { chromium } = require('playwright');
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
const browser = await chromium.launch({ headless: false, slowMo: 400 });
|
||
|
|
const context = await browser.newContext({
|
||
|
|
viewport: { width: 1920, height: 1080 }
|
||
|
|
});
|
||
|
|
const page = await context.newPage();
|
||
|
|
|
||
|
|
console.log('🎬 Final Toggle Test - HTMX Out-of-Band Swaps\n');
|
||
|
|
|
||
|
|
// Monitor network requests
|
||
|
|
page.on('response', async (response) => {
|
||
|
|
if (response.url().includes('/toggle/')) {
|
||
|
|
console.log(` 📡 Server response from: ${response.url()}`);
|
||
|
|
const text = await response.text();
|
||
|
|
const hasOOB = text.includes('hx-swap-oob="true"');
|
||
|
|
console.log(` ${hasOOB ? '✅' : '❌'} Out-of-band swap: ${hasOOB}`);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
await page.goto('http://localhost:1999/?lang=en');
|
||
|
|
await page.waitForLoadState('networkidle');
|
||
|
|
await page.evaluate(() => window.scrollTo(0, 0));
|
||
|
|
await page.waitForTimeout(500);
|
||
|
|
|
||
|
|
// TEST 1: Desktop toggle
|
||
|
|
console.log('TEST 1: Click Desktop Toggle\n');
|
||
|
|
const desktopLabel = page.locator('#desktop-length-toggle .icon-toggle');
|
||
|
|
await desktopLabel.click();
|
||
|
|
await page.waitForTimeout(1500);
|
||
|
|
|
||
|
|
let desktopChecked = await page.locator('#lengthToggle').isChecked();
|
||
|
|
let mobileChecked = await page.locator('#lengthToggleMenu').isChecked();
|
||
|
|
|
||
|
|
console.log(`\n Desktop: ${desktopChecked}, Mobile: ${mobileChecked}`);
|
||
|
|
console.log(` Sync: ${desktopChecked === mobileChecked ? '✅ YES' : '❌ NO'}\n`);
|
||
|
|
|
||
|
|
// TEST 2: Mobile toggle - but DON'T close menu
|
||
|
|
console.log('TEST 2: Open Menu & Click Mobile Toggle (keep menu open)\n');
|
||
|
|
const hamburger = page.locator('.hamburger-btn');
|
||
|
|
await hamburger.click();
|
||
|
|
await page.waitForTimeout(800);
|
||
|
|
|
||
|
|
console.log(' Menu is now open, clicking mobile toggle...');
|
||
|
|
const mobileLabel = page.locator('#mobile-length-toggle .icon-toggle');
|
||
|
|
await mobileLabel.click();
|
||
|
|
|
||
|
|
// Wait for HTMX to complete
|
||
|
|
await page.waitForTimeout(2000);
|
||
|
|
|
||
|
|
// Check states AFTER the swap completes
|
||
|
|
desktopChecked = await page.locator('#lengthToggle').isChecked();
|
||
|
|
mobileChecked = await page.locator('#lengthToggleMenu').isChecked();
|
||
|
|
|
||
|
|
console.log(`\n Desktop: ${desktopChecked}, Mobile: ${mobileChecked}`);
|
||
|
|
console.log(` Sync: ${desktopChecked === mobileChecked ? '✅ YES' : '❌ NO'}\n`);
|
||
|
|
|
||
|
|
// TEST 3: Check if elements exist
|
||
|
|
const desktopExists = await page.locator('#desktop-length-toggle').count();
|
||
|
|
const mobileExists = await page.locator('#mobile-length-toggle').count();
|
||
|
|
|
||
|
|
console.log('📊 ELEMENT CHECK:');
|
||
|
|
console.log(` Desktop toggle exists: ${desktopExists > 0 ? '✅' : '❌'}`);
|
||
|
|
console.log(` Mobile toggle exists: ${mobileExists > 0 ? '✅' : '❌'}`);
|
||
|
|
|
||
|
|
console.log('\n🔍 DIAGNOSIS:');
|
||
|
|
if (desktopChecked === mobileChecked) {
|
||
|
|
console.log(' ✅ PERFECT! Both toggles are in sync!');
|
||
|
|
console.log(' ✅ HTMX out-of-band swaps working correctly!');
|
||
|
|
console.log(' ✅ Desktop/mobile sync via server response!');
|
||
|
|
} else {
|
||
|
|
console.log(' ❌ Out of sync - possible issues:');
|
||
|
|
console.log(' 1. OOB swap timing problem');
|
||
|
|
console.log(' 2. Element not found during swap');
|
||
|
|
console.log(' 3. Hyperscript executing before swap');
|
||
|
|
}
|
||
|
|
|
||
|
|
await page.waitForTimeout(3000);
|
||
|
|
await browser.close();
|
||
|
|
})();
|