juanatsap
65 lines
2.8 KiB
JavaScript
65 lines
2.8 KiB
JavaScript
const { chromium } = require('playwright');
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: false, slowMo: 1500 });
|
|
const context = await browser.newContext({
|
|
viewport: { width: 1920, height: 1080 }
|
|
});
|
|
const page = await context.newPage();
|
|
|
|
console.log('🧪 Testing Toggle Visual State\n');
|
|
|
|
await page.goto('http://localhost:1999/?lang=en');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Take screenshot of toggles
|
|
console.log('📸 Taking screenshot of toggle controls...');
|
|
|
|
// Scroll to top to see header controls
|
|
await page.evaluate(() => window.scrollTo(0, 0));
|
|
await page.waitForTimeout(500);
|
|
|
|
// Check if toggles are visible
|
|
const lengthToggleVisible = await page.locator('#lengthToggle').isVisible().catch(() => false);
|
|
const themeToggleVisible = await page.locator('#themeToggle').isVisible().catch(() => false);
|
|
const logoToggleVisible = await page.locator('#logoToggle').isVisible().catch(() => false);
|
|
|
|
console.log(`\n📊 Toggle Visibility:`);
|
|
console.log(` Length toggle: ${lengthToggleVisible ? '✅ Visible' : '❌ Hidden'}`);
|
|
console.log(` Theme toggle: ${themeToggleVisible ? '✅ Visible' : '❌ Hidden'}`);
|
|
console.log(` Logo toggle: ${logoToggleVisible ? '✅ Visible' : '❌ Hidden'}`);
|
|
|
|
if (!lengthToggleVisible) {
|
|
console.log(`\n⚠️ Desktop toggles are hidden (might be in hamburger menu)`);
|
|
|
|
// Try to find hamburger menu
|
|
const hamburgerExists = await page.locator('.hamburger-btn').count();
|
|
console.log(` Hamburger button exists: ${hamburgerExists > 0 ? '✅ Yes' : '❌ No'}`);
|
|
|
|
if (hamburgerExists > 0) {
|
|
console.log(`\n🍔 Opening hamburger menu...`);
|
|
await page.hover('.hamburger-btn');
|
|
await page.waitForTimeout(1000);
|
|
|
|
const menuLengthToggle = await page.locator('#lengthToggleMenu').isVisible().catch(() => false);
|
|
console.log(` Mobile length toggle visible: ${menuLengthToggle ? '✅ Yes' : '❌ No'}`);
|
|
|
|
if (menuLengthToggle) {
|
|
console.log(`\n🔄 Testing mobile toggle...`);
|
|
const isChecked = await page.locator('#lengthToggleMenu').isChecked();
|
|
console.log(` Current state: ${isChecked ? 'Long' : 'Short'}`);
|
|
|
|
await page.click('#lengthToggleMenu');
|
|
await page.waitForTimeout(1500);
|
|
|
|
const isCheckedAfter = await page.locator('#lengthToggleMenu').isChecked();
|
|
console.log(` After click: ${isCheckedAfter ? 'Long' : 'Short'}`);
|
|
console.log(` Toggle changed: ${isChecked !== isCheckedAfter ? '✅ Yes' : '❌ No'}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
await page.waitForTimeout(3000);
|
|
await browser.close();
|
|
})();
|