upskill-event-manager/test-nav-fix.js
Ben 4367f6a395 feat: implement professional navigation with smooth dropdowns and best practices
- 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
2025-08-20 23:10:53 -03:00

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();
}
})();