79 lines
3.1 KiB
JavaScript
79 lines
3.1 KiB
JavaScript
|
#!/usr/bin/env node
|
||
|
|
|
||
|
|
import { chromium } from 'playwright';
|
||
|
|
|
||
|
|
async function test() {
|
||
|
|
const browser = await chromium.launch({ headless: true });
|
||
|
|
|
||
|
|
console.log('Testing scroll behavior with JavaScript implementation...\n');
|
||
|
|
|
||
|
|
// Desktop test
|
||
|
|
const ctx = await browser.newContext({ viewport: { width: 1278, height: 800 } });
|
||
|
|
const page = await ctx.newPage();
|
||
|
|
await page.goto('http://localhost:1999/?lang=en');
|
||
|
|
await page.waitForLoadState('networkidle');
|
||
|
|
await page.waitForTimeout(500);
|
||
|
|
|
||
|
|
// Check console for init message
|
||
|
|
page.on('console', msg => {
|
||
|
|
if (msg.text().includes('Scroll behavior')) console.log('Console:', msg.text());
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('1. Initial state:');
|
||
|
|
let state = await page.evaluate(() => ({
|
||
|
|
hidden: document.querySelector('.action-bar')?.classList.contains('header-hidden'),
|
||
|
|
scrollY: window.scrollY
|
||
|
|
}));
|
||
|
|
console.log(` ScrollY: ${state.scrollY}, Hidden: ${state.hidden}`);
|
||
|
|
|
||
|
|
console.log('\n2. Scroll DOWN 500px:');
|
||
|
|
await page.evaluate(() => window.scrollTo(0, 500));
|
||
|
|
await page.waitForTimeout(300);
|
||
|
|
state = await page.evaluate(() => ({
|
||
|
|
hidden: document.querySelector('.action-bar')?.classList.contains('header-hidden'),
|
||
|
|
scrollY: window.scrollY
|
||
|
|
}));
|
||
|
|
console.log(` ScrollY: ${state.scrollY}, Hidden: ${state.hidden}`);
|
||
|
|
console.log(state.hidden ? ' ✅ Bar hidden' : ' ❌ Bar should be hidden!');
|
||
|
|
|
||
|
|
console.log('\n3. Scroll UP to 300px:');
|
||
|
|
await page.evaluate(() => window.scrollTo(0, 300));
|
||
|
|
await page.waitForTimeout(300);
|
||
|
|
state = await page.evaluate(() => ({
|
||
|
|
hidden: document.querySelector('.action-bar')?.classList.contains('header-hidden'),
|
||
|
|
scrollY: window.scrollY
|
||
|
|
}));
|
||
|
|
console.log(` ScrollY: ${state.scrollY}, Hidden: ${state.hidden}`);
|
||
|
|
console.log(!state.hidden ? ' ✅ Bar visible' : ' ❌ Bar should be visible!');
|
||
|
|
|
||
|
|
await ctx.close();
|
||
|
|
|
||
|
|
// Mobile test
|
||
|
|
console.log('\n4. Mobile (375px) - scroll down:');
|
||
|
|
const mobileCtx = await browser.newContext({
|
||
|
|
viewport: { width: 375, height: 667 },
|
||
|
|
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X)',
|
||
|
|
hasTouch: true
|
||
|
|
});
|
||
|
|
const mobilePage = await mobileCtx.newPage();
|
||
|
|
await mobilePage.goto('http://localhost:1999/?lang=en');
|
||
|
|
await mobilePage.waitForLoadState('networkidle');
|
||
|
|
await mobilePage.waitForTimeout(500);
|
||
|
|
|
||
|
|
await mobilePage.evaluate(() => window.scrollTo(0, 500));
|
||
|
|
await mobilePage.waitForTimeout(300);
|
||
|
|
state = await mobilePage.evaluate(() => ({
|
||
|
|
hidden: document.querySelector('.action-bar')?.classList.contains('header-hidden'),
|
||
|
|
transform: getComputedStyle(document.querySelector('.action-bar')).transform
|
||
|
|
}));
|
||
|
|
console.log(` Hidden class: ${state.hidden}, Transform: ${state.transform}`);
|
||
|
|
const isVisible = !state.hidden || state.transform === 'none' || state.transform.includes('0, 0)');
|
||
|
|
console.log(isVisible ? ' ✅ Bar visible on mobile' : ' ❌ Bar should stay visible!');
|
||
|
|
|
||
|
|
await mobileCtx.close();
|
||
|
|
await browser.close();
|
||
|
|
console.log('\nDone.');
|
||
|
|
}
|
||
|
|
|
||
|
|
test().catch(console.error);
|