78 lines
3.2 KiB
JavaScript
78 lines
3.2 KiB
JavaScript
|
#!/usr/bin/env node
|
||
|
|
|
||
|
|
import { chromium } from 'playwright';
|
||
|
|
|
||
|
|
const MOBILE_VIEWPORT = { width: 375, height: 667 };
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
const browser = await chromium.launch({ headless: true });
|
||
|
|
|
||
|
|
console.log('🧪 Testing Mobile Device Detection and Button Visibility\n');
|
||
|
|
|
||
|
|
// TEST 1: Simulate mobile device (iPhone)
|
||
|
|
console.log('📱 TEST 1: iPhone User Agent (Real Mobile Device)\n');
|
||
|
|
const mobileContext = await browser.newContext({
|
||
|
|
viewport: MOBILE_VIEWPORT,
|
||
|
|
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1',
|
||
|
|
hasTouch: true
|
||
|
|
});
|
||
|
|
const mobilePage = await mobileContext.newPage();
|
||
|
|
|
||
|
|
await mobilePage.goto('http://localhost:1999/?lang=en&view=extended');
|
||
|
|
await mobilePage.waitForLoadState('networkidle');
|
||
|
|
|
||
|
|
const mobileDeviceClass = await mobilePage.evaluate(() => {
|
||
|
|
return {
|
||
|
|
hasClass: document.documentElement.classList.contains('is-mobile-device'),
|
||
|
|
allClasses: document.documentElement.className
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
const shortcutsVisible = await mobilePage.locator('.shortcuts-btn').isVisible().catch(() => false);
|
||
|
|
|
||
|
|
console.log('Device Detection:');
|
||
|
|
console.log(` • has 'is-mobile-device' class: ${mobileDeviceClass.hasClass ? '✅' : '❌'}`);
|
||
|
|
console.log(` • All classes: ${mobileDeviceClass.allClasses}`);
|
||
|
|
console.log(`\nShortcuts Button:`);
|
||
|
|
console.log(` • Visible: ${shortcutsVisible ? '❌ WRONG' : '✅ HIDDEN (correct)'}`);
|
||
|
|
|
||
|
|
await mobileContext.close();
|
||
|
|
|
||
|
|
// TEST 2: Desktop browser in mobile view
|
||
|
|
console.log('\n🖥️ TEST 2: Desktop User Agent in Mobile View\n');
|
||
|
|
const desktopContext = await browser.newContext({
|
||
|
|
viewport: MOBILE_VIEWPORT,
|
||
|
|
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
|
||
|
|
hasTouch: false
|
||
|
|
});
|
||
|
|
const desktopPage = await desktopContext.newPage();
|
||
|
|
|
||
|
|
await desktopPage.goto('http://localhost:1999/?lang=en&view=extended');
|
||
|
|
await desktopPage.waitForLoadState('networkidle');
|
||
|
|
|
||
|
|
const desktopDeviceClass = await desktopPage.evaluate(() => {
|
||
|
|
return {
|
||
|
|
hasClass: document.documentElement.classList.contains('is-desktop'),
|
||
|
|
allClasses: document.documentElement.className
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
const shortcutsVisibleDesktop = await desktopPage.locator('.shortcuts-btn').isVisible().catch(() => false);
|
||
|
|
|
||
|
|
console.log('Device Detection:');
|
||
|
|
console.log(` • has 'is-desktop' class: ${desktopDeviceClass.hasClass ? '✅' : '❌'}`);
|
||
|
|
console.log(` • All classes: ${desktopDeviceClass.allClasses}`);
|
||
|
|
console.log(`\nShortcuts Button:`);
|
||
|
|
console.log(` • Visible: ${shortcutsVisibleDesktop ? '✅ VISIBLE (correct for testing)' : '❌ HIDDEN'}`);
|
||
|
|
|
||
|
|
await desktopContext.close();
|
||
|
|
|
||
|
|
const allPassed = mobileDeviceClass.hasClass && !shortcutsVisible &&
|
||
|
|
desktopDeviceClass.hasClass && shortcutsVisibleDesktop;
|
||
|
|
|
||
|
|
console.log(`\n${allPassed ? '✅' : '❌'} Tests ${allPassed ? 'PASSED' : 'FAILED'}\n`);
|
||
|
|
|
||
|
|
await browser.close();
|
||
|
|
process.exit(allPassed ? 0 : 1);
|
||
|
|
})();
|