- Created hvac-navigation-enhanced.css with modern dropdown styles - Pure CSS hover dropdowns for desktop (no JS needed) - Smooth animations with 300ms transitions - Professional hover effects with bottom border animation - Proper z-index layering (z-index: 9999 for dropdowns) - Keyboard navigation support - Added hvac-navigation-enhanced.js for enhanced UX - Mobile hamburger menu with smooth animations - Keyboard navigation (arrow keys, escape, enter) - Click outside to close - Accessibility improvements with ARIA attributes - Smooth scroll for anchor links - Fixed menu toggle visibility issue - Removed conflicting Astra theme buttons - Using pure CSS :hover for desktop dropdowns - Better mobile responsive behavior - Updated class-hvac-scripts-styles.php - Added new CSS and JS files to build pipeline - Proper dependency management Best practices implemented: - WCAG 2.1 AA compliant keyboard navigation - Focus management for accessibility - Smooth 300ms transitions for professional feel - Mobile-first responsive design - No JavaScript required for desktop dropdowns
80 lines
3 KiB
JavaScript
80 lines
3 KiB
JavaScript
const { chromium } = require('playwright');
|
|
|
|
(async () => {
|
|
console.log('🔧 Testing HVAC Navigation with Correct Selectors');
|
|
console.log('==================================================\n');
|
|
|
|
const browser = await chromium.launch({
|
|
headless: false,
|
|
slowMo: 300
|
|
});
|
|
|
|
const page = await browser.newPage();
|
|
|
|
try {
|
|
console.log('1. Navigating to dashboard...');
|
|
await page.goto('https://upskill-staging.measurequick.com/trainer/dashboard/');
|
|
await page.waitForTimeout(2000);
|
|
|
|
// Look for the actual menu toggle button
|
|
console.log('\n2. Looking for menu toggle buttons...');
|
|
const menuToggles = await page.locator('button:has-text("Menu Toggle")').all();
|
|
console.log(` Found ${menuToggles.length} "Menu Toggle" buttons`);
|
|
|
|
if (menuToggles.length > 0) {
|
|
console.log('\n3. Clicking first Menu Toggle button...');
|
|
await menuToggles[0].click();
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Check if any dropdown opened
|
|
const expanded = await menuToggles[0].getAttribute('aria-expanded');
|
|
console.log(` Button aria-expanded: ${expanded}`);
|
|
|
|
// Look for menu items
|
|
const menuItems = await page.locator('ul.sub-menu, ul.dropdown-menu, ul[class*="menu"]').all();
|
|
console.log(` Found ${menuItems.length} menu lists`);
|
|
|
|
// Take screenshot
|
|
await page.screenshot({ path: 'nav-after-click.png' });
|
|
console.log(' Screenshot saved as nav-after-click.png');
|
|
|
|
// Try to find specific menu items
|
|
console.log('\n4. Looking for specific menu items...');
|
|
const dashboard = await page.locator('a:has-text("Dashboard")').count();
|
|
const events = await page.locator('a:has-text("Events")').count();
|
|
const certificates = await page.locator('a:has-text("Certificate")').count();
|
|
|
|
console.log(` Dashboard links: ${dashboard}`);
|
|
console.log(` Events links: ${events}`);
|
|
console.log(` Certificate links: ${certificates}`);
|
|
|
|
// Check if the issue is with the HVAC custom menu CSS
|
|
console.log('\n5. Checking HVAC menu CSS classes...');
|
|
const hvacMenuClasses = await page.evaluate(() => {
|
|
const elements = document.querySelectorAll('[class*="hvac-menu"]');
|
|
return Array.from(elements).map(el => el.className);
|
|
});
|
|
|
|
if (hvacMenuClasses.length > 0) {
|
|
console.log(' HVAC menu classes found:');
|
|
hvacMenuClasses.forEach(cls => console.log(` - ${cls}`));
|
|
} else {
|
|
console.log(' ❌ No HVAC menu classes found - menu might be using theme defaults');
|
|
}
|
|
|
|
} else {
|
|
console.log(' ❌ No "Menu Toggle" buttons found');
|
|
}
|
|
|
|
console.log('\n==================================================');
|
|
console.log('✅ Test complete. Check screenshots for visual confirmation.');
|
|
|
|
// Keep browser open for observation
|
|
await page.waitForTimeout(5000);
|
|
|
|
} catch (error) {
|
|
console.error('❌ Error:', error.message);
|
|
} finally {
|
|
await browser.close();
|
|
}
|
|
})();
|