cbrowser 7.1.1 → 7.3.0

package/dist/cli.js

@@ -14,7 +14,7 @@ const daemon_js_1 = require("./daemon.js");
 function showHelp() {
     console.log(`
 ╔══════════════════════════════════════════════════════════════════════════════╗
-║                           CBrowser CLI v7.1.1                                ║
+║                           CBrowser CLI v7.3.0                                ║
 ║    AI-powered browser automation with cross-browser visual testing          ║
 ╚══════════════════════════════════════════════════════════════════════════════╝
 
@@ -232,7 +232,7 @@ AI VISUAL REGRESSION (v7.0.0)
   ai-visual show <name>       Show baseline details
   ai-visual delete <name>     Delete a baseline
 
-CROSS-BROWSER VISUAL TESTING (v7.1.1)
+CROSS-BROWSER VISUAL TESTING (v7.3.0)
   cross-browser <url>         Compare visual rendering across browsers
     --browsers <list>         Browsers to test: chromium,firefox,webkit (default: all)
     --width <n>               Viewport width (default: 1920)
@@ -258,6 +258,68 @@ CROSS-BROWSER VISUAL TESTING (v7.1.1)
       "options": { "browsers": ["chromium", "firefox"] }
     }
 
+RESPONSIVE VISUAL TESTING (v7.3.0)
+  responsive <url>            Test visual rendering across viewport sizes
+    --viewports <list>        Viewports to test (default: mobile,tablet,desktop)
+    --wait <ms>               Wait before screenshot (ms)
+    --wait-for <selector>     Wait for selector before screenshot
+    --sensitivity <level>     Comparison sensitivity: low, medium, high
+    --html                    Generate HTML report
+    --output <file>           Save JSON report to file
+    Examples:
+      cbrowser responsive "https://example.com"
+      cbrowser responsive "https://example.com" --viewports mobile,tablet,desktop-lg
+      cbrowser responsive "https://example.com" --html --output report.html
+
+  responsive suite <file.json>  Run responsive test suite
+    --html                    Generate HTML report
+    --output <file>           Save JSON report to file
+
+  responsive viewports        List available viewport presets
+
+    Suite file format:
+    {
+      "name": "My Site Responsive",
+      "urls": ["https://example.com", "https://example.com/about"],
+      "options": { "viewports": ["mobile", "tablet", "desktop"] }
+    }
+
+    Available viewport presets:
+      mobile-sm (320x568)     mobile (375x667)      mobile-lg (414x896)
+      mobile-xl (428x926)     tablet (768x1024)     tablet-lg (1024x1366)
+      desktop-sm (1280x800)   desktop (1440x900)    desktop-lg (1920x1080)
+      desktop-xl (2560x1440)
+
+A/B VISUAL COMPARISON (v7.3.0)
+  ab <urlA> <urlB>            Compare two URLs visually
+    --label-a <name>          Label for URL A (default: "Version A")
+    --label-b <name>          Label for URL B (default: "Version B")
+    --width <n>               Viewport width (default: 1920)
+    --height <n>              Viewport height (default: 1080)
+    --wait <ms>               Wait before screenshot (ms)
+    --wait-for <selector>     Wait for selector before screenshot
+    --sensitivity <level>     Comparison sensitivity: low, medium, high
+    --html                    Generate HTML report
+    --output <file>           Save JSON report to file
+    Examples:
+      cbrowser ab "https://staging.example.com" "https://example.com"
+      cbrowser ab "https://old.site.com" "https://new.site.com" --label-a "Old Design" --label-b "New Design"
+      cbrowser ab "https://site-a.com" "https://site-b.com" --html --output comparison.html
+
+  ab suite <file.json>        Run A/B comparison suite
+    --html                    Generate HTML report
+    --output <file>           Save JSON report to file
+
+    Suite file format:
+    {
+      "name": "Staging vs Production",
+      "pairs": [
+        { "urlA": "https://staging.example.com", "urlB": "https://example.com", "name": "Homepage" },
+        { "urlA": "https://staging.example.com/about", "urlB": "https://example.com/about", "name": "About" }
+      ],
+      "options": { "sensitivity": "medium" }
+    }
+
 ACCESSIBILITY (v2.5.0)
   a11y audit                  Run WCAG accessibility audit
     --url <url>               Navigate to URL first
@@ -2142,7 +2204,7 @@ async function main() {
                 break;
             }
             // =========================================================================
-            // Cross-Browser Visual Testing (v7.1.1)
+            // Cross-Browser Visual Testing (v7.3.0)
             // =========================================================================
             case "cross-browser": {
                 const subcommand = args[0];
@@ -2244,6 +2306,237 @@ async function main() {
                 break;
             }
             // =========================================================================
+            // Responsive Visual Testing (v7.3.0)
+            // =========================================================================
+            case "responsive": {
+                const subcommand = args[0];
+                if (subcommand === "viewports") {
+                    // List viewport presets
+                    const presets = (0, browser_js_1.listViewportPresets)();
+                    console.log("\n📱 Available Viewport Presets\n");
+                    console.log("─".repeat(60));
+                    const byType = {
+                        mobile: [],
+                        tablet: [],
+                        desktop: [],
+                    };
+                    for (const preset of presets) {
+                        byType[preset.deviceType].push(preset);
+                    }
+                    for (const [type, typePresets] of Object.entries(byType)) {
+                        console.log(`\n${type.toUpperCase()}:`);
+                        for (const p of typePresets) {
+                            const touch = p.hasTouch ? " (touch)" : "";
+                            const device = p.deviceName ? ` - ${p.deviceName}` : "";
+                            console.log(`   ${p.name.padEnd(15)} ${p.width}x${p.height}${touch}${device}`);
+                        }
+                    }
+                    console.log("");
+                }
+                else if (subcommand === "suite") {
+                    // Responsive suite
+                    const suiteFile = args[1];
+                    if (!suiteFile) {
+                        console.error("Usage: cbrowser responsive suite <file.json> [options]");
+                        console.error("  --html              Generate HTML report");
+                        console.error("  --output <file>     Save report to file");
+                        process.exit(1);
+                    }
+                    const fs = await import("fs");
+                    if (!fs.existsSync(suiteFile)) {
+                        console.error(`Suite file not found: ${suiteFile}`);
+                        process.exit(1);
+                    }
+                    const suite = JSON.parse(fs.readFileSync(suiteFile, "utf-8"));
+                    const result = await (0, browser_js_1.runResponsiveSuite)(suite);
+                    // Save outputs
+                    if (options.output && !options.html) {
+                        fs.writeFileSync(options.output, JSON.stringify(result, null, 2));
+                        console.log(`\n📄 JSON report saved to: ${options.output}`);
+                    }
+                    if (options.html) {
+                        const htmlReport = (0, browser_js_1.generateResponsiveHtmlReport)(result);
+                        const outputPath = options.output || `responsive-${Date.now()}.html`;
+                        fs.writeFileSync(outputPath, htmlReport);
+                        console.log(`\n📄 HTML report saved to: ${outputPath}`);
+                    }
+                    // Summary
+                    console.log(`\n${"═".repeat(60)}`);
+                    console.log(`   Results: ${result.summary.responsive} responsive, ${result.summary.minorIssues} minor, ${result.summary.majorIssues} major`);
+                    console.log(`   Total issues: ${result.summary.totalIssues}`);
+                    console.log(`${"═".repeat(60)}\n`);
+                    if (result.summary.majorIssues > 0) {
+                        process.exit(1);
+                    }
+                }
+                else {
+                    // Single URL test
+                    const url = subcommand; // First arg is the URL
+                    if (!url || url.startsWith("--")) {
+                        console.error("Usage: cbrowser responsive <url> [options]");
+                        console.error("       cbrowser responsive suite <file.json>");
+                        console.error("       cbrowser responsive viewports");
+                        console.error("\nOptions:");
+                        console.error("  --viewports <list>  mobile,tablet,desktop (default: mobile,tablet,desktop)");
+                        console.error("  --wait <ms>         Wait before screenshot");
+                        console.error("  --wait-for <sel>    Wait for selector");
+                        console.error("  --sensitivity <l>   low, medium, high");
+                        console.error("  --html              Generate HTML report");
+                        console.error("  --output <file>     Save report");
+                        console.error("\nViewport presets: mobile-sm, mobile, mobile-lg, mobile-xl,");
+                        console.error("                  tablet, tablet-lg, desktop-sm, desktop,");
+                        console.error("                  desktop-lg, desktop-xl");
+                        process.exit(1);
+                    }
+                    const viewports = options.viewports
+                        ? options.viewports.split(",")
+                        : undefined;
+                    const result = await (0, browser_js_1.runResponsiveTest)(url, {
+                        viewports,
+                        waitBeforeCapture: options.wait ? parseInt(options.wait) : undefined,
+                        waitForSelector: options["wait-for"],
+                        sensitivity: options.sensitivity,
+                    });
+                    // Print report
+                    console.log("\n" + (0, browser_js_1.formatResponsiveReport)(result));
+                    // Save outputs
+                    const fs = await import("fs");
+                    if (options.output && !options.html) {
+                        fs.writeFileSync(options.output, JSON.stringify(result, null, 2));
+                        console.log(`\n📄 JSON report saved to: ${options.output}`);
+                    }
+                    if (options.html) {
+                        const suiteResult = {
+                            suite: { name: "Single URL Test", urls: [url] },
+                            results: [result],
+                            summary: {
+                                total: 1,
+                                responsive: result.overallStatus === "responsive" ? 1 : 0,
+                                minorIssues: result.overallStatus === "minor_issues" ? 1 : 0,
+                                majorIssues: result.overallStatus === "major_issues" ? 1 : 0,
+                                totalIssues: result.issues.length,
+                            },
+                            commonIssues: result.issues,
+                            duration: result.duration,
+                            timestamp: result.timestamp,
+                        };
+                        const htmlReport = (0, browser_js_1.generateResponsiveHtmlReport)(suiteResult);
+                        const outputPath = options.output || `responsive-${Date.now()}.html`;
+                        fs.writeFileSync(outputPath, htmlReport);
+                        console.log(`\n📄 HTML report saved to: ${outputPath}`);
+                    }
+                    if (result.overallStatus === "major_issues") {
+                        process.exit(1);
+                    }
+                }
+                break;
+            }
+            // =========================================================================
+            // A/B Visual Comparison (v7.3.0)
+            // =========================================================================
+            case "ab": {
+                const subcommand = args[0];
+                if (subcommand === "suite") {
+                    // A/B suite
+                    const suiteFile = args[1];
+                    if (!suiteFile) {
+                        console.error("Usage: cbrowser ab suite <file.json> [options]");
+                        console.error("  --html              Generate HTML report");
+                        console.error("  --output <file>     Save report to file");
+                        process.exit(1);
+                    }
+                    const fs = await import("fs");
+                    if (!fs.existsSync(suiteFile)) {
+                        console.error(`Suite file not found: ${suiteFile}`);
+                        process.exit(1);
+                    }
+                    const suite = JSON.parse(fs.readFileSync(suiteFile, "utf-8"));
+                    const result = await (0, browser_js_1.runABSuite)(suite);
+                    // Save outputs
+                    if (options.output && !options.html) {
+                        fs.writeFileSync(options.output, JSON.stringify(result, null, 2));
+                        console.log(`\n📄 JSON report saved to: ${options.output}`);
+                    }
+                    if (options.html) {
+                        const htmlReport = (0, browser_js_1.generateABHtmlReport)(result);
+                        const outputPath = options.output || `ab-comparison-${Date.now()}.html`;
+                        fs.writeFileSync(outputPath, htmlReport);
+                        console.log(`\n📄 HTML report saved to: ${outputPath}`);
+                    }
+                    // Summary
+                    console.log(`\n${"═".repeat(60)}`);
+                    console.log(`   Results: ${result.summary.identical} identical, ${result.summary.similar} similar, ${result.summary.different} different, ${result.summary.veryDifferent} very different`);
+                    console.log(`${"═".repeat(60)}\n`);
+                    if (result.summary.veryDifferent > 0) {
+                        process.exit(1);
+                    }
+                }
+                else {
+                    // Single A/B comparison: ab <urlA> <urlB>
+                    const urlA = args[0];
+                    const urlB = args[1];
+                    if (!urlA || !urlB || urlA.startsWith("--") || urlB.startsWith("--")) {
+                        console.error("Usage: cbrowser ab <urlA> <urlB> [options]");
+                        console.error("       cbrowser ab suite <file.json>");
+                        console.error("\nOptions:");
+                        console.error("  --label-a <name>    Label for URL A (default: 'Version A')");
+                        console.error("  --label-b <name>    Label for URL B (default: 'Version B')");
+                        console.error("  --width <n>         Viewport width (default: 1920)");
+                        console.error("  --height <n>        Viewport height (default: 1080)");
+                        console.error("  --wait <ms>         Wait before screenshot");
+                        console.error("  --wait-for <sel>    Wait for selector");
+                        console.error("  --sensitivity <l>   low, medium, high");
+                        console.error("  --html              Generate HTML report");
+                        console.error("  --output <file>     Save report");
+                        process.exit(1);
+                    }
+                    const result = await (0, browser_js_1.runABComparison)(urlA, urlB, {
+                        labels: options["label-a"] || options["label-b"] ? {
+                            a: options["label-a"] || "Version A",
+                            b: options["label-b"] || "Version B",
+                        } : undefined,
+                        viewport: options.width || options.height ? {
+                            width: parseInt(options.width) || 1920,
+                            height: parseInt(options.height) || 1080,
+                        } : undefined,
+                        waitBeforeCapture: options.wait ? parseInt(options.wait) : undefined,
+                        waitForSelector: options["wait-for"],
+                        sensitivity: options.sensitivity,
+                    });
+                    // Print report
+                    console.log("\n" + (0, browser_js_1.formatABReport)(result));
+                    // Save outputs
+                    const fs = await import("fs");
+                    if (options.output && !options.html) {
+                        fs.writeFileSync(options.output, JSON.stringify(result, null, 2));
+                        console.log(`\n📄 JSON report saved to: ${options.output}`);
+                    }
+                    if (options.html) {
+                        const suiteResult = {
+                            suite: { name: "Single Comparison", pairs: [{ urlA, urlB }] },
+                            results: [result],
+                            summary: {
+                                total: 1,
+                                identical: result.overallStatus === "identical" ? 1 : 0,
+                                similar: result.overallStatus === "similar" ? 1 : 0,
+                                different: result.overallStatus === "different" ? 1 : 0,
+                                veryDifferent: result.overallStatus === "very_different" ? 1 : 0,
+                            },
+                            duration: result.duration,
+                            timestamp: result.timestamp,
+                        };
+                        const htmlReport = (0, browser_js_1.generateABHtmlReport)(suiteResult);
+                        const outputPath = options.output || `ab-comparison-${Date.now()}.html`;
+                        fs.writeFileSync(outputPath, htmlReport);
+                        console.log(`\n📄 HTML report saved to: ${outputPath}`);
+                    }
+                    if (result.overallStatus === "very_different") {
+                        process.exit(1);
+                    }
+                }
+                break;
+            }
+            // =========================================================================
             // Accessibility (Tier 2)
             // =========================================================================
             case "a11y": {