cbrowser 7.1.1 → 7.3.0

package/dist/browser.js

@@ -54,6 +54,15 @@ exports.runCrossBrowserTest = runCrossBrowserTest;
 exports.runCrossBrowserSuite = runCrossBrowserSuite;
 exports.formatCrossBrowserReport = formatCrossBrowserReport;
 exports.generateCrossBrowserHtmlReport = generateCrossBrowserHtmlReport;
+exports.runResponsiveTest = runResponsiveTest;
+exports.runResponsiveSuite = runResponsiveSuite;
+exports.formatResponsiveReport = formatResponsiveReport;
+exports.generateResponsiveHtmlReport = generateResponsiveHtmlReport;
+exports.listViewportPresets = listViewportPresets;
+exports.runABComparison = runABComparison;
+exports.runABSuite = runABSuite;
+exports.formatABReport = formatABReport;
+exports.generateABHtmlReport = generateABHtmlReport;
 const playwright_1 = require("playwright");
 const fs_1 = require("fs");
 const path_1 = require("path");
@@ -6208,7 +6217,795 @@ function generateCrossBrowserHtmlReport(suiteResult) {
     </div>
 
     <footer>
-      Generated by CBrowser v7.1.0 | Test completed in ${(duration / 1000).toFixed(1)}s
+      Generated by CBrowser v7.2.0 | Test completed in ${(duration / 1000).toFixed(1)}s
+    </footer>
+  </div>
+</body>
+</html>`;
+}
+// ============================================================================
+// Responsive Visual Testing (v7.2.0)
+// ============================================================================
+/**
+ * Get viewport presets by name or return custom preset
+ */
+function resolveViewports(viewports) {
+    if (!viewports || viewports.length === 0) {
+        // Default: mobile, tablet, desktop
+        return types_js_1.VIEWPORT_PRESETS.filter(v => v.name === "mobile" || v.name === "tablet" || v.name === "desktop");
+    }
+    return viewports.map(v => {
+        if (typeof v === "string") {
+            const preset = types_js_1.VIEWPORT_PRESETS.find(p => p.name === v);
+            if (!preset) {
+                throw new Error(`Unknown viewport preset: ${v}. Available: ${types_js_1.VIEWPORT_PRESETS.map(p => p.name).join(", ")}`);
+            }
+            return preset;
+        }
+        return v;
+    });
+}
+/**
+ * Get the path for responsive testing screenshots
+ */
+function getResponsiveScreenshotsPath() {
+    const basePath = process.cwd();
+    const screenshotsPath = (0, path_1.join)(basePath, ".cbrowser", "responsive");
+    if (!(0, fs_1.existsSync)(screenshotsPath)) {
+        (0, fs_1.mkdirSync)(screenshotsPath, { recursive: true });
+    }
+    return screenshotsPath;
+}
+/**
+ * Capture screenshot at a specific viewport
+ */
+async function captureAtViewport(url, viewport, options = {}) {
+    const startTime = Date.now();
+    const browser = new CBrowser({
+        viewportWidth: viewport.width,
+        viewportHeight: viewport.height,
+    });
+    try {
+        await browser.launch();
+        const page = await browser.getPage();
+        // Set mobile emulation if needed
+        if (viewport.isMobile || viewport.hasTouch) {
+            await page.emulateMedia({ reducedMotion: "reduce" });
+        }
+        await browser.navigate(url);
+        // Wait if specified
+        if (options.waitForSelector) {
+            await page.waitForSelector(options.waitForSelector, { timeout: 10000 }).catch(() => { });
+        }
+        if (options.waitBeforeCapture) {
+            await new Promise(resolve => setTimeout(resolve, options.waitBeforeCapture));
+        }
+        // Take screenshot
+        const screenshotsPath = getResponsiveScreenshotsPath();
+        const filename = `${viewport.name}-${Date.now()}.png`;
+        const screenshotPath = (0, path_1.join)(screenshotsPath, filename);
+        await page.screenshot({ path: screenshotPath, fullPage: false });
+        return {
+            viewport,
+            screenshotPath,
+            timestamp: new Date().toISOString(),
+            captureTime: Date.now() - startTime,
+        };
+    }
+    finally {
+        await browser.close();
+    }
+}
+/**
+ * Analyze responsive issues from comparisons
+ */
+function analyzeResponsiveIssues(comparisons, screenshots) {
+    const issues = [];
+    for (const comparison of comparisons) {
+        if (comparison.analysis.overallStatus !== "pass") {
+            const changes = comparison.analysis.changes || [];
+            for (const change of changes) {
+                let issueType = "other";
+                const desc = change.description.toLowerCase();
+                if (desc.includes("overflow") || desc.includes("scroll")) {
+                    issueType = "overflow";
+                }
+                else if (desc.includes("truncat") || desc.includes("cut off")) {
+                    issueType = "truncation";
+                }
+                else if (desc.includes("overlap")) {
+                    issueType = "overlap";
+                }
+                else if (desc.includes("hidden") || desc.includes("disappear")) {
+                    issueType = "hidden_content";
+                }
+                else if (desc.includes("text") && (desc.includes("small") || desc.includes("read"))) {
+                    issueType = "unreadable_text";
+                }
+                else if (desc.includes("layout") || desc.includes("break") || desc.includes("shift")) {
+                    issueType = "layout_break";
+                }
+                // Map VisualChange severity to ResponsiveIssue severity
+                const severityMap = {
+                    breaking: "critical",
+                    warning: "major",
+                    info: "minor",
+                    acceptable: "minor",
+                };
+                issues.push({
+                    type: issueType,
+                    severity: severityMap[change.severity] || "minor",
+                    description: change.description,
+                    affectedViewports: [comparison.viewportA.name, comparison.viewportB.name],
+                    breakpointRange: {
+                        min: Math.min(comparison.viewportA.width, comparison.viewportB.width),
+                        max: Math.max(comparison.viewportA.width, comparison.viewportB.width),
+                    },
+                });
+            }
+        }
+    }
+    return issues;
+}
+/**
+ * Run responsive visual test for a single URL
+ */
+async function runResponsiveTest(url, options = {}) {
+    const startTime = Date.now();
+    const viewports = resolveViewports(options.viewports);
+    console.log(`\n📱 Responsive Visual Test`);
+    console.log(`   URL: ${url}`);
+    console.log(`   Viewports: ${viewports.map(v => v.name).join(", ")}\n`);
+    // Capture screenshots at each viewport
+    const screenshots = [];
+    for (const viewport of viewports) {
+        console.log(`   📸 Capturing ${viewport.name} (${viewport.width}x${viewport.height})...`);
+        try {
+            const screenshot = await captureAtViewport(url, viewport, options);
+            screenshots.push(screenshot);
+            console.log(`      ✅ Captured in ${screenshot.captureTime}ms`);
+        }
+        catch (error) {
+            console.log(`      ❌ Failed: ${error instanceof Error ? error.message : "Unknown error"}`);
+        }
+    }
+    if (screenshots.length < 2) {
+        return {
+            url,
+            screenshots,
+            comparisons: [],
+            issues: [],
+            overallStatus: "major_issues",
+            summary: "Could not capture enough screenshots for comparison",
+            problematicViewports: [],
+            duration: Date.now() - startTime,
+            timestamp: new Date().toISOString(),
+        };
+    }
+    // Compare adjacent viewport sizes (small to large)
+    const sortedScreenshots = [...screenshots].sort((a, b) => a.viewport.width - b.viewport.width);
+    const comparisons = [];
+    let hasMinorIssues = false;
+    let hasMajorIssues = false;
+    const problematicViewports = new Set();
+    console.log(`\n   🔍 Comparing viewports...`);
+    for (let i = 0; i < sortedScreenshots.length - 1; i++) {
+        const a = sortedScreenshots[i];
+        const b = sortedScreenshots[i + 1];
+        console.log(`      ${a.viewport.name} → ${b.viewport.name}...`);
+        const analysis = await analyzeVisualDifferences(a.screenshotPath, b.screenshotPath, { sensitivity: options.sensitivity || "medium" });
+        comparisons.push({
+            viewportA: a.viewport,
+            viewportB: b.viewport,
+            analysis,
+            screenshots: {
+                a: a.screenshotPath,
+                b: b.screenshotPath,
+            },
+        });
+        if (analysis.overallStatus === "fail") {
+            hasMajorIssues = true;
+            problematicViewports.add(a.viewport.name);
+            problematicViewports.add(b.viewport.name);
+            console.log(`         ❌ Major issues (${(analysis.similarityScore * 100).toFixed(1)}%)`);
+        }
+        else if (analysis.overallStatus === "warning") {
+            hasMinorIssues = true;
+            console.log(`         ⚠️  Minor issues (${(analysis.similarityScore * 100).toFixed(1)}%)`);
+        }
+        else {
+            console.log(`         ✅ Responsive (${(analysis.similarityScore * 100).toFixed(1)}%)`);
+        }
+    }
+    // Analyze issues
+    const issues = analyzeResponsiveIssues(comparisons, screenshots);
+    const overallStatus = hasMajorIssues
+        ? "major_issues"
+        : hasMinorIssues
+            ? "minor_issues"
+            : "responsive";
+    const summary = overallStatus === "responsive"
+        ? "Page is fully responsive across all tested viewports"
+        : overallStatus === "minor_issues"
+            ? "Minor responsive issues detected"
+            : "Significant responsive issues detected";
+    return {
+        url,
+        screenshots,
+        comparisons,
+        issues,
+        overallStatus,
+        summary,
+        problematicViewports: Array.from(problematicViewports),
+        duration: Date.now() - startTime,
+        timestamp: new Date().toISOString(),
+    };
+}
+/**
+ * Run responsive test suite for multiple URLs
+ */
+async function runResponsiveSuite(suite) {
+    const startTime = Date.now();
+    const results = [];
+    console.log(`\n📱 Responsive Test Suite: ${suite.name}`);
+    console.log(`   Testing ${suite.urls.length} URLs\n`);
+    for (const url of suite.urls) {
+        const result = await runResponsiveTest(url, suite.options);
+        results.push(result);
+    }
+    // Aggregate common issues
+    const issueMap = new Map();
+    for (const result of results) {
+        for (const issue of result.issues) {
+            const key = `${issue.type}-${issue.description}`;
+            if (issueMap.has(key)) {
+                const existing = issueMap.get(key);
+                existing.affectedViewports = [...new Set([...existing.affectedViewports, ...issue.affectedViewports])];
+            }
+            else {
+                issueMap.set(key, { ...issue });
+            }
+        }
+    }
+    return {
+        suite,
+        results,
+        summary: {
+            total: results.length,
+            responsive: results.filter(r => r.overallStatus === "responsive").length,
+            minorIssues: results.filter(r => r.overallStatus === "minor_issues").length,
+            majorIssues: results.filter(r => r.overallStatus === "major_issues").length,
+            totalIssues: results.reduce((sum, r) => sum + r.issues.length, 0),
+        },
+        commonIssues: Array.from(issueMap.values()),
+        duration: Date.now() - startTime,
+        timestamp: new Date().toISOString(),
+    };
+}
+/**
+ * Format responsive test result as console report
+ */
+function formatResponsiveReport(result) {
+    const lines = [];
+    const duration = (result.duration / 1000).toFixed(2);
+    lines.push(`╔${"═".repeat(78)}╗`);
+    lines.push(`║${" ".repeat(20)}RESPONSIVE VISUAL TEST REPORT${" ".repeat(29)}║`);
+    lines.push(`╚${"═".repeat(78)}╝`);
+    lines.push("");
+    const statusIcon = result.overallStatus === "responsive" ? "✅" : result.overallStatus === "minor_issues" ? "⚠️" : "❌";
+    const statusText = result.overallStatus.toUpperCase().replace("_", " ");
+    lines.push(`${statusIcon} Status: ${statusText}`);
+    lines.push(`🔗 URL: ${result.url}`);
+    lines.push(`⏱️  Duration: ${duration}s`);
+    lines.push("");
+    lines.push("─".repeat(79));
+    lines.push("📸 VIEWPORT SCREENSHOTS");
+    lines.push("─".repeat(79));
+    for (const screenshot of result.screenshots) {
+        const v = screenshot.viewport;
+        lines.push(`   ${v.name.toUpperCase()} (${v.deviceType})`);
+        lines.push(`      Dimensions: ${v.width}x${v.height}`);
+        if (v.deviceName)
+            lines.push(`      Device: ${v.deviceName}`);
+        lines.push(`      Capture time: ${screenshot.captureTime}ms`);
+        lines.push(`      Path: ${screenshot.screenshotPath}`);
+        lines.push("");
+    }
+    lines.push("─".repeat(79));
+    lines.push("🔍 VIEWPORT COMPARISONS");
+    lines.push("─".repeat(79));
+    for (const comparison of result.comparisons) {
+        const icon = comparison.analysis.overallStatus === "pass" ? "✅" : comparison.analysis.overallStatus === "warning" ? "⚠️" : "❌";
+        lines.push(`   ${comparison.viewportA.name} → ${comparison.viewportB.name}: ${icon}`);
+        lines.push(`      Similarity: ${(comparison.analysis.similarityScore * 100).toFixed(1)}%`);
+        lines.push(`      ${comparison.analysis.summary}`);
+        lines.push("");
+    }
+    if (result.issues.length > 0) {
+        lines.push("─".repeat(79));
+        lines.push("⚠️  RESPONSIVE ISSUES DETECTED");
+        lines.push("─".repeat(79));
+        for (const issue of result.issues) {
+            const severityIcon = issue.severity === "critical" ? "🔴" : issue.severity === "major" ? "🟠" : "🟡";
+            lines.push(`   ${severityIcon} [${issue.type.toUpperCase()}] ${issue.description}`);
+            lines.push(`      Affected: ${issue.affectedViewports.join(", ")}`);
+            if (issue.breakpointRange) {
+                lines.push(`      Breakpoint range: ${issue.breakpointRange.min}px - ${issue.breakpointRange.max}px`);
+            }
+            lines.push("");
+        }
+    }
+    lines.push("─".repeat(79));
+    lines.push(`📝 SUMMARY: ${result.summary}`);
+    lines.push("─".repeat(79));
+    return lines.join("\n");
+}
+/**
+ * Generate HTML report for responsive test suite
+ */
+function generateResponsiveHtmlReport(suiteResult) {
+    const { suite, results, summary, duration } = suiteResult;
+    return `<!DOCTYPE html>
+<html>
+<head>
+  <title>Responsive Test Report - ${suite.name}</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0f172a; color: #e2e8f0; line-height: 1.6; }
+    .container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
+    header { text-align: center; margin-bottom: 2rem; }
+    h1 { font-size: 2rem; margin-bottom: 0.5rem; background: linear-gradient(135deg, #8b5cf6, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+    .subtitle { color: #94a3b8; }
+    .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
+    .summary-card { background: #1e293b; border-radius: 0.5rem; padding: 1.5rem; text-align: center; }
+    .summary-value { font-size: 2rem; font-weight: bold; }
+    .summary-label { color: #94a3b8; font-size: 0.875rem; }
+    .responsive { color: #22c55e; }
+    .minor { color: #f59e0b; }
+    .major { color: #ef4444; }
+    .result-card { background: #1e293b; border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 1rem; }
+    .result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
+    .badge { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
+    .badge-responsive { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
+    .badge-minor { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
+    .badge-major { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
+    .viewport-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.5rem; margin-top: 1rem; }
+    .viewport-item { background: #0f172a; padding: 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; }
+    .viewport-name { font-weight: 600; color: #8b5cf6; }
+    .issue { background: #0f172a; padding: 0.75rem; border-radius: 0.375rem; margin-top: 0.5rem; border-left: 3px solid; }
+    .issue-critical { border-color: #ef4444; }
+    .issue-major { border-color: #f59e0b; }
+    .issue-minor { border-color: #22c55e; }
+    footer { text-align: center; color: #64748b; padding: 2rem 0; font-size: 0.875rem; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>📱 Responsive Test Report</h1>
+      <p class="subtitle">${suite.name}</p>
+    </header>
+
+    <div class="summary-grid">
+      <div class="summary-card">
+        <div class="summary-value">${summary.total}</div>
+        <div class="summary-label">Total URLs</div>
+      </div>
+      <div class="summary-card">
+        <div class="summary-value responsive">${summary.responsive}</div>
+        <div class="summary-label">Fully Responsive</div>
+      </div>
+      <div class="summary-card">
+        <div class="summary-value minor">${summary.minorIssues}</div>
+        <div class="summary-label">Minor Issues</div>
+      </div>
+      <div class="summary-card">
+        <div class="summary-value major">${summary.majorIssues}</div>
+        <div class="summary-label">Major Issues</div>
+      </div>
+      <div class="summary-card">
+        <div class="summary-value">${summary.totalIssues}</div>
+        <div class="summary-label">Total Issues</div>
+      </div>
+    </div>
+
+    <div class="results">
+      ${results.map(result => {
+        const badgeClass = result.overallStatus === "responsive" ? "badge-responsive" : result.overallStatus === "minor_issues" ? "badge-minor" : "badge-major";
+        return `
+          <div class="result-card">
+            <div class="result-header">
+              <div>
+                <strong>${result.url}</strong>
+                <p style="color: #94a3b8; font-size: 0.875rem;">${result.summary}</p>
+              </div>
+              <span class="badge ${badgeClass}">${result.overallStatus.replace("_", " ").toUpperCase()}</span>
+            </div>
+            <div class="viewport-grid">
+              ${result.screenshots.map(s => `
+                <div class="viewport-item">
+                  <span class="viewport-name">${s.viewport.name}</span>
+                  <span style="color: #94a3b8;"> ${s.viewport.width}×${s.viewport.height}</span>
+                </div>
+              `).join("")}
+            </div>
+            ${result.issues.length > 0 ? `
+              <div style="margin-top: 1rem;">
+                <strong style="color: #f59e0b;">Issues:</strong>
+                ${result.issues.map(issue => `
+                  <div class="issue issue-${issue.severity}">
+                    <strong>[${issue.type.toUpperCase()}]</strong> ${issue.description}
+                    <br><span style="color: #94a3b8; font-size: 0.75rem;">Affected: ${issue.affectedViewports.join(", ")}</span>
+                  </div>
+                `).join("")}
+              </div>
+            ` : ""}
+          </div>
+        `;
+    }).join("")}
+    </div>
+
+    <footer>
+      Generated by CBrowser v7.2.0 | Test completed in ${(duration / 1000).toFixed(1)}s
+    </footer>
+  </div>
+</body>
+</html>`;
+}
+/**
+ * List available viewport presets
+ */
+function listViewportPresets() {
+    return types_js_1.VIEWPORT_PRESETS;
+}
+// ============================================================================
+// A/B Visual Comparison (v7.3.0)
+// ============================================================================
+/**
+ * Get the path for A/B comparison screenshots
+ */
+function getABScreenshotsPath() {
+    const basePath = process.cwd();
+    const screenshotsPath = (0, path_1.join)(basePath, ".cbrowser", "ab-comparison");
+    if (!(0, fs_1.existsSync)(screenshotsPath)) {
+        (0, fs_1.mkdirSync)(screenshotsPath, { recursive: true });
+    }
+    return screenshotsPath;
+}
+/**
+ * Capture screenshot for A/B comparison
+ */
+async function captureForAB(url, label, options = {}) {
+    const startTime = Date.now();
+    const browser = new CBrowser({
+        viewportWidth: options.viewport?.width || 1920,
+        viewportHeight: options.viewport?.height || 1080,
+    });
+    try {
+        await browser.launch();
+        await browser.navigate(url);
+        const page = await browser.getPage();
+        // Wait if specified
+        if (options.waitForSelector) {
+            await page.waitForSelector(options.waitForSelector, { timeout: 10000 }).catch(() => { });
+        }
+        if (options.waitBeforeCapture) {
+            await new Promise(resolve => setTimeout(resolve, options.waitBeforeCapture));
+        }
+        // Get page title
+        const title = await page.title();
+        // Take screenshot
+        const screenshotsPath = getABScreenshotsPath();
+        const filename = `${label.toLowerCase()}-${Date.now()}.png`;
+        const screenshotPath = (0, path_1.join)(screenshotsPath, filename);
+        const viewport = page.viewportSize() || { width: 1920, height: 1080 };
+        await page.screenshot({ path: screenshotPath, fullPage: false });
+        return {
+            label,
+            url,
+            screenshotPath,
+            title,
+            viewport,
+            timestamp: new Date().toISOString(),
+            captureTime: Date.now() - startTime,
+        };
+    }
+    finally {
+        await browser.close();
+    }
+}
+/**
+ * Analyze differences between A and B for detailed reporting
+ */
+function analyzeABDifferences(analysis) {
+    const differences = [];
+    for (const change of analysis.changes || []) {
+        // Map VisualChange to ABDifference
+        const severityMap = {
+            breaking: "critical",
+            warning: "major",
+            info: "minor",
+            acceptable: "info",
+        };
+        const typeMap = {
+            layout: "layout",
+            content: "content",
+            style: "style",
+            missing: "missing",
+            added: "added",
+            moved: "structure",
+        };
+        differences.push({
+            type: typeMap[change.type] || "content",
+            severity: severityMap[change.severity] || "minor",
+            description: change.description,
+            affectedSide: "both", // AI analysis doesn't specify which side
+            region: change.region,
+        });
+    }
+    return differences;
+}
+/**
+ * Run A/B visual comparison between two URLs
+ */
+async function runABComparison(urlA, urlB, options = {}) {
+    const startTime = Date.now();
+    const labels = options.labels || { a: "Version A", b: "Version B" };
+    console.log(`\n🔀 A/B Visual Comparison`);
+    console.log(`   A: ${urlA}`);
+    console.log(`   B: ${urlB}\n`);
+    // Capture both screenshots
+    console.log(`   📸 Capturing ${labels.a}...`);
+    const screenshotA = await captureForAB(urlA, "A", options);
+    console.log(`      ✅ Captured in ${screenshotA.captureTime}ms`);
+    console.log(`   📸 Capturing ${labels.b}...`);
+    const screenshotB = await captureForAB(urlB, "B", options);
+    console.log(`      ✅ Captured in ${screenshotB.captureTime}ms`);
+    // Compare using AI analysis
+    console.log(`\n   🔍 Comparing...`);
+    const analysis = await analyzeVisualDifferences(screenshotA.screenshotPath, screenshotB.screenshotPath, { sensitivity: options.sensitivity || "medium" });
+    // Determine overall status based on similarity
+    let overallStatus;
+    if (analysis.similarityScore >= 0.95) {
+        overallStatus = "identical";
+        console.log(`      ✅ Identical (${(analysis.similarityScore * 100).toFixed(1)}%)`);
+    }
+    else if (analysis.similarityScore >= 0.80) {
+        overallStatus = "similar";
+        console.log(`      ⚠️  Similar (${(analysis.similarityScore * 100).toFixed(1)}%)`);
+    }
+    else if (analysis.similarityScore >= 0.50) {
+        overallStatus = "different";
+        console.log(`      🟠 Different (${(analysis.similarityScore * 100).toFixed(1)}%)`);
+    }
+    else {
+        overallStatus = "very_different";
+        console.log(`      ❌ Very Different (${(analysis.similarityScore * 100).toFixed(1)}%)`);
+    }
+    // Analyze differences
+    const differences = analyzeABDifferences(analysis);
+    // Generate summary
+    const summaryMap = {
+        identical: "Pages are visually identical",
+        similar: "Pages are similar with minor differences",
+        different: "Pages have significant visual differences",
+        very_different: "Pages are very different - likely different designs",
+    };
+    return {
+        urlA,
+        urlB,
+        labels,
+        screenshots: {
+            a: screenshotA,
+            b: screenshotB,
+        },
+        analysis,
+        differences,
+        overallStatus,
+        summary: summaryMap[overallStatus],
+        duration: Date.now() - startTime,
+        timestamp: new Date().toISOString(),
+    };
+}
+/**
+ * Run A/B comparison suite for multiple page pairs
+ */
+async function runABSuite(suite) {
+    const startTime = Date.now();
+    const results = [];
+    console.log(`\n🔀 A/B Comparison Suite: ${suite.name}`);
+    console.log(`   Testing ${suite.pairs.length} page pairs\n`);
+    for (const pair of suite.pairs) {
+        const pairOptions = {
+            ...suite.options,
+            labels: pair.name ? { a: `${pair.name} (A)`, b: `${pair.name} (B)` } : suite.options?.labels,
+        };
+        const result = await runABComparison(pair.urlA, pair.urlB, pairOptions);
+        results.push(result);
+    }
+    return {
+        suite,
+        results,
+        summary: {
+            total: results.length,
+            identical: results.filter(r => r.overallStatus === "identical").length,
+            similar: results.filter(r => r.overallStatus === "similar").length,
+            different: results.filter(r => r.overallStatus === "different").length,
+            veryDifferent: results.filter(r => r.overallStatus === "very_different").length,
+        },
+        duration: Date.now() - startTime,
+        timestamp: new Date().toISOString(),
+    };
+}
+/**
+ * Format A/B comparison result as console report
+ */
+function formatABReport(result) {
+    const lines = [];
+    const duration = (result.duration / 1000).toFixed(2);
+    lines.push(`╔${"═".repeat(78)}╗`);
+    lines.push(`║${" ".repeat(22)}A/B VISUAL COMPARISON REPORT${" ".repeat(28)}║`);
+    lines.push(`╚${"═".repeat(78)}╝`);
+    lines.push("");
+    const statusIcons = {
+        identical: "✅",
+        similar: "⚠️",
+        different: "🟠",
+        very_different: "❌",
+    };
+    const statusIcon = statusIcons[result.overallStatus];
+    const statusText = result.overallStatus.toUpperCase().replace("_", " ");
+    lines.push(`${statusIcon} Status: ${statusText}`);
+    lines.push(`📊 Similarity: ${(result.analysis.similarityScore * 100).toFixed(1)}%`);
+    lines.push(`⏱️  Duration: ${duration}s`);
+    lines.push("");
+    lines.push("─".repeat(79));
+    lines.push("📸 SCREENSHOTS");
+    lines.push("─".repeat(79));
+    lines.push(`   ${result.labels.a.toUpperCase()} (A)`);
+    lines.push(`      URL: ${result.screenshots.a.url}`);
+    lines.push(`      Title: ${result.screenshots.a.title}`);
+    lines.push(`      Capture time: ${result.screenshots.a.captureTime}ms`);
+    lines.push(`      Path: ${result.screenshots.a.screenshotPath}`);
+    lines.push("");
+    lines.push(`   ${result.labels.b.toUpperCase()} (B)`);
+    lines.push(`      URL: ${result.screenshots.b.url}`);
+    lines.push(`      Title: ${result.screenshots.b.title}`);
+    lines.push(`      Capture time: ${result.screenshots.b.captureTime}ms`);
+    lines.push(`      Path: ${result.screenshots.b.screenshotPath}`);
+    lines.push("");
+    if (result.differences.length > 0) {
+        lines.push("─".repeat(79));
+        lines.push("🔍 DIFFERENCES DETECTED");
+        lines.push("─".repeat(79));
+        for (const diff of result.differences) {
+            const severityIcons = { critical: "🔴", major: "🟠", minor: "🟡", info: "🔵" };
+            const icon = severityIcons[diff.severity];
+            lines.push(`   ${icon} [${diff.type.toUpperCase()}] ${diff.description}`);
+        }
+        lines.push("");
+    }
+    lines.push("─".repeat(79));
+    lines.push(`📝 SUMMARY: ${result.summary}`);
+    lines.push("─".repeat(79));
+    return lines.join("\n");
+}
+/**
+ * Generate HTML report for A/B comparison suite
+ */
+function generateABHtmlReport(suiteResult) {
+    const { suite, results, summary, duration } = suiteResult;
+    return `<!DOCTYPE html>
+<html>
+<head>
+  <title>A/B Comparison Report - ${suite.name}</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0f172a; color: #e2e8f0; line-height: 1.6; }
+    .container { max-width: 1400px; margin: 0 auto; padding: 2rem; }
+    header { text-align: center; margin-bottom: 2rem; }
+    h1 { font-size: 2rem; margin-bottom: 0.5rem; background: linear-gradient(135deg, #f59e0b, #ef4444); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+    .subtitle { color: #94a3b8; }
+    .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
+    .summary-card { background: #1e293b; border-radius: 0.5rem; padding: 1.5rem; text-align: center; }
+    .summary-value { font-size: 2rem; font-weight: bold; }
+    .summary-label { color: #94a3b8; font-size: 0.875rem; }
+    .identical { color: #22c55e; }
+    .similar { color: #f59e0b; }
+    .different { color: #f97316; }
+    .very-different { color: #ef4444; }
+    .result-card { background: #1e293b; border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 1rem; }
+    .result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
+    .badge { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
+    .badge-identical { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
+    .badge-similar { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
+    .badge-different { background: rgba(249, 115, 22, 0.2); color: #f97316; }
+    .badge-very-different { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
+    .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
+    .side { background: #0f172a; padding: 1rem; border-radius: 0.375rem; }
+    .side-label { font-weight: 600; color: #f59e0b; margin-bottom: 0.5rem; }
+    .url { color: #94a3b8; font-size: 0.875rem; word-break: break-all; }
+    .diff-list { margin-top: 1rem; }
+    .diff-item { background: #0f172a; padding: 0.5rem 0.75rem; border-radius: 0.375rem; margin-top: 0.5rem; border-left: 3px solid; }
+    .diff-critical { border-color: #ef4444; }
+    .diff-major { border-color: #f97316; }
+    .diff-minor { border-color: #f59e0b; }
+    .diff-info { border-color: #3b82f6; }
+    footer { text-align: center; color: #64748b; padding: 2rem 0; font-size: 0.875rem; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>🔀 A/B Comparison Report</h1>
+      <p class="subtitle">${suite.name}</p>
+    </header>
+
+    <div class="summary-grid">
+      <div class="summary-card">
+        <div class="summary-value">${summary.total}</div>
+        <div class="summary-label">Total Pairs</div>
+      </div>
+      <div class="summary-card">
+        <div class="summary-value identical">${summary.identical}</div>
+        <div class="summary-label">Identical</div>
+      </div>
+      <div class="summary-card">
+        <div class="summary-value similar">${summary.similar}</div>
+        <div class="summary-label">Similar</div>
+      </div>
+      <div class="summary-card">
+        <div class="summary-value different">${summary.different}</div>
+        <div class="summary-label">Different</div>
+      </div>
+      <div class="summary-card">
+        <div class="summary-value very-different">${summary.veryDifferent}</div>
+        <div class="summary-label">Very Different</div>
+      </div>
+    </div>
+
+    <div class="results">
+      ${results.map(result => {
+        const badgeClass = `badge-${result.overallStatus.replace("_", "-")}`;
+        return `
+          <div class="result-card">
+            <div class="result-header">
+              <div>
+                <strong>${result.summary}</strong>
+                <p style="color: #94a3b8; font-size: 0.875rem;">Similarity: ${(result.analysis.similarityScore * 100).toFixed(1)}%</p>
+              </div>
+              <span class="badge ${badgeClass}">${result.overallStatus.replace("_", " ").toUpperCase()}</span>
+            </div>
+            <div class="comparison-grid">
+              <div class="side">
+                <div class="side-label">${result.labels.a}</div>
+                <div class="url">${result.urlA}</div>
+                <div style="margin-top: 0.5rem; color: #64748b; font-size: 0.75rem;">Title: ${result.screenshots.a.title}</div>
+              </div>
+              <div class="side">
+                <div class="side-label">${result.labels.b}</div>
+                <div class="url">${result.urlB}</div>
+                <div style="margin-top: 0.5rem; color: #64748b; font-size: 0.75rem;">Title: ${result.screenshots.b.title}</div>
+              </div>
+            </div>
+            ${result.differences.length > 0 ? `
+              <div class="diff-list">
+                <strong style="color: #f59e0b;">Differences:</strong>
+                ${result.differences.slice(0, 5).map(diff => `
+                  <div class="diff-item diff-${diff.severity}">
+                    <strong>[${diff.type.toUpperCase()}]</strong> ${diff.description}
+                  </div>
+                `).join("")}
+                ${result.differences.length > 5 ? `<div style="color: #94a3b8; margin-top: 0.5rem;">...and ${result.differences.length - 5} more</div>` : ""}
+              </div>
+            ` : ""}
+          </div>
+        `;
+    }).join("")}
+    </div>
+
+    <footer>
+      Generated by CBrowser v7.3.0 | Test completed in ${(duration / 1000).toFixed(1)}s
     </footer>
   </div>
 </body>