design-clone 2.1.0 → 2.3.0

package/src/verification/verify-menu.js

@@ -18,124 +18,13 @@
  *   --verbose   Show detailed progress
  */
 
-import fs from 'fs/promises';
 import path from 'path';
-import { fileURLToPath } from 'url';
 
-// Import browser abstraction (auto-detects chrome-devtools or standalone)
-import { getBrowser, getPage, closeBrowser, disconnectBrowser, parseArgs, outputJSON, outputError } from '../utils/browser.js';
-
-// Viewport configurations
-const VIEWPORTS = {
-  mobile: { width: 375, height: 812, deviceScaleFactor: 2 },
-  tablet: { width: 768, height: 1024, deviceScaleFactor: 1 },
-  desktop: { width: 1920, height: 1080, deviceScaleFactor: 1 }
-};
-
-// Common menu element selectors
-const MENU_SELECTORS = {
-  // Hamburger/toggle buttons
-  toggleButtons: [
-    '[aria-label*="menu" i]',
-    '[aria-label*="nav" i]',
-    'button.hamburger',
-    '.hamburger',
-    '.menu-toggle',
-    '.nav-toggle',
-    '.mobile-menu-toggle',
-    'button[class*="hamburger"]',
-    'button[class*="menu"]',
-    '[data-toggle="nav"]',
-    '[data-menu-toggle]',
-    '.header__toggle',
-    '.header-toggle',
-    '#menu-toggle',
-    '.burger',
-    '.burger-menu'
-  ],
-  // Navigation containers
-  navContainers: [
-    'nav',
-    '[role="navigation"]',
-    '.nav',
-    '.navigation',
-    '.main-nav',
-    '.site-nav',
-    '.header-nav',
-    '.primary-nav',
-    '#nav',
-    '#navigation',
-    '.menu',
-    '.main-menu'
-  ],
-  // Menu items
-  menuItems: [
-    'nav a',
-    'nav li',
-    '.nav-item',
-    '.menu-item',
-    '.nav-link',
-    '.menu-link',
-    '[role="navigation"] a'
-  ]
-};
-
-/**
- * Check if element is visible using Playwright locator API
- */
-async function isElementVisible(page, selector) {
-  try {
-    return await page.locator(selector).isVisible();
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Find first matching selector
- */
-async function findElement(page, selectors) {
-  for (const selector of selectors) {
-    const element = await page.$(selector);
-    if (element) {
-      return { element, selector };
-    }
-  }
-  return null;
-}
-
-/**
- * Count visible menu items
- */
-async function countVisibleMenuItems(page) {
-  for (const selector of MENU_SELECTORS.menuItems) {
-    try {
-      const count = await page.evaluate((sel) => {
-        const items = document.querySelectorAll(sel);
-        let visible = 0;
-        items.forEach(item => {
-          const style = window.getComputedStyle(item);
-          const rect = item.getBoundingClientRect();
-          if (
-            style.display !== 'none' &&
-            style.visibility !== 'hidden' &&
-            style.opacity !== '0' &&
-            rect.width > 0 &&
-            rect.height > 0
-          ) {
-            visible++;
-          }
-        });
-        return visible;
-      }, selector);
-
-      if (count > 0) {
-        return { count, selector };
-      }
-    } catch { /* continue */ }
-  }
-  return { count: 0, selector: null };
-}
+import { getBrowser, getPage, closeBrowser, disconnectBrowser } from '../utils/browser.js';
+import { parseArgs, outputJSON, outputError } from '../utils/helpers.js';
+import { VIEWPORTS_HD as VIEWPORTS } from '../shared/viewports.js';
+import { MENU_SELECTORS, findElement, countVisibleMenuItems } from './verify-menu-helpers.js';
+import { testDesktopMenu, testMobileMenu } from './verify-menu-checks.js';
 
 /**
  * Test menu at specific viewport
@@ -143,151 +32,28 @@ async function countVisibleMenuItems(page) {
 async function testViewport(page, viewportName, verbose = false) {
   const viewport = VIEWPORTS[viewportName];
   await page.setViewportSize(viewport);
-  await new Promise(r => setTimeout(r, 500)); // Wait for CSS to apply
-
-  const result = {
-    viewport: viewportName,
-    dimensions: viewport,
-    tests: [],
-    passed: 0,
-    failed: 0,
-    warnings: []
-  };
+  await new Promise(r => setTimeout(r, 500));
 
+  const result = { viewport: viewportName, dimensions: viewport, tests: [], passed: 0, failed: 0, warnings: [] };
   if (verbose) console.error(`\n📱 Testing ${viewportName} (${viewport.width}x${viewport.height})...`);
 
-  // Test 1: Navigation container exists
   const navResult = await findElement(page, MENU_SELECTORS.navContainers);
   if (navResult) {
-    result.tests.push({
-      name: 'Navigation container exists',
-      passed: true,
-      selector: navResult.selector
-    });
+    result.tests.push({ name: 'Navigation container exists', passed: true, selector: navResult.selector });
     result.passed++;
     if (verbose) console.error(`  ✓ Navigation container found: ${navResult.selector}`);
   } else {
-    result.tests.push({
-      name: 'Navigation container exists',
-      passed: false,
-      error: 'No navigation container found'
-    });
+    result.tests.push({ name: 'Navigation container exists', passed: false, error: 'No navigation container found' });
     result.failed++;
     if (verbose) console.error(`  ✗ Navigation container not found`);
   }
 
-  // Test 2: Menu items visibility
   const menuItems = await countVisibleMenuItems(page);
 
-  // Different expectations based on viewport
   if (viewportName === 'desktop') {
-    // Desktop should have visible menu items
-    if (menuItems.count >= 2) {
-      result.tests.push({
-        name: 'Desktop menu items visible',
-        passed: true,
-        count: menuItems.count,
-        selector: menuItems.selector
-      });
-      result.passed++;
-      if (verbose) console.error(`  ✓ ${menuItems.count} menu items visible`);
-    } else {
-      result.tests.push({
-        name: 'Desktop menu items visible',
-        passed: false,
-        count: menuItems.count,
-        error: 'Expected at least 2 visible menu items on desktop'
-      });
-      result.failed++;
-      if (verbose) console.error(`  ✗ Only ${menuItems.count} menu items visible (expected >= 2)`);
-    }
+    await testDesktopMenu(page, result, menuItems, verbose);
   } else {
-    // Mobile/Tablet - check for hamburger menu
-    const toggleResult = await findElement(page, MENU_SELECTORS.toggleButtons);
-
-    if (toggleResult) {
-      const isToggleVisible = await isElementVisible(page, toggleResult.selector);
-
-      if (isToggleVisible) {
-        result.tests.push({
-          name: 'Mobile menu toggle visible',
-          passed: true,
-          selector: toggleResult.selector
-        });
-        result.passed++;
-        if (verbose) console.error(`  ✓ Menu toggle visible: ${toggleResult.selector}`);
-
-        // Test toggle functionality
-        try {
-          // Get initial menu state
-          const initialMenuItems = await countVisibleMenuItems(page);
-
-          // Click toggle
-          await toggleResult.element.click();
-          await new Promise(r => setTimeout(r, 500)); // Wait for animation
-
-          // Check menu state after click
-          const afterClickItems = await countVisibleMenuItems(page);
-
-          // Menu should either show more items or we can detect state change
-          if (afterClickItems.count !== initialMenuItems.count || afterClickItems.count >= 2) {
-            result.tests.push({
-              name: 'Menu toggle functionality',
-              passed: true,
-              before: initialMenuItems.count,
-              after: afterClickItems.count
-            });
-            result.passed++;
-            if (verbose) console.error(`  ✓ Toggle works: ${initialMenuItems.count} -> ${afterClickItems.count} items`);
-
-            // Click again to close
-            await toggleResult.element.click();
-            await new Promise(r => setTimeout(r, 300));
-          } else {
-            result.tests.push({
-              name: 'Menu toggle functionality',
-              passed: false,
-              before: initialMenuItems.count,
-              after: afterClickItems.count,
-              warning: 'Toggle may not be functional - no state change detected'
-            });
-            result.warnings.push('Menu toggle click did not change visible items');
-            if (verbose) console.error(`  ⚠ Toggle click had no effect`);
-          }
-        } catch (err) {
-          result.tests.push({
-            name: 'Menu toggle functionality',
-            passed: false,
-            error: err.message
-          });
-          result.failed++;
-          if (verbose) console.error(`  ✗ Toggle click failed: ${err.message}`);
-        }
-      } else {
-        result.warnings.push('Menu toggle found but not visible');
-        if (verbose) console.error(`  ⚠ Menu toggle found but not visible`);
-      }
-    } else {
-      // No hamburger - check if menu items are still visible (maybe it's a small visible menu)
-      if (menuItems.count >= 2) {
-        result.tests.push({
-          name: 'Mobile menu visible without toggle',
-          passed: true,
-          count: menuItems.count,
-          note: 'Menu shows items without hamburger toggle'
-        });
-        result.passed++;
-        if (verbose) console.error(`  ✓ ${menuItems.count} menu items visible (no toggle needed)`);
-      } else {
-        result.tests.push({
-          name: 'Mobile menu accessibility',
-          passed: false,
-          error: 'No hamburger toggle found and menu items hidden'
-        });
-        result.failed++;
-        if (verbose) console.error(`  ✗ No hamburger toggle and menu items hidden`);
-      }
-    }
+    await testMobileMenu(page, result, menuItems, verbose);
   }
 
   return result;
@@ -298,12 +64,8 @@ async function testViewport(page, viewportName, verbose = false) {
  */
 async function captureDebugScreenshot(page, outputDir, viewportName) {
   if (!outputDir) return null;
-
   const screenshotPath = path.join(outputDir, `menu-test-${viewportName}.png`);
-  await page.screenshot({
-    path: screenshotPath,
-    fullPage: false
-  });
+  await page.screenshot({ path: screenshotPath, fullPage: false });
   return screenshotPath;
 }
 
@@ -322,38 +84,19 @@ async function verifyMenu() {
   const outputDir = args.output;
 
   try {
-    // Launch browser
     const browser = await getBrowser({ headless: args.headless !== 'false' });
     const page = await getPage(browser);
 
-    // Navigate to page
-    let targetUrl;
-    if (args.html) {
-      // Local file
-      const absolutePath = path.resolve(args.html);
-      targetUrl = `file://${absolutePath}`;
-    } else {
-      targetUrl = args.url;
-    }
-
+    const targetUrl = args.html ? `file://${path.resolve(args.html)}` : args.url;
     if (verbose) console.error(`\n🔍 Verifying responsive menu: ${targetUrl}\n`);
 
-    await page.goto(targetUrl, {
-      waitUntil: 'networkidle',
-      timeout: 30000
-    });
+    await page.goto(targetUrl, { waitUntil: 'networkidle', timeout: 30000 });
 
-    // Test all viewports
     const results = {
       success: true,
       url: targetUrl,
       viewports: {},
-      summary: {
-        totalTests: 0,
-        passed: 0,
-        failed: 0,
-        warnings: []
-      },
+      summary: { totalTests: 0, passed: 0, failed: 0, warnings: [] },
       screenshots: []
     };
 
@@ -366,30 +109,20 @@ async function verifyMenu() {
       results.summary.failed += viewportResult.failed;
       results.summary.warnings.push(...viewportResult.warnings);
 
-      // Capture debug screenshot if output dir provided
       if (outputDir) {
         const screenshotPath = await captureDebugScreenshot(page, outputDir, viewportName);
         if (screenshotPath) results.screenshots.push(screenshotPath);
       }
     }
 
-    // Determine overall success
     results.success = results.summary.failed === 0;
 
-    // Close browser
-    if (args.close === 'true') {
-      await closeBrowser();
-    } else {
-      await disconnectBrowser();
-    }
+    if (args.close === 'true') { await closeBrowser(); } else { await disconnectBrowser(); }
 
-    // Final summary
     if (verbose) {
       console.error('\n📊 Summary:');
       console.error(`   Tests: ${results.summary.passed}/${results.summary.totalTests} passed`);
-      if (results.summary.warnings.length > 0) {
-        console.error(`   Warnings: ${results.summary.warnings.length}`);
-      }
+      if (results.summary.warnings.length > 0) console.error(`   Warnings: ${results.summary.warnings.length}`);
       console.error(`   Status: ${results.success ? '✓ PASS' : '✗ FAIL'}\n`);
     }
 
@@ -402,5 +135,4 @@ async function verifyMenu() {
   }
 }
 
-// Run
 verifyMenu();

package/src/verification/verify-slider-checks.js

@@ -0,0 +1,115 @@
+/**
+ * Slider Viewport Checks
+ *
+ * Orchestrates all per-viewport slider checks using helpers.
+ * Separated from verify-slider-helpers.js to keep each file under 200 lines.
+ */
+
+import {
+  detectSliderLibrary,
+  isElementVisible,
+  countVisibleElements,
+  getActiveSlideIndex,
+  checkAutoplay
+} from './verify-slider-helpers.js';
+
+/**
+ * Test slider at a specific viewport — runs all slider checks
+ * @param {import('playwright').Page} page
+ * @param {string} viewportName
+ * @param {Object} VIEWPORTS - Viewport map
+ * @param {boolean} verbose
+ * @returns {Promise<Object>} Viewport result object
+ */
+export async function testSliderViewport(page, viewportName, VIEWPORTS, verbose = false) {
+  const viewport = VIEWPORTS[viewportName];
+  await page.setViewportSize(viewport);
+  await new Promise(r => setTimeout(r, 500));
+
+  const result = {
+    viewport: viewportName,
+    dimensions: viewport,
+    tests: [],
+    passed: 0,
+    failed: 0,
+    warnings: [],
+    sliderInfo: null
+  };
+
+  if (verbose) console.error(`\n📱 Testing ${viewportName} (${viewport.width}x${viewport.height})...`);
+
+  const sliderDetection = await detectSliderLibrary(page);
+  if (!sliderDetection) {
+    result.tests.push({ name: 'Slider detection', passed: true, note: 'No slider/carousel detected on page' });
+    result.passed++;
+    if (verbose) console.error(`  ℹ No slider detected`);
+    return result;
+  }
+
+  const { library, patterns } = sliderDetection;
+  result.sliderInfo = { library };
+  result.tests.push({ name: 'Slider detection', passed: true, library, selector: patterns.container });
+  result.passed++;
+  if (verbose) console.error(`  ✓ Slider detected: ${library}`);
+
+  const slideCount = await countVisibleElements(page, patterns.slide);
+  if (slideCount > 0) {
+    result.tests.push({ name: 'Slides present', passed: true, count: slideCount });
+    result.passed++;
+    result.sliderInfo.slideCount = slideCount;
+    if (verbose) console.error(`  ✓ ${slideCount} slides found`);
+  } else {
+    result.tests.push({ name: 'Slides present', passed: false, error: 'No slides found in slider' });
+    result.failed++;
+    if (verbose) console.error(`  ✗ No slides found`);
+  }
+
+  const hasPrev = await isElementVisible(page, patterns.prev);
+  const hasNext = await isElementVisible(page, patterns.next);
+  if (hasPrev || hasNext) {
+    result.tests.push({ name: 'Navigation arrows', passed: true, hasPrev, hasNext });
+    result.passed++;
+    if (verbose) console.error(`  ✓ Navigation arrows: prev=${hasPrev}, next=${hasNext}`);
+  } else {
+    result.warnings.push('No navigation arrows visible');
+    if (verbose) console.error(`  ⚠ No navigation arrows found`);
+  }
+
+  const hasPagination = await isElementVisible(page, patterns.pagination);
+  if (hasPagination) {
+    result.tests.push({ name: 'Pagination dots', passed: true, selector: patterns.pagination });
+    result.passed++;
+    if (verbose) console.error(`  ✓ Pagination dots found`);
+  } else {
+    result.warnings.push('No pagination dots visible');
+    if (verbose) console.error(`  ⚠ No pagination dots found`);
+  }
+
+  const activeIndex = await getActiveSlideIndex(page, patterns);
+  if (activeIndex >= 0) {
+    result.tests.push({ name: 'Active slide indicator', passed: true, activeIndex });
+    result.passed++;
+    result.sliderInfo.currentSlide = activeIndex;
+    if (verbose) console.error(`  ✓ Active slide: ${activeIndex}`);
+  } else {
+    result.warnings.push('Could not determine active slide');
+    if (verbose) console.error(`  ⚠ Could not detect active slide`);
+  }
+
+  if (viewportName === 'desktop' && slideCount > 1) {
+    if (verbose) console.error(`  Testing autoplay...`);
+    const autoplayResult = await checkAutoplay(page, patterns, verbose);
+    result.tests.push({
+      name: 'Autoplay functionality',
+      passed: true,
+      note: autoplayResult.hasAutoplay ? undefined : `No autoplay detected (${autoplayResult.changes} changes in ${autoplayResult.duration}ms)`,
+      changes: autoplayResult.changes,
+      duration: autoplayResult.duration
+    });
+    result.passed++;
+    result.sliderInfo.hasAutoplay = autoplayResult.hasAutoplay;
+    if (verbose) console.error(`  ${autoplayResult.hasAutoplay ? '✓ Autoplay detected' : 'ℹ No autoplay'} (${autoplayResult.changes} changes)`);
+  }
+
+  return result;
+}

package/src/verification/verify-slider-constants.js

@@ -0,0 +1,65 @@
+/**
+ * Slider Verification Constants
+ *
+ * CSS selector patterns for known slider libraries and autoplay detection config.
+ * Extracted from verify-slider-helpers.js to keep each file under 200 lines.
+ */
+
+// Slider library CSS selector patterns
+export const SLIDER_PATTERNS = {
+  swiper: {
+    container: '[class*="swiper"]',
+    slide: '.swiper-slide',
+    active: '.swiper-slide-active',
+    prev: '.swiper-button-prev',
+    next: '.swiper-button-next',
+    pagination: '.swiper-pagination'
+  },
+  slick: {
+    container: '[class*="slick"]',
+    slide: '.slick-slide',
+    active: '.slick-active, .slick-current',
+    prev: '.slick-prev',
+    next: '.slick-next',
+    pagination: '.slick-dots'
+  },
+  owl: {
+    container: '[class*="owl"]',
+    slide: '.owl-item',
+    active: '.owl-item.active',
+    prev: '.owl-prev',
+    next: '.owl-next',
+    pagination: '.owl-dots'
+  },
+  splide: {
+    container: '.splide',
+    slide: '.splide__slide',
+    active: '.splide__slide.is-active',
+    prev: '.splide__arrow--prev',
+    next: '.splide__arrow--next',
+    pagination: '.splide__pagination'
+  },
+  glide: {
+    container: '.glide',
+    slide: '.glide__slide',
+    active: '.glide__slide--active',
+    prev: '[data-glide-dir="<"]',
+    next: '[data-glide-dir=">"]',
+    pagination: '.glide__bullets'
+  },
+  native: {
+    container: '[style*="scroll-snap"], [class*="carousel"], [class*="slider"]',
+    slide: '[style*="scroll-snap"] > *, .carousel-item, .slider-item',
+    active: '.active, [aria-current="true"]',
+    prev: '[class*="prev"], [aria-label*="prev" i]',
+    next: '[class*="next"], [aria-label*="next" i]',
+    pagination: '[class*="indicator"], [class*="dot"], [role="tablist"]'
+  }
+};
+
+// Autoplay detection config
+export const AUTOPLAY_CONFIG = {
+  waitTime: 6000,        // Total wait time in ms
+  checkInterval: 1000,   // Check every 1s
+  requiredChanges: 2     // Require 2 slide changes (per validation)
+};