cbrowser 6.4.0 → 7.0.0

package/dist/cli.js

@@ -14,8 +14,8 @@ const daemon_js_1 = require("./daemon.js");
 function showHelp() {
     console.log(`
 ╔══════════════════════════════════════════════════════════════════════════════╗
-║                           CBrowser CLI v6.4.0                                ║
-║    AI-powered browser automation with performance regression detection       ║
+║                           CBrowser CLI v7.0.0                                ║
+║    AI-powered browser automation with AI visual regression testing          ║
 ╚══════════════════════════════════════════════════════════════════════════════╝
 
 NAVIGATION
@@ -99,6 +99,26 @@ FLAKY TEST DETECTION (v6.3.0)
       cbrowser flaky-check tests.txt --runs 10
       cbrowser flaky-check tests.txt --runs 5 --threshold 30 --output flaky-report.json
 
+TEST COVERAGE MAP (v6.5.0)
+  coverage <url>               Generate test coverage map for a site
+    --tests <glob>             Test files to analyze (default: tests/*.txt)
+    --sitemap <url>            Use sitemap.xml instead of crawling
+    --max-pages <n>            Max pages to crawl (default: 100)
+    --include <pattern>        Only include paths matching pattern
+    --exclude <pattern>        Exclude paths matching pattern
+    --min-coverage <n>         Min coverage % to not flag (default: 50)
+    --html                     Generate HTML report
+    --output <file>            Save JSON report to file
+    Examples:
+      cbrowser coverage "https://example.com" --tests "tests/*.txt"
+      cbrowser coverage "https://example.com" --sitemap "https://example.com/sitemap.xml"
+      cbrowser coverage "https://example.com" --html --output coverage.html
+      cbrowser coverage "https://example.com" --exclude "/admin" --min-coverage 70
+
+  coverage gaps <url>          Show only untested pages (quick analysis)
+    --tests <glob>             Test files to analyze
+    --sitemap <url>            Use sitemap.xml
+
 PERSONAS
   persona list                List all personas (built-in + custom)
   persona create "<desc>"     Create persona from natural language description
@@ -182,6 +202,36 @@ VISUAL REGRESSION (v2.5.0)
   visual list                 List all saved baselines
   visual delete <name>        Delete a baseline
 
+AI VISUAL REGRESSION (v7.0.0)
+  ai-visual capture <url>     Capture AI-analyzed visual baseline
+    --name <name>             Baseline name (required)
+    --selector <sel>          Capture specific element instead of viewport
+    --device <device>         Device emulation (iphone-15, pixel-7, etc.)
+    --width <n>               Viewport width (default: 1920)
+    --height <n>              Viewport height (default: 1080)
+    --wait <ms|selector>      Wait before capture (ms or CSS selector)
+    Examples:
+      cbrowser ai-visual capture "https://example.com" --name homepage
+      cbrowser ai-visual capture "https://example.com/dashboard" --name dashboard --device iphone-15
+
+  ai-visual test <url> <baseline>  Test current page against baseline using AI
+    --threshold <n>           Similarity threshold 0-1 (default: 0.9)
+    --sensitivity <level>     Detection sensitivity: low, medium, high (default: medium)
+    --html                    Generate HTML report
+    --output <file>           Save JSON report to file
+    Examples:
+      cbrowser ai-visual test "https://staging.example.com" homepage
+      cbrowser ai-visual test "https://staging.example.com" homepage --sensitivity high
+
+  ai-visual suite <file.json>  Run visual regression suite
+    --threshold <n>           Global similarity threshold (default: 0.9)
+    --html                    Generate HTML report
+    --output <file>           Save JSON report to file
+
+  ai-visual list              List all AI visual baselines
+  ai-visual show <name>       Show baseline details
+  ai-visual delete <name>     Delete a baseline
+
 ACCESSIBILITY (v2.5.0)
   a11y audit                  Run WCAG accessibility audit
     --url <url>               Navigate to URL first
@@ -1864,6 +1914,208 @@ async function main() {
                 break;
             }
             // =========================================================================
+            // AI Visual Regression (v7.0.0)
+            // =========================================================================
+            case "ai-visual": {
+                const subcommand = args[0];
+                switch (subcommand) {
+                    case "capture": {
+                        const url = args[1];
+                        if (!url || !options.name) {
+                            console.error("Usage: cbrowser ai-visual capture <url> --name <name> [options]");
+                            console.error("  --selector <sel>    Capture specific element");
+                            console.error("  --device <device>   Device emulation");
+                            console.error("  --width <n>         Viewport width");
+                            console.error("  --height <n>        Viewport height");
+                            console.error("  --wait <ms|sel>     Wait before capture");
+                            process.exit(1);
+                        }
+                        console.log(`📸 Capturing visual baseline: ${options.name}`);
+                        console.log(`   URL: ${url}`);
+                        const baseline = await (0, browser_js_1.captureVisualBaseline)(url, options.name, {
+                            selector: options.selector,
+                            device: options.device,
+                            viewport: options.width || options.height ? {
+                                width: parseInt(options.width) || 1920,
+                                height: parseInt(options.height) || 1080,
+                            } : undefined,
+                            waitFor: options.wait ? (/^\d+$/.test(options.wait)
+                                ? parseInt(options.wait)
+                                : options.wait) : undefined,
+                        });
+                        console.log(`\n✅ Baseline captured successfully!`);
+                        console.log(`   ID: ${baseline.id}`);
+                        console.log(`   Viewport: ${baseline.viewport.width}x${baseline.viewport.height}`);
+                        console.log(`   Screenshot: ${baseline.screenshotPath}`);
+                        break;
+                    }
+                    case "test": {
+                        const url = args[1];
+                        const baselineName = args[2];
+                        if (!url || !baselineName) {
+                            console.error("Usage: cbrowser ai-visual test <url> <baseline-name> [options]");
+                            console.error("  --threshold <n>     Similarity threshold 0-1 (default: 0.9)");
+                            console.error("  --sensitivity <l>   low, medium, high (default: medium)");
+                            console.error("  --html              Generate HTML report");
+                            console.error("  --output <file>     Save JSON report");
+                            process.exit(1);
+                        }
+                        console.log(`\n🔍 Running AI visual regression test...`);
+                        console.log(`   URL: ${url}`);
+                        console.log(`   Baseline: ${baselineName}\n`);
+                        const result = await (0, browser_js_1.runVisualRegression)(url, baselineName, {
+                            threshold: options.threshold ? parseFloat(options.threshold) : 0.9,
+                            sensitivity: options.sensitivity || "medium",
+                            generateDiff: true,
+                        });
+                        // Print report
+                        console.log((0, browser_js_1.formatVisualRegressionReport)(result));
+                        // Save JSON output if requested
+                        if (options.output && !options.html) {
+                            const fs = await import("fs");
+                            fs.writeFileSync(options.output, JSON.stringify(result, null, 2));
+                            console.log(`\n📄 JSON report saved to: ${options.output}`);
+                        }
+                        // Generate HTML report if requested
+                        if (options.html) {
+                            const fs = await import("fs");
+                            const suiteResult = {
+                                suite: {
+                                    name: baselineName,
+                                    pages: [{ name: baselineName, url, baselineName }],
+                                },
+                                results: [result],
+                                summary: {
+                                    total: 1,
+                                    passed: result.passed ? 1 : 0,
+                                    failed: result.passed ? 0 : 1,
+                                    warnings: result.analysis.overallStatus === "warning" ? 1 : 0,
+                                },
+                                duration: result.duration,
+                                timestamp: new Date().toISOString(),
+                            };
+                            const htmlReport = (0, browser_js_1.generateVisualRegressionHtmlReport)(suiteResult);
+                            const outputPath = options.output || `visual-regression-${baselineName}-${Date.now()}.html`;
+                            fs.writeFileSync(outputPath, htmlReport);
+                            console.log(`\n📄 HTML report saved to: ${outputPath}`);
+                        }
+                        if (!result.passed) {
+                            process.exit(1);
+                        }
+                        break;
+                    }
+                    case "suite": {
+                        const suiteFile = args[1];
+                        if (!suiteFile) {
+                            console.error("Usage: cbrowser ai-visual suite <file.json> [options]");
+                            console.error("  --threshold <n>     Global similarity threshold");
+                            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"));
+                        console.log(`\n🔍 Running visual regression suite: ${suite.name}`);
+                        const result = await (0, browser_js_1.runVisualRegressionSuite)(suite, {
+                            threshold: options.threshold ? parseFloat(options.threshold) : 0.9,
+                        });
+                        // Save outputs
+                        if (options.output && !options.html) {
+                            fs.writeFileSync(options.output, JSON.stringify(result, null, 2));
+                            console.log(`📄 JSON report saved to: ${options.output}`);
+                        }
+                        if (options.html) {
+                            const htmlReport = (0, browser_js_1.generateVisualRegressionHtmlReport)(result);
+                            const outputPath = options.output || `visual-suite-${Date.now()}.html`;
+                            fs.writeFileSync(outputPath, htmlReport);
+                            console.log(`📄 HTML report saved to: ${outputPath}`);
+                        }
+                        if (result.summary.failed > 0) {
+                            process.exit(1);
+                        }
+                        break;
+                    }
+                    case "list": {
+                        const baselines = (0, browser_js_1.listVisualBaselines)();
+                        if (baselines.length === 0) {
+                            console.log("\nNo AI visual baselines saved.\n");
+                            console.log("Capture one with:");
+                            console.log("  cbrowser ai-visual capture <url> --name <name>\n");
+                        }
+                        else {
+                            console.log("\n📸 AI Visual Baselines:\n");
+                            console.log("┌──────────────────────┬─────────────────────────────────┬────────────────────┬──────────────┐");
+                            console.log("│ Name                 │ URL                             │ Viewport           │ Created      │");
+                            console.log("├──────────────────────┼─────────────────────────────────┼────────────────────┼──────────────┤");
+                            for (const b of baselines) {
+                                const name = b.name.substring(0, 20).padEnd(20);
+                                const url = b.url.substring(0, 31).padEnd(31);
+                                const viewport = `${b.viewport.width}x${b.viewport.height}`.padEnd(18);
+                                const created = new Date(b.timestamp).toLocaleDateString().padEnd(12);
+                                console.log(`│ ${name} │ ${url} │ ${viewport} │ ${created} │`);
+                            }
+                            console.log("└──────────────────────┴─────────────────────────────────┴────────────────────┴──────────────┘\n");
+                        }
+                        break;
+                    }
+                    case "show": {
+                        const name = args[1];
+                        if (!name) {
+                            console.error("Usage: cbrowser ai-visual show <name>");
+                            process.exit(1);
+                        }
+                        const baseline = (0, browser_js_1.getVisualBaseline)(name);
+                        if (!baseline) {
+                            console.error(`Baseline not found: ${name}`);
+                            process.exit(1);
+                        }
+                        console.log("\n📸 AI Visual Baseline Details:\n");
+                        console.log(`  Name:       ${baseline.name}`);
+                        console.log(`  ID:         ${baseline.id}`);
+                        console.log(`  URL:        ${baseline.url}`);
+                        console.log(`  Viewport:   ${baseline.viewport.width}x${baseline.viewport.height}`);
+                        if (baseline.device) {
+                            console.log(`  Device:     ${baseline.device}`);
+                        }
+                        if (baseline.selector) {
+                            console.log(`  Selector:   ${baseline.selector}`);
+                        }
+                        console.log(`  Created:    ${baseline.timestamp}`);
+                        console.log(`  Screenshot: ${baseline.screenshotPath}`);
+                        console.log("");
+                        break;
+                    }
+                    case "delete": {
+                        const name = args[1];
+                        if (!name) {
+                            console.error("Usage: cbrowser ai-visual delete <name>");
+                            process.exit(1);
+                        }
+                        if ((0, browser_js_1.deleteVisualBaseline)(name)) {
+                            console.log(`✅ Baseline deleted: ${name}`);
+                        }
+                        else {
+                            console.error(`Baseline not found: ${name}`);
+                            process.exit(1);
+                        }
+                        break;
+                    }
+                    default:
+                        console.error("Usage: cbrowser ai-visual [capture|test|suite|list|show|delete]");
+                        console.error("       cbrowser ai-visual capture <url> --name <name>");
+                        console.error("       cbrowser ai-visual test <url> <baseline>");
+                        console.error("       cbrowser ai-visual suite <file.json>");
+                        console.error("       cbrowser ai-visual list");
+                        console.error("       cbrowser ai-visual show <name>");
+                        console.error("       cbrowser ai-visual delete <name>");
+                }
+                break;
+            }
+            // =========================================================================
             // Accessibility (Tier 2)
             // =========================================================================
             case "a11y": {
@@ -2843,6 +3095,127 @@ async function main() {
                 }
                 break;
             }
+            // =========================================================================
+            // Test Coverage Map (Tier 6 - v6.5.0)
+            // =========================================================================
+            case "coverage": {
+                const fs = await import("fs");
+                const path = await import("path");
+                const subcommand = args[0];
+                // Simple glob function for test files
+                function findTestFiles(pattern) {
+                    const files = [];
+                    const parts = pattern.split("/");
+                    const dir = parts.slice(0, -1).join("/") || ".";
+                    const filePattern = parts[parts.length - 1];
+                    const regex = new RegExp("^" + filePattern.replace(/\*/g, ".*").replace(/\?/g, ".") + "$");
+                    try {
+                        const dirFiles = fs.readdirSync(dir);
+                        for (const file of dirFiles) {
+                            if (regex.test(file)) {
+                                files.push(path.join(dir, file));
+                            }
+                        }
+                    }
+                    catch {
+                        // Directory doesn't exist
+                    }
+                    return files;
+                }
+                // Handle "coverage gaps" subcommand
+                if (subcommand === "gaps") {
+                    const url = args[1];
+                    if (!url) {
+                        console.error("Usage: cbrowser coverage gaps <url> [--tests <glob>] [--sitemap <url>]");
+                        process.exit(1);
+                    }
+                    console.log(`\n🔍 Finding untested pages for: ${url}`);
+                    const testPattern = options.tests || "tests/*.txt";
+                    const testFiles = findTestFiles(testPattern);
+                    if (testFiles.length === 0) {
+                        console.error(`No test files found matching: ${testPattern}`);
+                        process.exit(1);
+                    }
+                    console.log(`   Analyzing ${testFiles.length} test file(s)...`);
+                    const coverageOptions = {
+                        sitemapUrl: options.sitemap,
+                        maxPages: 50, // Quick mode
+                        minCoverage: 50,
+                    };
+                    const result = await (0, browser_js_1.generateCoverageMap)(url, testFiles, coverageOptions);
+                    // Show only gaps
+                    console.log(`\n🕳️  Coverage Gaps (${result.gaps.length} found):\n`);
+                    const priorityEmoji = { critical: "🚨", high: "🔴", medium: "🟡", low: "🟢" };
+                    for (const gap of result.gaps) {
+                        const emoji = priorityEmoji[gap.priority];
+                        console.log(`  ${emoji} ${gap.page.path}`);
+                        console.log(`     Priority: ${gap.priority} | Reason: ${gap.reason}`);
+                    }
+                    console.log(`\n📊 Coverage: ${result.analysis.coveragePercent}% (${result.analysis.testedPages}/${result.analysis.totalPages} pages)`);
+                    break;
+                }
+                // Main coverage command
+                const url = subcommand;
+                if (!url || url.startsWith("-")) {
+                    console.error("Usage: cbrowser coverage <url> [--tests <glob>] [--sitemap <url>] [--html] [--output <file>]");
+                    process.exit(1);
+                }
+                console.log(`\n📊 Generating test coverage map for: ${url}`);
+                const testPattern = options.tests || "tests/*.txt";
+                const testFiles = findTestFiles(testPattern);
+                if (testFiles.length === 0) {
+                    console.error(`No test files found matching: ${testPattern}`);
+                    console.error("Use --tests <glob> to specify test files");
+                    process.exit(1);
+                }
+                console.log(`   Found ${testFiles.length} test file(s)`);
+                for (const f of testFiles.slice(0, 5)) {
+                    console.log(`     - ${f}`);
+                }
+                if (testFiles.length > 5) {
+                    console.log(`     ... and ${testFiles.length - 5} more`);
+                }
+                const coverageOptions = {
+                    sitemapUrl: options.sitemap,
+                    maxPages: options["max-pages"] ? parseInt(options["max-pages"]) : 100,
+                    includePattern: options.include,
+                    excludePattern: options.exclude,
+                    minCoverage: options["min-coverage"] ? parseInt(options["min-coverage"]) : 50,
+                };
+                if (coverageOptions.sitemapUrl) {
+                    console.log(`   Using sitemap: ${coverageOptions.sitemapUrl}`);
+                }
+                else {
+                    console.log(`   Crawling site (max ${coverageOptions.maxPages} pages)...`);
+                }
+                const result = await (0, browser_js_1.generateCoverageMap)(url, testFiles, coverageOptions);
+                // Output format
+                if (options.html) {
+                    const htmlReport = (0, browser_js_1.generateCoverageHtmlReport)(result);
+                    const outputPath = options.output || "coverage-report.html";
+                    fs.writeFileSync(outputPath, htmlReport);
+                    console.log(`\n✅ HTML report saved: ${outputPath}`);
+                }
+                else if (options.output && options.output.endsWith(".json")) {
+                    fs.writeFileSync(options.output, JSON.stringify(result, null, 2));
+                    console.log(`\n✅ JSON report saved: ${options.output}`);
+                }
+                else {
+                    // Print text report
+                    const report = (0, browser_js_1.formatCoverageReport)(result);
+                    console.log(report);
+                    if (options.output) {
+                        fs.writeFileSync(options.output, report);
+                        console.log(`\n📄 Report saved: ${options.output}`);
+                    }
+                }
+                // Exit with error if coverage too low
+                if (result.analysis.coveragePercent < (coverageOptions.minCoverage || 50)) {
+                    console.log(`\n⚠️  Coverage (${result.analysis.coveragePercent}%) is below threshold (${coverageOptions.minCoverage}%)`);
+                    process.exit(1);
+                }
+                break;
+            }
             default:
                 console.error(`Unknown command: ${command}`);
                 console.error("Run 'cbrowser help' for usage");