design-clone 2.1.0 → 3.0.0

package/src/verification/verify-layout.js

@@ -3,7 +3,7 @@
  * Layout Verification Script
  *
  * Compares generated HTML against original website screenshots
- * using Gemini Vision to identify layout discrepancies.
+ * to identify layout discrepancies.
  *
  * Usage:
  *   node verify-layout.js --html <path> --original <dir> [--output <dir>] [--verbose]
@@ -17,151 +17,31 @@
 
 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';
-
-// Import Gemini for vision comparison
-const GEMINI_API_KEY = process.env.GEMINI_API_KEY || process.env.GOOGLE_API_KEY;
-
-// Viewport configurations matching original screenshots
-const VIEWPORTS = {
-  desktop: { width: 1920, height: 1080, deviceScaleFactor: 1 },
-  tablet: { width: 768, height: 1024, deviceScaleFactor: 1 },
-  mobile: { width: 375, height: 812, deviceScaleFactor: 2 }
-};
+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 { generateCSSFixes, writeReport } from './verify-layout-report.js';
 
 /**
  * Capture screenshot of generated HTML at specific viewport
  */
 async function captureGeneratedScreenshot(page, viewport, outputPath) {
   await page.setViewportSize(viewport);
-  await new Promise(r => setTimeout(r, 500)); // Wait for CSS to apply
-
-  await page.screenshot({
-    path: outputPath,
-    fullPage: true
-  });
-
+  await new Promise(r => setTimeout(r, 500));
+  await page.screenshot({ path: outputPath, fullPage: true });
   return outputPath;
 }
 
 /**
- * Compare two screenshots using Gemini Vision
- */
-async function compareWithGemini(originalPath, generatedPath, viewportName) {
-  if (!GEMINI_API_KEY) {
-    return {
-      success: false,
-      error: 'GEMINI_API_KEY not set',
-      discrepancies: [],
-      similarity: 0
-    };
-  }
-
-  try {
-    const { GoogleGenerativeAI } = await import('@google/generative-ai');
-    const genai = new GoogleGenerativeAI(GEMINI_API_KEY);
-
-    // Read both images as base64
-    const originalBuffer = await fs.readFile(originalPath);
-    const generatedBuffer = await fs.readFile(generatedPath);
-
-    const originalBase64 = originalBuffer.toString('base64');
-    const generatedBase64 = generatedBuffer.toString('base64');
-
-    const prompt = `You are a UI/UX expert comparing two website screenshots for layout accuracy.
-
-IMAGE 1 (left/first): Original website screenshot
-IMAGE 2 (right/second): Generated HTML clone screenshot
-
-Viewport: ${viewportName} (${VIEWPORTS[viewportName].width}x${VIEWPORTS[viewportName].height})
-
-Analyze and compare these two images. Focus on:
-1. **Layout Structure** - Are sections positioned correctly? Any misalignment?
-2. **Spacing** - Are margins, padding, gaps correct?
-3. **Typography** - Font sizes, line heights, text alignment
-4. **Colors** - Background colors, text colors, borders
-5. **Responsive Elements** - Menu, grid layouts, card widths
-6. **Components** - Buttons, forms, icons positioning
-
-Return a JSON object with this exact structure:
-{
-  "similarity_score": <0-100 number>,
-  "overall_assessment": "<brief assessment>",
-  "discrepancies": [
-    {
-      "section": "<section name>",
-      "severity": "<critical|major|minor>",
-      "issue": "<description of the issue>",
-      "css_fix": "<suggested CSS fix or null>"
-    }
-  ],
-  "recommendations": ["<actionable fix 1>", "<actionable fix 2>"]
-}
-
-Be specific about CSS selectors and property values when suggesting fixes.
-If similarity is >90%, discrepancies array can be empty.`;
-
-    const model = genai.getGenerativeModel({ model: 'gemini-2.5-flash' });
-
-    const response = await model.generateContent([
-      prompt,
-      {
-        inlineData: {
-          mimeType: 'image/png',
-          data: originalBase64
-        }
-      },
-      {
-        inlineData: {
-          mimeType: 'image/png',
-          data: generatedBase64
-        }
-      }
-    ]);
-
-    const text = response.response.text();
-
-    // Extract JSON from response
-    const jsonMatch = text.match(/\{[\s\S]*\}/);
-    if (!jsonMatch) {
-      return {
-        success: false,
-        error: 'Could not parse Gemini response',
-        raw: text
-      };
-    }
-
-    const result = JSON.parse(jsonMatch[0]);
-    return {
-      success: true,
-      viewport: viewportName,
-      ...result
-    };
-
-  } catch (error) {
-    return {
-      success: false,
-      error: error.message,
-      discrepancies: []
-    };
-  }
-}
-
-/**
- * Alternative: Use image comparison without API
- * Basic pixel difference calculation
+ * Basic image comparison by file size difference.
+ * For accurate comparison, use Claude Code vision directly.
  */
 async function basicImageCompare(originalPath, generatedPath) {
-  // This is a fallback that just checks file sizes
-  // Real comparison should use Gemini
   try {
     const originalStats = await fs.stat(originalPath);
     const generatedStats = await fs.stat(generatedPath);
 
-    // Crude estimation based on file size difference
     const sizeDiff = Math.abs(originalStats.size - generatedStats.size) / originalStats.size;
     const similarity = Math.max(0, 100 - (sizeDiff * 100));
 
@@ -169,111 +49,13 @@ async function basicImageCompare(originalPath, generatedPath) {
       success: true,
       method: 'basic',
       similarity_score: Math.round(similarity),
-      note: 'Basic comparison - use Gemini for accurate analysis'
+      note: 'Basic comparison - use Claude Code vision for accurate analysis'
     };
   } catch (error) {
     return { success: false, error: error.message };
   }
 }
 
-/**
- * Generate CSS fix suggestions based on discrepancies
- */
-function generateCSSFixes(discrepancies) {
-  const fixes = [];
-
-  for (const disc of discrepancies) {
-    if (disc.css_fix) {
-      fixes.push({
-        section: disc.section,
-        severity: disc.severity,
-        issue: disc.issue,
-        fix: disc.css_fix
-      });
-    }
-  }
-
-  return fixes;
-}
-
-/**
- * Write comparison report
- */
-async function writeReport(outputDir, results) {
-  const reportPath = path.join(outputDir, 'layout-verification.md');
-
-  let report = `# Layout Verification Report
-
-Generated: ${new Date().toISOString()}
-
-## Summary
-
-| Viewport | Similarity | Issues |
-|----------|------------|--------|
-`;
-
-  for (const [viewport, result] of Object.entries(results.viewports)) {
-    const score = result.similarity_score || 0;
-    const issues = result.discrepancies?.length || 0;
-    const status = score >= 90 ? '✅' : score >= 70 ? '⚠️' : '❌';
-    report += `| ${viewport} | ${status} ${score}% | ${issues} |\n`;
-  }
-
-  report += `\n## Overall Score: ${results.overall_score}%\n\n`;
-
-  // Detail each viewport
-  for (const [viewport, result] of Object.entries(results.viewports)) {
-    report += `## ${viewport.charAt(0).toUpperCase() + viewport.slice(1)} (${VIEWPORTS[viewport].width}x${VIEWPORTS[viewport].height})\n\n`;
-
-    if (result.overall_assessment) {
-      report += `**Assessment:** ${result.overall_assessment}\n\n`;
-    }
-
-    if (result.discrepancies?.length > 0) {
-      report += `### Discrepancies\n\n`;
-      for (const disc of result.discrepancies) {
-        const icon = disc.severity === 'critical' ? '🔴' : disc.severity === 'major' ? '🟠' : '🟡';
-        report += `${icon} **${disc.section}** (${disc.severity})\n`;
-        report += `   - Issue: ${disc.issue}\n`;
-        if (disc.css_fix) {
-          report += `   - Fix: \`${disc.css_fix}\`\n`;
-        }
-        report += '\n';
-      }
-    } else {
-      report += `✅ No significant discrepancies found.\n\n`;
-    }
-
-    if (result.recommendations?.length > 0) {
-      report += `### Recommendations\n\n`;
-      for (const rec of result.recommendations) {
-        report += `- ${rec}\n`;
-      }
-      report += '\n';
-    }
-  }
-
-  // Consolidated CSS fixes
-  const allFixes = [];
-  for (const result of Object.values(results.viewports)) {
-    if (result.discrepancies) {
-      allFixes.push(...generateCSSFixes(result.discrepancies));
-    }
-  }
-
-  if (allFixes.length > 0) {
-    report += `## Suggested CSS Fixes\n\n\`\`\`css\n`;
-    for (const fix of allFixes) {
-      report += `/* ${fix.section}: ${fix.issue} */\n`;
-      report += `${fix.fix}\n\n`;
-    }
-    report += `\`\`\`\n`;
-  }
-
-  await fs.writeFile(reportPath, report);
-  return reportPath;
-}
-
 /**
  * Main verification function
  */
@@ -293,7 +75,6 @@ async function verifyLayout() {
   const verbose = args.verbose === 'true';
   const outputDir = args.output || path.dirname(args.html);
 
-  // Ensure output directory exists
   await fs.mkdir(outputDir, { recursive: true });
 
   try {
@@ -317,22 +98,14 @@ async function verifyLayout() {
       process.exit(1);
     }
 
-    // Launch browser and capture generated screenshots
     if (verbose) console.error('\n📸 Capturing generated screenshots...\n');
 
     const browser = await getBrowser({ headless: args.headless !== 'false' });
     const page = await getPage(browser);
 
-    // Navigate to generated HTML
     const absolutePath = path.resolve(args.html);
-    const targetUrl = `file://${absolutePath}`;
+    await page.goto(`file://${absolutePath}`, { waitUntil: 'networkidle', timeout: 30000 });
 
-    await page.goto(targetUrl, {
-      waitUntil: 'networkidle',
-      timeout: 30000
-    });
-
-    // Capture screenshots at each viewport
     const generatedScreenshots = {};
     for (const [viewport, config] of Object.entries(VIEWPORTS)) {
       if (originalScreenshots[viewport]) {
@@ -343,24 +116,15 @@ async function verifyLayout() {
       }
     }
 
-    // Close browser
     if (args.close === 'true') {
       await closeBrowser();
     } else {
       await disconnectBrowser();
     }
 
-    // Compare screenshots
     if (verbose) console.error('\n🔬 Comparing layouts...\n');
 
-    const results = {
-      success: true,
-      html: args.html,
-      viewports: {},
-      overall_score: 0,
-      all_fixes: []
-    };
-
+    const results = { success: true, html: args.html, viewports: {}, overall_score: 0, all_fixes: [] };
     let totalScore = 0;
     let viewportCount = 0;
 
@@ -370,14 +134,7 @@ async function verifyLayout() {
 
       if (verbose) console.error(`  Comparing ${viewport}...`);
 
-      let comparison;
-      if (GEMINI_API_KEY) {
-        comparison = await compareWithGemini(originalPath, generatedPath, viewport);
-      } else {
-        comparison = await basicImageCompare(originalPath, generatedPath);
-        if (verbose) console.error('    ⚠ Using basic comparison (set GEMINI_API_KEY for accurate analysis)');
-      }
-
+      const comparison = await basicImageCompare(originalPath, generatedPath);
       results.viewports[viewport] = comparison;
 
       if (comparison.success && comparison.similarity_score !== undefined) {
@@ -399,11 +156,9 @@ async function verifyLayout() {
     results.overall_score = viewportCount > 0 ? Math.round(totalScore / viewportCount) : 0;
     results.success = results.overall_score >= 70;
 
-    // Write report
     const reportPath = await writeReport(outputDir, results);
     results.report = reportPath;
 
-    // Final summary
     if (verbose) {
       console.error('\n📊 Summary:');
       console.error(`   Overall Score: ${results.overall_score}%`);
@@ -420,5 +175,4 @@ async function verifyLayout() {
   }
 }
 
-// Run
 verifyLayout();

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

@@ -0,0 +1,104 @@
+/**
+ * Menu Viewport Checks
+ *
+ * Desktop/mobile menu test orchestration using helpers.
+ * Separated from verify-menu-helpers.js to keep each file under 200 lines.
+ */
+
+import {
+  MENU_SELECTORS,
+  isElementVisible,
+  findElement,
+  countVisibleMenuItems
+} from './verify-menu-helpers.js';
+
+/**
+ * Test desktop menu — requires at least 2 visible items
+ * @param {import('playwright').Page} page
+ * @param {Object} result - Viewport result object (mutated)
+ * @param {{count: number, selector: string|null}} menuItems
+ * @param {boolean} verbose
+ */
+export async function testDesktopMenu(page, result, menuItems, verbose) {
+  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)`);
+  }
+}
+
+/**
+ * Test toggle button click and resulting state change
+ * @param {import('playwright').Page} page
+ * @param {ElementHandle} toggleElement
+ * @param {Object} result - Viewport result object (mutated)
+ * @param {boolean} verbose
+ */
+export async function testToggleFunctionality(page, toggleElement, result, verbose) {
+  try {
+    const initialMenuItems = await countVisibleMenuItems(page);
+    await toggleElement.click();
+    await new Promise(r => setTimeout(r, 500));
+    const afterClickItems = await countVisibleMenuItems(page);
+
+    const stateChanged = afterClickItems.count !== initialMenuItems.count;
+    const hasEnoughItems = afterClickItems.count >= 2;
+
+    if (stateChanged || hasEnoughItems) {
+      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`);
+      await toggleElement.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}`);
+  }
+}
+
+/**
+ * Test mobile/tablet hamburger menu behaviour
+ * @param {import('playwright').Page} page
+ * @param {Object} result - Viewport result object (mutated)
+ * @param {{count: number, selector: string|null}} menuItems
+ * @param {boolean} verbose
+ */
+export async function testMobileMenu(page, result, menuItems, verbose) {
+  const toggleResult = await findElement(page, MENU_SELECTORS.toggleButtons);
+
+  if (!toggleResult) {
+    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`);
+    }
+    return;
+  }
+
+  const isToggleVisible = await isElementVisible(page, toggleResult.selector);
+  if (!isToggleVisible) {
+    result.warnings.push('Menu toggle found but not visible');
+    if (verbose) console.error(`  ⚠ Menu toggle found but not visible`);
+    return;
+  }
+
+  result.tests.push({ name: 'Mobile menu toggle visible', passed: true, selector: toggleResult.selector });
+  result.passed++;
+  if (verbose) console.error(`  ✓ Menu toggle visible: ${toggleResult.selector}`);
+
+  await testToggleFunctionality(page, toggleResult.element, result, verbose);
+}

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

@@ -0,0 +1,112 @@
+/**
+ * Menu Verification Helpers
+ *
+ * Selectors and DOM query utilities for verify-menu.js.
+ * Includes toggle button/nav container selectors and visible item counting.
+ */
+
+// Common menu element selectors
+export const MENU_SELECTORS = {
+  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'
+  ],
+  navContainers: [
+    'nav',
+    '[role="navigation"]',
+    '.nav',
+    '.navigation',
+    '.main-nav',
+    '.site-nav',
+    '.header-nav',
+    '.primary-nav',
+    '#nav',
+    '#navigation',
+    '.menu',
+    '.main-menu'
+  ],
+  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
+ * @param {import('playwright').Page} page
+ * @param {string} selector
+ * @returns {Promise<boolean>}
+ */
+export async function isElementVisible(page, selector) {
+  try {
+    return await page.locator(selector).isVisible();
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Find first matching selector from a list
+ * @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) {
+    const element = await page.$(selector);
+    if (element) return { element, selector };
+  }
+  return null;
+}
+
+/**
+ * Count visible menu items across MENU_SELECTORS.menuItems
+ * Returns count from first selector that yields visible items
+ * @param {import('playwright').Page} page
+ * @returns {Promise<{count: number, selector: string|null}>}
+ */
+export 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 };
+}
+