design-clone 2.1.0 → 2.3.0

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

@@ -0,0 +1,104 @@
+/**
+ * Header Viewport Checks
+ *
+ * Orchestrates all per-viewport header checks using helpers.
+ * Separated from verify-header-helpers.js to keep each file under 200 lines.
+ */
+
+import {
+  HEADER_SELECTORS,
+  findElement,
+  countVisibleElements,
+  checkHeaderPosition,
+  checkLogoPosition
+} from './verify-header-helpers.js';
+
+/**
+ * Test header at a specific viewport — runs all header 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 testHeaderViewport(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: [] };
+  if (verbose) console.error(`\n📱 Testing ${viewportName} (${viewport.width}x${viewport.height})...`);
+
+  const headerResult = await findElement(page, HEADER_SELECTORS.container);
+  if (!headerResult) {
+    result.tests.push({ name: 'Header container exists', passed: false, error: 'No header container found' });
+    result.failed++;
+    if (verbose) console.error(`  ✗ Header not found`);
+    return result;
+  }
+
+  result.tests.push({ name: 'Header container exists', passed: true, selector: headerResult.selector });
+  result.passed++;
+  if (verbose) console.error(`  ✓ Header found: ${headerResult.selector}`);
+
+  const positionInfo = await checkHeaderPosition(page, headerResult.selector);
+
+  const logoResult = await findElement(page, HEADER_SELECTORS.logo);
+  if (logoResult) {
+    const logoPosition = await checkLogoPosition(page, logoResult.selector, viewport.width);
+    result.tests.push({ name: 'Logo present', passed: true, selector: logoResult.selector, position: logoPosition?.position || 'unknown' });
+    result.passed++;
+    if (verbose) console.error(`  ✓ Logo found: ${logoResult.selector} (${logoPosition?.position})`);
+  } else {
+    result.tests.push({ name: 'Logo present', passed: false, error: 'No logo found' });
+    result.failed++;
+    if (verbose) console.error(`  ✗ Logo not found`);
+  }
+
+  const navLinks = await countVisibleElements(page, HEADER_SELECTORS.navLinks);
+  const expectedLinks = viewportName === 'desktop' ? 2 : 0;
+
+  if (navLinks.count >= expectedLinks) {
+    result.tests.push({ name: 'Navigation links visible', passed: true, count: navLinks.count, selector: navLinks.selector });
+    result.passed++;
+    if (verbose) console.error(`  ✓ ${navLinks.count} nav links visible`);
+  } else if (viewportName !== 'desktop' && navLinks.count === 0) {
+    result.tests.push({ name: 'Navigation links (may be in hamburger)', passed: true, count: navLinks.count, note: 'Links may be hidden in mobile menu' });
+    result.passed++;
+    if (verbose) console.error(`  ✓ Nav links hidden (expected on ${viewportName})`);
+  } else {
+    result.tests.push({ name: 'Navigation links visible', passed: false, count: navLinks.count, error: `Expected at least ${expectedLinks} links on ${viewportName}` });
+    result.failed++;
+    if (verbose) console.error(`  ✗ Only ${navLinks.count} nav links (expected >= ${expectedLinks})`);
+  }
+
+  if (viewportName === 'desktop') {
+    const ctaResult = await findElement(page, HEADER_SELECTORS.cta);
+    if (ctaResult) {
+      result.tests.push({ name: 'CTA button present', passed: true, selector: ctaResult.selector });
+      result.passed++;
+      if (verbose) console.error(`  ✓ CTA found: ${ctaResult.selector}`);
+    } else {
+      result.warnings.push('No CTA button found in header');
+      if (verbose) console.error(`  ⚠ No CTA button found`);
+    }
+  }
+
+  if (positionInfo) {
+    result.tests.push({ name: 'Header sticky/fixed behavior', passed: true, position: positionInfo.position, note: (!positionInfo.isSticky && !positionInfo.isFixed) ? 'Header uses static/relative positioning' : undefined });
+    result.passed++;
+    if (verbose) console.error(`  ✓ Header position: ${positionInfo.position}`);
+
+    if ((positionInfo.isSticky || positionInfo.isFixed) && positionInfo.zIndex !== 'auto') {
+      const zIndexOk = positionInfo.zIndex >= 100;
+      result.tests.push({ name: 'Z-index layering', passed: zIndexOk, zIndex: positionInfo.zIndex, note: zIndexOk ? 'Header on top layer' : 'Z-index may be too low' });
+      if (zIndexOk) result.passed++;
+      else result.warnings.push(`Header z-index (${positionInfo.zIndex}) may be too low`);
+      if (verbose) console.error(`  ${zIndexOk ? '✓' : '⚠'} Z-index: ${positionInfo.zIndex}`);
+    }
+
+    result.headerHeight = positionInfo.height;
+  }
+
+  return result;
+}

package/src/verification/verify-header-helpers.js

@@ -0,0 +1,156 @@
+/**
+ * Header Verification Helpers
+ *
+ * Selectors, DOM query utilities, and header-specific checks extracted
+ * from verify-header.js to keep each file under 200 lines.
+ */
+
+// Header element selectors
+export const HEADER_SELECTORS = {
+  container: [
+    'header',
+    '[role="banner"]',
+    '.header',
+    '#header',
+    '.site-header',
+    '.page-header',
+    '.masthead'
+  ],
+  logo: [
+    'header img[alt*="logo" i]',
+    '[role="banner"] img',
+    '.logo img',
+    '.site-logo img',
+    '.logo',
+    '.site-logo',
+    'header a[href="/"] img',
+    '.brand img',
+    '.navbar-brand img'
+  ],
+  nav: [
+    'header nav',
+    'header [role="navigation"]',
+    '.header-nav',
+    '.main-navigation',
+    '.primary-nav',
+    '.site-nav',
+    '.navbar-nav'
+  ],
+  cta: [
+    'header button.cta',
+    'header a[class*="button"]',
+    'header a[class*="btn"]',
+    '.header-action',
+    '.nav-cta',
+    'header .btn-primary',
+    'header a[href*="contact"]',
+    'header a[href*="signup"]',
+    'header a[href*="login"]'
+  ],
+  navLinks: [
+    'header nav a',
+    'header [role="navigation"] a',
+    '.main-navigation a',
+    '.nav-item a',
+    '.menu-item a'
+  ]
+};
+
+/**
+ * Find first matching element from a list of selectors
+ * @param {import('playwright').Page} page
+ * @param {string[]} selectors
+ * @returns {Promise<{element: ElementHandle, selector: string}|null>}
+ */
+export async function findElement(page, selectors) {
+  for (const selector of selectors) {
+    try {
+      const element = await page.$(selector);
+      if (element) return { element, selector };
+    } catch (err) { /* continue */ }
+  }
+  return null;
+}
+
+/**
+ * Count visible elements (returns first non-zero match)
+ * @param {import('playwright').Page} page
+ * @param {string[]} selectors
+ * @returns {Promise<{count: number, selector: string|null}>}
+ */
+export async function countVisibleElements(page, selectors) {
+  for (const selector of selectors) {
+    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 (err) { /* continue */ }
+  }
+  return { count: 0, selector: null };
+}
+
+/**
+ * Check header position/stickiness properties
+ * @param {import('playwright').Page} page
+ * @param {string} headerSelector
+ * @returns {Promise<{position: string, isSticky: boolean, isFixed: boolean, zIndex: number|string, top: number, height: number, width: number}|null>}
+ */
+export async function checkHeaderPosition(page, headerSelector) {
+  return await page.evaluate((sel) => {
+    const header = document.querySelector(sel);
+    if (!header) return null;
+
+    const style = window.getComputedStyle(header);
+    const rect = header.getBoundingClientRect();
+
+    return {
+      position: style.position,
+      isSticky: style.position === 'sticky',
+      isFixed: style.position === 'fixed',
+      zIndex: parseInt(style.zIndex) || 'auto',
+      top: rect.top,
+      height: rect.height,
+      width: rect.width
+    };
+  }, headerSelector);
+}
+
+/**
+ * Check logo position relative to header width
+ * @param {import('playwright').Page} page
+ * @param {string} logoSelector
+ * @param {number} headerWidth
+ * @returns {Promise<{position: string, x: number, y: number, width: number, height: number}|null>}
+ */
+export async function checkLogoPosition(page, logoSelector, headerWidth) {
+  return await page.evaluate((sel, width) => {
+    const logo = document.querySelector(sel);
+    if (!logo) return null;
+
+    const rect = logo.getBoundingClientRect();
+    const centerThreshold = width * 0.35;
+
+    let position = 'unknown';
+    if (rect.left < centerThreshold) position = 'left';
+    else if (rect.left > width - centerThreshold) position = 'right';
+    else position = 'center';
+
+    return { position, x: rect.left, y: rect.top, width: rect.width, height: rect.height };
+  }, logoSelector, headerWidth);
+}
+