npm - cbrowser - Versions diffs - 5.3.0 → 6.1.0 - Mend

cbrowser 5.3.0 → 6.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/cli.js CHANGED Viewed

@@ -13,8 +13,8 @@ const mcp_server_js_1 = require("./mcp-server.js");
 function showHelp() {
     console.log(`
 ╔══════════════════════════════════════════════════════════════════════════════╗
-║                           CBrowser CLI v5.3.0                                ║
-║    AI-powered browser automation with smart retry & assertions               ║
+║                           CBrowser CLI v6.1.0                                ║
+║    AI-powered browser automation with natural language test suites           ║
 ╚══════════════════════════════════════════════════════════════════════════════╝
 NAVIGATION
@@ -36,6 +36,46 @@ AUTONOMOUS JOURNEYS
     --goal <goal>             What to accomplish
     --record-video            Record journey as video
+MULTI-PERSONA COMPARISON (v6.0.0)
+  compare-personas            Compare multiple personas on the same journey
+    --start <url>             Starting URL (required)
+    --goal <goal>             What to accomplish (required)
+    --personas <list>         Comma-separated persona names
+    --concurrency <n>         Max parallel browsers (default: 3)
+    --output <file>           Save JSON report to file
+    --html                    Generate HTML report
+    Examples:
+      cbrowser compare-personas --start "https://example.com" \\
+        --goal "Complete checkout" \\
+        --personas power-user,first-timer,elderly-user,mobile-user
+NATURAL LANGUAGE TEST SUITES (v6.1.0)
+  test-suite <file.txt>        Run tests written in plain English
+    --continue-on-failure      Keep running after a test fails
+    --screenshot-on-failure    Take screenshots on failure (default: true)
+    --output <file>            Save JSON report to file
+    --html                     Generate HTML report
+    --timeout <ms>             Timeout per step (default: 30000)
+  test-suite --inline "..."    Run inline test (semicolon-separated steps)
+    Examples:
+      cbrowser test-suite login-flow.txt --html
+      cbrowser test-suite --inline "go to https://example.com ; click login ; verify url contains /dashboard"
+    Test File Format:
+      # Test: Login Flow
+      go to https://example.com
+      click the login button
+      type "user@example.com" in email field
+      type "password123" in password field
+      click submit
+      verify url contains "/dashboard"
+      # Test: Search
+      go to https://example.com
+      type "test query" in search box
+      click search button
+      verify page contains "results"
 PERSONAS
   persona list                List all personas (built-in + custom)
   persona create "<desc>"     Create persona from natural language description
@@ -286,6 +326,291 @@ function formatBytes(bytes) {
         return `${(bytes / 1024).toFixed(1)} KB`;
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
+function generateHtmlReport(comparison) {
+    const rows = comparison.personas.map((p) => `
+    <tr class="${p.success ? 'success' : 'failure'}">
+      <td><strong>${p.persona}</strong><br><small>${p.description}</small></td>
+      <td>${p.success ? '✓' : '✗'}</td>
+      <td>${(p.totalTime / 1000).toFixed(1)}s</td>
+      <td>${p.stepCount}</td>
+      <td>${p.frictionCount}</td>
+      <td>${p.techLevel}</td>
+      <td>${p.device}</td>
+      <td><small>${p.frictionPoints.join('<br>') || '-'}</small></td>
+    </tr>
+  `).join('');
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Persona Comparison Report</title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 2rem;
+      background: #f5f5f5;
+    }
+    h1 { color: #1a1a1a; border-bottom: 3px solid #3b82f6; padding-bottom: 0.5rem; }
+    .meta { background: white; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
+    .meta p { margin: 0.25rem 0; }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      background: white;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    th, td {
+      padding: 1rem;
+      text-align: left;
+      border-bottom: 1px solid #eee;
+    }
+    th { background: #1a1a1a; color: white; }
+    tr.success { background: #ecfdf5; }
+    tr.failure { background: #fef2f2; }
+    .summary {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1rem;
+      margin: 1rem 0;
+    }
+    .stat {
+      background: white;
+      padding: 1rem;
+      border-radius: 8px;
+      text-align: center;
+    }
+    .stat .value { font-size: 2rem; font-weight: bold; color: #3b82f6; }
+    .stat .label { color: #666; font-size: 0.875rem; }
+    .recommendations {
+      background: #fffbeb;
+      border: 1px solid #fbbf24;
+      border-radius: 8px;
+      padding: 1rem;
+      margin-top: 1rem;
+    }
+    .recommendations h3 { margin-top: 0; }
+    .recommendations ul { margin: 0; padding-left: 1.5rem; }
+  </style>
+</head>
+<body>
+  <h1>🎭 Multi-Persona Comparison Report</h1>
+  <div class="meta">
+    <p><strong>URL:</strong> ${comparison.url}</p>
+    <p><strong>Goal:</strong> ${comparison.goal}</p>
+    <p><strong>Timestamp:</strong> ${comparison.timestamp}</p>
+    <p><strong>Total Duration:</strong> ${(comparison.duration / 1000).toFixed(1)}s</p>
+  </div>
+  <div class="summary">
+    <div class="stat">
+      <div class="value">${comparison.summary.successCount}/${comparison.summary.totalPersonas}</div>
+      <div class="label">Success Rate</div>
+    </div>
+    <div class="stat">
+      <div class="value">${(comparison.summary.avgCompletionTime / 1000).toFixed(1)}s</div>
+      <div class="label">Avg Completion Time</div>
+    </div>
+    <div class="stat">
+      <div class="value">${comparison.summary.fastestPersona}</div>
+      <div class="label">Fastest</div>
+    </div>
+    <div class="stat">
+      <div class="value">${comparison.summary.mostFriction}</div>
+      <div class="label">Most Friction</div>
+    </div>
+  </div>
+  <table>
+    <thead>
+      <tr>
+        <th>Persona</th>
+        <th>Success</th>
+        <th>Time</th>
+        <th>Steps</th>
+        <th>Friction</th>
+        <th>Tech Level</th>
+        <th>Device</th>
+        <th>Issues</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${rows}
+    </tbody>
+  </table>
+  <div class="recommendations">
+    <h3>💡 Recommendations</h3>
+    <ul>
+      ${comparison.recommendations.map((r) => `<li>${r}</li>`).join('')}
+    </ul>
+  </div>
+  <p style="color: #999; text-align: center; margin-top: 2rem;">
+    Generated by CBrowser v6.0.0 - Multi-Persona Comparison
+  </p>
+</body>
+</html>`;
+}
+function generateTestSuiteHtmlReport(result) {
+    const testRows = result.testResults.map((t) => {
+        const stepDetails = t.stepResults.map((s) => `
+      <tr class="${s.passed ? 'step-pass' : 'step-fail'}">
+        <td class="step-indent">${s.instruction}</td>
+        <td>${s.passed ? '✓' : '✗'}</td>
+        <td>${s.duration}ms</td>
+        <td>${s.error || '-'}</td>
+      </tr>
+    `).join('');
+        return `
+    <tr class="${t.passed ? 'success' : 'failure'}">
+      <td><strong>${t.name}</strong></td>
+      <td>${t.passed ? '✓ PASS' : '✗ FAIL'}</td>
+      <td>${(t.duration / 1000).toFixed(1)}s</td>
+      <td>${t.stepResults.length} steps</td>
+      <td>${t.error || '-'}</td>
+    </tr>
+    ${stepDetails}
+  `;
+    }).join('');
+    const passRate = result.summary.passRate.toFixed(0);
+    const passColor = result.summary.passRate === 100 ? '#10b981' : result.summary.passRate >= 80 ? '#f59e0b' : '#ef4444';
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Test Suite Report - ${result.name}</title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 2rem;
+      background: #f5f5f5;
+    }
+    h1 { color: #1a1a1a; border-bottom: 3px solid #3b82f6; padding-bottom: 0.5rem; }
+    .meta { background: white; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
+    .meta p { margin: 0.25rem 0; }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      background: white;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      margin-bottom: 1rem;
+    }
+    th, td {
+      padding: 0.75rem 1rem;
+      text-align: left;
+      border-bottom: 1px solid #eee;
+    }
+    th { background: #1a1a1a; color: white; }
+    tr.success { background: #ecfdf5; }
+    tr.failure { background: #fef2f2; }
+    tr.step-pass { background: #f8fafc; }
+    tr.step-fail { background: #fff5f5; }
+    .step-indent { padding-left: 2rem; font-size: 0.875rem; color: #666; }
+    .summary {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 1rem;
+      margin: 1rem 0;
+    }
+    .stat {
+      background: white;
+      padding: 1rem;
+      border-radius: 8px;
+      text-align: center;
+    }
+    .stat .value { font-size: 1.75rem; font-weight: bold; }
+    .stat .label { color: #666; font-size: 0.875rem; }
+    .pass-rate { color: ${passColor}; }
+    .failures {
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      border-radius: 8px;
+      padding: 1rem;
+      margin-top: 1rem;
+    }
+    .failures h3 { margin-top: 0; color: #dc2626; }
+    .failures ul { margin: 0; padding-left: 1.5rem; }
+    code { background: #f1f5f9; padding: 0.125rem 0.25rem; border-radius: 4px; font-size: 0.875rem; }
+  </style>
+</head>
+<body>
+  <h1>🧪 Natural Language Test Report</h1>
+  <div class="meta">
+    <p><strong>Suite:</strong> ${result.name}</p>
+    <p><strong>Timestamp:</strong> ${result.timestamp}</p>
+    <p><strong>Duration:</strong> ${(result.duration / 1000).toFixed(1)}s</p>
+  </div>
+  <div class="summary">
+    <div class="stat">
+      <div class="value pass-rate">${passRate}%</div>
+      <div class="label">Pass Rate</div>
+    </div>
+    <div class="stat">
+      <div class="value">${result.summary.passed}</div>
+      <div class="label">Passed</div>
+    </div>
+    <div class="stat">
+      <div class="value" style="color: ${result.summary.failed > 0 ? '#ef4444' : '#10b981'};">${result.summary.failed}</div>
+      <div class="label">Failed</div>
+    </div>
+    <div class="stat">
+      <div class="value">${result.summary.total}</div>
+      <div class="label">Total Tests</div>
+    </div>
+  </div>
+  <table>
+    <thead>
+      <tr>
+        <th>Test / Step</th>
+        <th>Status</th>
+        <th>Duration</th>
+        <th>Steps</th>
+        <th>Error</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${testRows}
+    </tbody>
+  </table>
+  ${result.summary.failed > 0 ? `
+  <div class="failures">
+    <h3>❌ Failed Tests</h3>
+    <ul>
+      ${result.testResults.filter(t => !t.passed).map(t => `
+        <li>
+          <strong>${t.name}</strong>: ${t.error}
+          <ul>
+            ${t.stepResults.filter(s => !s.passed).map(s => `<li><code>${s.instruction}</code> - ${s.error}</li>`).join('')}
+          </ul>
+        </li>
+      `).join('')}
+    </ul>
+  </div>
+  ` : ''}
+  <p style="color: #999; text-align: center; margin-top: 2rem;">
+    Generated by CBrowser v6.1.0 - Natural Language Test Suites
+  </p>
+</body>
+</html>`;
+}
 function parseGeoLocation(location) {
     // Check if it's a preset
     if (types_js_1.LOCATION_PRESETS[location]) {
@@ -681,6 +1006,58 @@ async function main() {
                 }
                 break;
             }
+            // =========================================================================
+            // Tier 6: Multi-Persona Comparison (v6.0.0)
+            // =========================================================================
+            case "compare-personas": {
+                const startUrl = options.start;
+                const goal = options.goal;
+                const personaList = options.personas;
+                if (!startUrl) {
+                    console.error("Error: --start URL required");
+                    process.exit(1);
+                }
+                if (!goal) {
+                    console.error("Error: --goal required");
+                    process.exit(1);
+                }
+                // Default to comparing all built-in personas if none specified
+                const personaNames = personaList
+                    ? personaList.split(",").map((p) => p.trim())
+                    : Object.keys(personas_js_1.BUILTIN_PERSONAS);
+                const concurrency = options.concurrency
+                    ? parseInt(options.concurrency)
+                    : 3;
+                const comparison = await (0, browser_js_1.comparePersonas)({
+                    startUrl,
+                    goal,
+                    personas: personaNames,
+                    maxConcurrency: concurrency,
+                    headless,
+                });
+                // Print formatted report
+                const report = (0, browser_js_1.formatComparisonReport)(comparison);
+                console.log(report);
+                // Save JSON output if requested
+                if (options.output) {
+                    const fs = await import("fs");
+                    fs.writeFileSync(options.output, JSON.stringify(comparison, null, 2));
+                    console.log(`\n📄 JSON report saved: ${options.output}`);
+                }
+                // Generate HTML report if requested
+                if (options.html) {
+                    const fs = await import("fs");
+                    const htmlReport = generateHtmlReport(comparison);
+                    const htmlPath = options.output?.replace(".json", ".html") || "comparison-report.html";
+                    fs.writeFileSync(htmlPath, htmlReport);
+                    console.log(`\n🌐 HTML report saved: ${htmlPath}`);
+                }
+                // Exit with error if any personas failed
+                if (comparison.summary.failureCount > 0) {
+                    process.exit(1);
+                }
+                break;
+            }
             case "persona": {
                 const subcommand = args[0];
                 switch (subcommand) {
@@ -1955,6 +2332,86 @@ async function main() {
                 console.log("✓ Browser state reset (cookies, localStorage cleared)");
                 break;
             }
+            // =========================================================================
+            // Natural Language Test Suites (Tier 6)
+            // =========================================================================
+            case "test-suite": {
+                const filepath = args[0];
+                const inlineTest = options.inline;
+                if (!filepath && !inlineTest) {
+                    console.error("Usage: cbrowser test-suite <file.txt> [--continue-on-failure] [--output <report.json>]");
+                    console.error("       cbrowser test-suite --inline \"go to https://... ; click login ; verify ...\"");
+                    console.error("");
+                    console.error("Options:");
+                    console.error("  --continue-on-failure    Continue running after a test fails");
+                    console.error("  --screenshot-on-failure  Take screenshots on failure (default: true)");
+                    console.error("  --output <file>          Save JSON report to file");
+                    console.error("  --html                   Generate HTML report");
+                    console.error("  --timeout <ms>           Timeout per step (default: 30000)");
+                    console.error("");
+                    console.error("Test File Format:");
+                    console.error("  # Test: Login Flow");
+                    console.error("  go to https://example.com");
+                    console.error("  click the login button");
+                    console.error("  type \"user@example.com\" in email field");
+                    console.error("  verify url contains \"/dashboard\"");
+                    process.exit(1);
+                }
+                let suite;
+                if (inlineTest) {
+                    // Parse inline test - semicolons separate steps
+                    const steps = inlineTest.split(";").map(s => s.trim()).filter(s => s);
+                    const testCase = {
+                        name: "Inline Test",
+                        steps: steps.map(s => (0, browser_js_1.parseNLInstruction)(s)),
+                    };
+                    suite = { name: "Inline Suite", tests: [testCase] };
+                }
+                else {
+                    // Load from file
+                    const fs = await import("fs");
+                    if (!fs.existsSync(filepath)) {
+                        console.error(`Test file not found: ${filepath}`);
+                        process.exit(1);
+                    }
+                    const content = fs.readFileSync(filepath, "utf-8");
+                    const suiteName = filepath.split("/").pop()?.replace(/\.[^.]+$/, "") || "Test Suite";
+                    suite = (0, browser_js_1.parseNLTestSuite)(content, suiteName);
+                }
+                console.log(`\n📝 Parsed ${suite.tests.length} test(s) from ${inlineTest ? "inline" : filepath}`);
+                for (const test of suite.tests) {
+                    console.log(`   - ${test.name}: ${test.steps.length} steps`);
+                }
+                const suiteOptions = {
+                    stepTimeout: options.timeout ? parseInt(options.timeout) : 30000,
+                    continueOnFailure: options["continue-on-failure"] === true,
+                    screenshotOnFailure: options["screenshot-on-failure"] !== false,
+                    headless,
+                };
+                const result = await (0, browser_js_1.runNLTestSuite)(suite, suiteOptions);
+                // Print formatted report
+                const report = (0, browser_js_1.formatNLTestReport)(result);
+                console.log(report);
+                // Save JSON output if requested
+                if (options.output) {
+                    const fs = await import("fs");
+                    fs.writeFileSync(options.output, JSON.stringify(result, null, 2));
+                    console.log(`\n📄 JSON report saved: ${options.output}`);
+                }
+                // Generate HTML report if requested
+                if (options.html) {
+                    const fs = await import("fs");
+                    const htmlReport = generateTestSuiteHtmlReport(result);
+                    const htmlPath = options.output?.replace(".json", ".html") || "test-report.html";
+                    fs.writeFileSync(htmlPath, htmlReport);
+                    console.log(`\n🌐 HTML report saved: ${htmlPath}`);
+                }
+                // Exit with error code if any tests failed
+                if (result.summary.failed > 0) {
+                    process.exit(1);
+                }
+                break;
+            }
             default:
                 console.error(`Unknown command: ${command}`);
                 console.error("Run 'cbrowser help' for usage");