juanatsap
74 lines
3.0 KiB
JavaScript
74 lines
3.0 KiB
JavaScript
const { chromium } = require('playwright');
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: false, slowMo: 800 });
|
|
const context = await browser.newContext({
|
|
viewport: { width: 1920, height: 1080 }
|
|
});
|
|
const page = await context.newPage();
|
|
|
|
console.log('🔍 HTMX Timing & State Analysis\n');
|
|
|
|
// Intercept and log ALL console messages
|
|
page.on('console', msg => {
|
|
const text = msg.text();
|
|
if (text.includes('HTMX') || text.includes('swap') || text.includes('Toggle')) {
|
|
console.log(` 🔧 ${text}`);
|
|
}
|
|
});
|
|
|
|
// Add detailed event logging to the page
|
|
await page.goto('http://localhost:1999/?lang=en');
|
|
await page.waitForLoadState('networkidle');
|
|
await page.evaluate(() => window.scrollTo(0, 0));
|
|
await page.waitForTimeout(500);
|
|
|
|
// Inject logging into the page
|
|
await page.evaluate(() => {
|
|
const desktop = document.querySelector('#lengthToggle');
|
|
const mobile = document.querySelector('#lengthToggleMenu');
|
|
|
|
// Log all HTMX events
|
|
document.body.addEventListener('htmx:beforeRequest', (e) => {
|
|
const target = e.detail.elt;
|
|
const id = target.id;
|
|
const checked = target.checked;
|
|
console.log(`HTMX beforeRequest: #${id} checked=${checked}`);
|
|
});
|
|
|
|
document.body.addEventListener('htmx:afterSwap', (e) => {
|
|
console.log(`HTMX afterSwap completed`);
|
|
console.log(` Desktop: #lengthToggle checked=${document.querySelector('#lengthToggle')?.checked}`);
|
|
console.log(` Mobile: #lengthToggleMenu checked=${document.querySelector('#lengthToggleMenu')?.checked}`);
|
|
});
|
|
|
|
document.body.addEventListener('htmx:oobAfterSwap', (e) => {
|
|
console.log(`HTMX oobAfterSwap: ${e.detail.target?.id}`);
|
|
});
|
|
});
|
|
|
|
// TEST SEQUENCE
|
|
console.log('▶ Step 1: Click Desktop Toggle\n');
|
|
await page.locator('#desktop-length-toggle .icon-toggle').click();
|
|
await page.waitForTimeout(2000);
|
|
|
|
let desktopState = await page.evaluate(() => document.querySelector('#lengthToggle').checked);
|
|
let mobileState = await page.evaluate(() => document.querySelector('#lengthToggleMenu').checked);
|
|
console.log(`\nResult: Desktop=${desktopState}, Mobile=${mobileState}, Sync=${desktopState === mobileState ? '✅' : '❌'}\n`);
|
|
|
|
console.log('▶ Step 2: Open Menu\n');
|
|
await page.locator('.hamburger-btn').click();
|
|
await page.waitForTimeout(1000);
|
|
|
|
console.log('▶ Step 3: Click Mobile Toggle\n');
|
|
await page.locator('#mobile-length-toggle .icon-toggle').click();
|
|
await page.waitForTimeout(2500);
|
|
|
|
desktopState = await page.evaluate(() => document.querySelector('#lengthToggle').checked);
|
|
mobileState = await page.evaluate(() => document.querySelector('#lengthToggleMenu').checked);
|
|
console.log(`\nResult: Desktop=${desktopState}, Mobile=${mobileState}, Sync=${desktopState === mobileState ? '✅' : '❌'}\n`);
|
|
|
|
await page.waitForTimeout(2000);
|
|
await browser.close();
|
|
})();
|