juanatsap
63 lines
2.3 KiB
JavaScript
63 lines
2.3 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('🎬 Testing Smooth Toggle Animations\n');
|
|
|
|
await page.goto('http://localhost:1999/?lang=en');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Scroll down to make header visible
|
|
console.log('📜 Scrolling to reveal header...');
|
|
await page.evaluate(() => window.scrollTo(0, 500));
|
|
await page.waitForTimeout(1500);
|
|
|
|
console.log('\n🔄 Testing Length Toggle (Desktop)');
|
|
console.log(' Watch for SMOOTH slide animation...\n');
|
|
|
|
await page.click('#lengthToggle');
|
|
await page.waitForTimeout(2000);
|
|
|
|
console.log('✅ Animation completed!');
|
|
console.log(' Did you see a smooth 300ms slide? (analogical)');
|
|
console.log(' Or did it snap instantly? (digital)\n');
|
|
|
|
console.log('🔄 Clicking again (toggling back)...\n');
|
|
await page.click('#lengthToggle');
|
|
await page.waitForTimeout(2000);
|
|
|
|
console.log('🍔 Opening hamburger menu to test mobile toggle...');
|
|
await page.hover('.hamburger-btn');
|
|
await page.waitForTimeout(1000);
|
|
|
|
console.log('\n🔄 Testing Length Toggle (Mobile)');
|
|
console.log(' This should also be smooth...\n');
|
|
|
|
const menuToggle = await page.locator('#lengthToggleMenu').isVisible();
|
|
if (menuToggle) {
|
|
await page.click('#lengthToggleMenu');
|
|
await page.waitForTimeout(2000);
|
|
|
|
console.log('✅ Mobile toggle animation completed!');
|
|
console.log(' Both toggles should be in sync now.\n');
|
|
} else {
|
|
console.log('⚠️ Mobile toggle not visible\n');
|
|
}
|
|
|
|
console.log('📊 SMOOTH ANIMATION TEST SUMMARY:');
|
|
console.log(' ✅ Toggles use CSS transitions (0.3s ease)');
|
|
console.log(' ✅ No DOM replacement (hx-swap="none")');
|
|
console.log(' ✅ Element stays in DOM during animation');
|
|
console.log(' ✅ Desktop/mobile sync via hyperscript');
|
|
console.log('\n🎯 Expected: Smooth "analogical" slide');
|
|
console.log('🎯 You should see the slider move smoothly over 300ms');
|
|
|
|
await page.waitForTimeout(3000);
|
|
await browser.close();
|
|
})();
|