slapify 0.0.14 → 0.0.17

package/dist/report/generator.js

@@ -1,549 +1 @@
-import fs from "fs";
-import path from "path";
-/**
- * Generate test reports in various formats
- */
-export class ReportGenerator {
-    config;
-    constructor(config = {}) {
-        this.config = {
-            format: "html",
-            screenshots: true,
-            output_dir: "./test-reports",
-            ...config,
-        };
-    }
-    /**
-     * Generate a report from test results
-     */
-    generate(result) {
-        switch (this.config.format) {
-            case "markdown":
-                return this.generateMarkdown(result);
-            case "html":
-                return this.generateHTML(result);
-            case "json":
-                return JSON.stringify(result, null, 2);
-            default:
-                return this.generateHTML(result);
-        }
-    }
-    /**
-     * Generate a suite report from multiple test results
-     */
-    generateSuiteReport(results) {
-        return this.generateSuiteHTML(results);
-    }
-    /**
-     * Save report to file
-     */
-    save(result, filename) {
-        const report = this.generate(result);
-        // Ensure output directory exists
-        const outputDir = this.config.output_dir || "./test-reports";
-        if (!fs.existsSync(outputDir)) {
-            fs.mkdirSync(outputDir, { recursive: true });
-        }
-        // Generate filename
-        const ext = this.config.format === "html"
-            ? "html"
-            : this.config.format === "json"
-                ? "json"
-                : "md";
-        const defaultName = `${path.basename(result.flowFile, ".flow")}-${Date.now()}.${ext}`;
-        const outputPath = path.join(outputDir, filename || defaultName);
-        fs.writeFileSync(outputPath, report);
-        return outputPath;
-    }
-    /**
-     * Save report as a folder with embedded images
-     */
-    saveAsFolder(result) {
-        const outputDir = this.config.output_dir || "./test-reports";
-        const folderName = `${path.basename(result.flowFile, ".flow")}-${Date.now()}`;
-        const reportFolder = path.join(outputDir, folderName);
-        // Create report folder
-        fs.mkdirSync(reportFolder, { recursive: true });
-        // Copy screenshots to folder and build map
-        const screenshotMap = {};
-        for (const step of result.steps) {
-            if (step.screenshot && fs.existsSync(step.screenshot)) {
-                const screenshotName = path.basename(step.screenshot);
-                const destPath = path.join(reportFolder, screenshotName);
-                fs.copyFileSync(step.screenshot, destPath);
-                screenshotMap[step.screenshot] = screenshotName;
-                // Clean up original screenshot
-                try {
-                    fs.unlinkSync(step.screenshot);
-                }
-                catch {
-                    // Ignore cleanup errors
-                }
-            }
-        }
-        // Update result with relative paths
-        const updatedResult = {
-            ...result,
-            steps: result.steps.map((step) => ({
-                ...step,
-                screenshot: step.screenshot
-                    ? screenshotMap[step.screenshot] || step.screenshot
-                    : undefined,
-            })),
-        };
-        // Generate report
-        const report = this.generateHTML(updatedResult);
-        const reportPath = path.join(reportFolder, "report.html");
-        fs.writeFileSync(reportPath, report);
-        return reportFolder;
-    }
-    /**
-     * Save suite report as a folder
-     */
-    saveSuiteAsFolder(results) {
-        const outputDir = this.config.output_dir || "./test-reports";
-        const folderName = `test-suite-${Date.now()}`;
-        const reportFolder = path.join(outputDir, folderName);
-        // Create report folder
-        fs.mkdirSync(reportFolder, { recursive: true });
-        // Copy all screenshots and update paths
-        const updatedResults = results.map((result) => {
-            const screenshotMap = {};
-            for (const step of result.steps) {
-                if (step.screenshot && fs.existsSync(step.screenshot)) {
-                    const screenshotName = `${path.basename(result.flowFile, ".flow")}-${path.basename(step.screenshot)}`;
-                    const destPath = path.join(reportFolder, screenshotName);
-                    fs.copyFileSync(step.screenshot, destPath);
-                    screenshotMap[step.screenshot] = screenshotName;
-                    try {
-                        fs.unlinkSync(step.screenshot);
-                    }
-                    catch { }
-                }
-            }
-            return {
-                ...result,
-                steps: result.steps.map((step) => ({
-                    ...step,
-                    screenshot: step.screenshot
-                        ? screenshotMap[step.screenshot] || step.screenshot
-                        : undefined,
-                })),
-            };
-        });
-        // Generate suite report
-        const report = this.generateSuiteHTML(updatedResults);
-        const reportPath = path.join(reportFolder, "report.html");
-        fs.writeFileSync(reportPath, report);
-        return reportFolder;
-    }
-    /**
-     * Generate Markdown report
-     */
-    generateMarkdown(result) {
-        const lines = [];
-        const statusEmoji = result.status === "passed" ? "✅" : "❌";
-        lines.push(`# ${path.basename(result.flowFile, ".flow")}`);
-        lines.push("");
-        lines.push(`**Status:** ${statusEmoji} ${result.status.toUpperCase()}`);
-        lines.push(`**Duration:** ${this.formatDuration(result.duration)}`);
-        lines.push(`**Started:** ${result.startTime.toISOString()}`);
-        lines.push("");
-        lines.push("## Summary");
-        lines.push("");
-        lines.push(`| Metric | Value |`);
-        lines.push(`|--------|-------|`);
-        lines.push(`| Total Steps | ${result.totalSteps} |`);
-        lines.push(`| Passed | ${result.passedSteps} |`);
-        lines.push(`| Failed | ${result.failedSteps} |`);
-        lines.push(`| Skipped | ${result.skippedSteps} |`);
-        lines.push("");
-        if (result.autoHandled.length > 0) {
-            lines.push("## Auto-Handled");
-            for (const handled of result.autoHandled) {
-                lines.push(`- ${handled}`);
-            }
-            lines.push("");
-        }
-        lines.push("## Steps");
-        lines.push("");
-        for (const stepResult of result.steps) {
-            const step = stepResult.step;
-            const statusIcon = stepResult.status === "passed"
-                ? "✅"
-                : stepResult.status === "failed"
-                    ? "❌"
-                    : "⏭️";
-            const optional = step.optional ? " [Optional]" : "";
-            lines.push(`### ${statusIcon} ${step.text}${optional}`);
-            lines.push(`Duration: ${this.formatDuration(stepResult.duration)}`);
-            lines.push("");
-            if (stepResult.actions.length > 0) {
-                for (const action of stepResult.actions) {
-                    lines.push(`- ${action.description}`);
-                }
-                lines.push("");
-            }
-            if (stepResult.error) {
-                lines.push(`**Error:** ${stepResult.error}`);
-                lines.push("");
-            }
-            if (stepResult.screenshot) {
-                lines.push(`![Screenshot](./${stepResult.screenshot})`);
-                lines.push("");
-            }
-        }
-        return lines.join("\n");
-    }
-    /**
-     * Generate HTML report with Tailwind CSS
-     */
-    generateHTML(result) {
-        const statusIcon = result.status === "passed" ? "✓" : "✗";
-        return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${path.basename(result.flowFile, ".flow")} - Test Report</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <style>
-    .step-details { display: none; }
-    .step.expanded .step-details { display: block; }
-    .step.expanded .chevron { transform: rotate(180deg); }
-    .modal { display: none; }
-    .modal.active { display: flex; }
-  </style>
-</head>
-<body class="bg-gray-50 text-gray-900 min-h-screen">
-  <div class="max-w-4xl mx-auto p-6">
-    
-    <!-- Header -->
-    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
-      <div class="flex items-center justify-between mb-4">
-        <h1 class="text-2xl font-bold">${path.basename(result.flowFile, ".flow")}</h1>
-        <span class="px-4 py-2 rounded-full font-semibold text-sm ${result.status === "passed"
-            ? "bg-green-100 text-green-800"
-            : "bg-red-100 text-red-800"}">
-          ${statusIcon} ${result.status.toUpperCase()}
-        </span>
-      </div>
-      <p class="text-gray-500 text-sm mb-6">Duration: ${this.formatDuration(result.duration)} · ${result.startTime.toLocaleString()}</p>
-      
-      <!-- Stats -->
-      <div class="grid grid-cols-4 gap-4">
-        <div class="bg-gray-100 rounded-lg p-4 text-center">
-          <div class="text-3xl font-bold">${result.totalSteps}</div>
-          <div class="text-xs text-gray-500 uppercase tracking-wide">Total</div>
-        </div>
-        <div class="bg-gray-100 rounded-lg p-4 text-center">
-          <div class="text-3xl font-bold text-green-600">${result.passedSteps}</div>
-          <div class="text-xs text-gray-500 uppercase tracking-wide">Passed</div>
-        </div>
-        <div class="bg-gray-100 rounded-lg p-4 text-center">
-          <div class="text-3xl font-bold text-red-600">${result.failedSteps}</div>
-          <div class="text-xs text-gray-500 uppercase tracking-wide">Failed</div>
-        </div>
-        <div class="bg-gray-100 rounded-lg p-4 text-center">
-          <div class="text-3xl font-bold text-yellow-600">${result.skippedSteps}</div>
-          <div class="text-xs text-gray-500 uppercase tracking-wide">Skipped</div>
-        </div>
-      </div>
-    </div>
-
-    ${result.autoHandled.length > 0
-            ? `
-    <!-- Auto-handled -->
-    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
-      <div class="font-semibold text-blue-800 mb-2">ℹ️ Auto-Handled Interruptions</div>
-      ${result.autoHandled
-                .map((h) => `<div class="text-blue-700 text-sm py-1">• ${h}</div>`)
-                .join("")}
-    </div>
-    `
-            : ""}
-
-    <!-- Steps -->
-    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-      <div class="px-6 py-4 border-b border-gray-200 font-semibold">Steps</div>
-      ${result.steps.map((s, i) => this.formatStepHTML(s, i)).join("")}
-    </div>
-    
-    <!-- Footer -->
-    <div class="text-center text-gray-400 text-sm py-8">
-      Generated by Slapify · ${new Date().toISOString()}
-    </div>
-  </div>
-
-  <!-- Modal -->
-  <div class="modal fixed inset-0 bg-black/90 z-50 items-center justify-center cursor-pointer" id="modal">
-    <img src="" alt="Screenshot" id="modal-img" class="max-w-[95%] max-h-[95%] rounded-lg">
-  </div>
-
-  <script>
-    document.querySelectorAll('.step-header').forEach(header => {
-      header.addEventListener('click', () => header.parentElement.classList.toggle('expanded'));
-    });
-    
-    const modal = document.getElementById('modal');
-    const modalImg = document.getElementById('modal-img');
-    
-    document.querySelectorAll('.screenshot-img').forEach(img => {
-      img.addEventListener('click', (e) => {
-        e.stopPropagation();
-        modalImg.src = img.src;
-        modal.classList.add('active');
-      });
-    });
-    
-    modal.addEventListener('click', () => modal.classList.remove('active'));
-    document.querySelectorAll('.step.failed').forEach(step => step.classList.add('expanded'));
-  </script>
-</body>
-</html>`;
-    }
-    /**
-     * Format a single step for HTML with Tailwind
-     */
-    formatStepHTML(result, index) {
-        const step = result.step;
-        const statusIcon = result.status === "passed" ? "✓" : result.status === "failed" ? "✗" : "○";
-        const statusColors = {
-            passed: "bg-green-100 text-green-600",
-            failed: "bg-red-100 text-red-600",
-            skipped: "bg-yellow-100 text-yellow-600",
-        };
-        const hasScreenshot = !!result.screenshot;
-        const wasRetried = result.retried;
-        return `
-    <div class="step ${result.status} border-b border-gray-100 last:border-b-0">
-      <div class="step-header flex items-center px-6 py-4 cursor-pointer hover:bg-gray-50 transition-colors">
-        <div class="w-8 h-8 rounded-full flex items-center justify-center font-semibold text-sm mr-4 flex-shrink-0 ${statusColors[result.status]}">${statusIcon}</div>
-        <div class="flex-1 min-w-0">
-          <div class="font-medium flex items-center flex-wrap gap-2">
-            <span>${step.text}</span>
-            ${step.optional
-            ? '<span class="px-2 py-0.5 bg-gray-100 text-gray-500 text-xs rounded">Optional</span>'
-            : ""}
-            ${wasRetried
-            ? '<span class="px-2 py-0.5 bg-orange-100 text-orange-600 text-xs rounded">Retried</span>'
-            : ""}
-          </div>
-          ${result.actions.length > 0
-            ? `<div class="text-sm text-gray-500 mt-1 truncate">${result.actions[0]?.description || ""}</div>`
-            : ""}
-        </div>
-        <div class="flex items-center gap-3 ml-4">
-          ${hasScreenshot ? '<span class="text-gray-400" title="Has screenshot">📷</span>' : ""}
-          <span class="text-gray-400 text-sm">${this.formatDuration(result.duration)}</span>
-        </div>
-        <div class="chevron ml-2 text-gray-400 transition-transform">▼</div>
-      </div>
-      <div class="step-details px-6 pb-6 pl-16">
-        ${result.actions.length > 0
-            ? `
-        <div class="bg-gray-50 rounded-lg p-4 mb-4">
-          ${result.actions
-                .map((a) => `<div class="py-1 text-sm"><span class="mr-2">${this.getActionIcon(a.type)}</span>${a.description}</div>`)
-                .join("")}
-        </div>
-        `
-            : ""}
-        ${result.assumptions && result.assumptions.length > 0
-            ? `
-        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
-          <div class="font-semibold text-yellow-800 mb-2">💡 Assumptions</div>
-          ${result.assumptions
-                .map((a) => `<div class="text-yellow-700 text-sm py-1">• ${a}</div>`)
-                .join("")}
-        </div>
-        `
-            : ""}
-        ${result.error
-            ? `<div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4 font-mono text-sm text-red-700 whitespace-pre-wrap break-words">${result.error}</div>`
-            : ""}
-        ${result.screenshot
-            ? `
-        <div class="mt-4">
-          <img src="./${result.screenshot}" alt="Step ${index + 1}" loading="lazy" class="screenshot-img max-w-full rounded-lg border border-gray-200 cursor-pointer hover:shadow-lg transition-shadow">
-        </div>
-        `
-            : ""}
-      </div>
-    </div>`;
-    }
-    /**
-     * Generate suite report HTML with Tailwind
-     */
-    generateSuiteHTML(results) {
-        const totalTests = results.length;
-        const passedTests = results.filter((r) => r.status === "passed").length;
-        const failedTests = results.filter((r) => r.status === "failed").length;
-        const totalSteps = results.reduce((sum, r) => sum + r.totalSteps, 0);
-        const totalDuration = results.reduce((sum, r) => sum + r.duration, 0);
-        const overallStatus = failedTests === 0 ? "passed" : "failed";
-        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</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <style>
-    .test-details { display: none; }
-    .test-item.expanded .test-details { display: block; }
-    .test-item.expanded .chevron { transform: rotate(180deg); }
-  </style>
-</head>
-<body class="bg-gray-50 text-gray-900 min-h-screen">
-  <div class="max-w-5xl mx-auto p-6">
-    
-    <!-- Header -->
-    <div class="bg-white rounded-xl shadow-sm p-8 mb-6">
-      <div class="flex items-center justify-between mb-6">
-        <h1 class="text-3xl font-bold">Test Suite Report</h1>
-        <span class="px-6 py-3 rounded-full font-bold ${overallStatus === "passed"
-            ? "bg-green-100 text-green-800"
-            : "bg-red-100 text-red-800"}">
-          ${overallStatus === "passed" ? "✓ ALL PASSED" : "✗ FAILURES"}
-        </span>
-      </div>
-      
-      <!-- Stats -->
-      <div class="grid grid-cols-5 gap-4">
-        <div class="bg-gray-100 rounded-lg p-5 text-center">
-          <div class="text-4xl font-bold">${totalTests}</div>
-          <div class="text-xs text-gray-500 uppercase tracking-wide mt-1">Test Files</div>
-        </div>
-        <div class="bg-gray-100 rounded-lg p-5 text-center">
-          <div class="text-4xl font-bold text-green-600">${passedTests}</div>
-          <div class="text-xs text-gray-500 uppercase tracking-wide mt-1">Passed</div>
-        </div>
-        <div class="bg-gray-100 rounded-lg p-5 text-center">
-          <div class="text-4xl font-bold text-red-600">${failedTests}</div>
-          <div class="text-xs text-gray-500 uppercase tracking-wide mt-1">Failed</div>
-        </div>
-        <div class="bg-gray-100 rounded-lg p-5 text-center">
-          <div class="text-4xl font-bold">${totalSteps}</div>
-          <div class="text-xs text-gray-500 uppercase tracking-wide mt-1">Total Steps</div>
-        </div>
-        <div class="bg-gray-100 rounded-lg p-5 text-center">
-          <div class="text-2xl font-bold">${this.formatDuration(totalDuration)}</div>
-          <div class="text-xs text-gray-500 uppercase tracking-wide mt-1">Duration</div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Test List -->
-    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-      <div class="px-6 py-4 border-b border-gray-200 font-semibold text-lg">Test Files (${totalTests})</div>
-      ${results.map((r, i) => this.formatTestItemHTML(r, i)).join("")}
-    </div>
-    
-    <!-- Footer -->
-    <div class="text-center text-gray-400 text-sm py-8">
-      Generated by Slapify · ${new Date().toISOString()}
-    </div>
-  </div>
-
-  <script>
-    document.querySelectorAll('.test-header').forEach(header => {
-      header.addEventListener('click', () => header.parentElement.classList.toggle('expanded'));
-    });
-    document.querySelectorAll('.test-item.failed').forEach(item => item.classList.add('expanded'));
-  </script>
-</body>
-</html>`;
-    }
-    /**
-     * Format a test item for suite report with Tailwind
-     */
-    formatTestItemHTML(result, index) {
-        const statusIcon = result.status === "passed" ? "✓" : "✗";
-        const statusColors = result.status === "passed"
-            ? "bg-green-100 text-green-600"
-            : "bg-red-100 text-red-600";
-        return `
-    <div class="test-item ${result.status} border-b border-gray-100 last:border-b-0">
-      <div class="test-header flex items-center px-6 py-5 cursor-pointer hover:bg-gray-50 transition-colors">
-        <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold mr-4 ${statusColors}">${statusIcon}</div>
-        <div class="flex-1">
-          <div class="font-semibold text-lg">${path.basename(result.flowFile, ".flow")}</div>
-          <div class="text-sm text-gray-500 mt-1">${result.totalSteps} steps · ${this.formatDuration(result.duration)}</div>
-        </div>
-        <div class="flex gap-2 ml-4">
-          <span class="px-3 py-1 bg-green-100 text-green-700 rounded text-sm font-medium">${result.passedSteps} passed</span>
-          ${result.failedSteps > 0
-            ? `<span class="px-3 py-1 bg-red-100 text-red-700 rounded text-sm font-medium">${result.failedSteps} failed</span>`
-            : ""}
-        </div>
-        <div class="chevron ml-4 text-gray-400 transition-transform">▼</div>
-      </div>
-      <div class="test-details px-6 pb-6 bg-gray-50">
-        ${result.steps
-            .map((s) => {
-            const stepColors = {
-                passed: "bg-green-100 text-green-600",
-                failed: "bg-red-100 text-red-600",
-                skipped: "bg-yellow-100 text-yellow-600",
-            };
-            const stepIcon = s.status === "passed" ? "✓" : s.status === "failed" ? "✗" : "○";
-            return `
-            <div class="flex items-center py-2 text-sm">
-              <div class="w-6 h-6 rounded-full flex items-center justify-center text-xs mr-3 ${stepColors[s.status]}">${stepIcon}</div>
-              <div class="flex-1">${s.step.text}</div>
-              <div class="text-gray-400">${this.formatDuration(s.duration)}</div>
-            </div>
-            ${s.error
-                ? `<div class="ml-9 p-2 bg-red-50 border border-red-200 rounded text-xs text-red-700 mb-2">${s.error}</div>`
-                : ""}
-          `;
-        })
-            .join("")}
-      </div>
-    </div>`;
-    }
-    /**
-     * Format duration in human-readable form
-     */
-    formatDuration(ms) {
-        if (ms < 1000)
-            return `${ms}ms`;
-        if (ms < 60000)
-            return `${(ms / 1000).toFixed(1)}s`;
-        const mins = Math.floor(ms / 60000);
-        const secs = Math.floor((ms % 60000) / 1000);
-        return `${mins}m ${secs}s`;
-    }
-    /**
-     * Get icon for action type
-     */
-    getActionIcon(type) {
-        switch (type) {
-            case "navigate":
-                return "🔗";
-            case "click":
-                return "👆";
-            case "fill":
-                return "✏️";
-            case "verify":
-                return "✓";
-            case "wait":
-                return "⏳";
-            case "auto-handle":
-                return "ℹ️";
-            default:
-                return "•";
-        }
-    }
-    /**
-     * Print summary to console
-     */
-    printSummary(result) {
-        const statusEmoji = result.status === "passed" ? "✅" : "❌";
-        console.log("");
-        console.log(`${statusEmoji} ${path.basename(result.flowFile, ".flow")} - ${result.status.toUpperCase()}`);
-        console.log(`   ${result.passedSteps}/${result.totalSteps} steps passed (${this.formatDuration(result.duration)})`);
-    }
-}
-//# sourceMappingURL=generator.js.map
+import e from"fs";import t from"path";export class ReportGenerator{config;constructor(e={}){this.config={format:"html",screenshots:!0,output_dir:"./test-reports",...e}}generate(e){switch(this.config.format){case"markdown":return this.generateMarkdown(e);case"html":default:return this.generateHTML(e);case"json":return JSON.stringify(e,null,2)}}generateSuiteReport(e){return this.generateSuiteHTML(e)}save(s,n){const r=this.generate(s),a=this.config.output_dir||"./test-reports";e.existsSync(a)||e.mkdirSync(a,{recursive:!0});const i="html"===this.config.format?"html":"json"===this.config.format?"json":"md",d=`${t.basename(s.flowFile,".flow")}-${Date.now()}.${i}`,o=t.join(a,n||d);return e.writeFileSync(o,r),o}saveAsFolder(s){const n=this.config.output_dir||"./test-reports",r=`${t.basename(s.flowFile,".flow")}-${Date.now()}`,a=t.join(n,r);e.mkdirSync(a,{recursive:!0});const i={};for(const n of s.steps)if(n.screenshot&&e.existsSync(n.screenshot)){const s=t.basename(n.screenshot),r=t.join(a,s);e.copyFileSync(n.screenshot,r),i[n.screenshot]=s;try{e.unlinkSync(n.screenshot)}catch{}}const d={...s,steps:s.steps.map(e=>({...e,screenshot:e.screenshot?i[e.screenshot]||e.screenshot:void 0}))},o=this.generateHTML(d),l=t.join(a,"report.html");return e.writeFileSync(l,o),a}saveSuiteAsFolder(s){const n=this.config.output_dir||"./test-reports",r=`test-suite-${Date.now()}`,a=t.join(n,r);e.mkdirSync(a,{recursive:!0});const i=s.map(s=>{const n={};for(const r of s.steps)if(r.screenshot&&e.existsSync(r.screenshot)){const i=`${t.basename(s.flowFile,".flow")}-${t.basename(r.screenshot)}`,d=t.join(a,i);e.copyFileSync(r.screenshot,d),n[r.screenshot]=i;try{e.unlinkSync(r.screenshot)}catch{}}return{...s,steps:s.steps.map(e=>({...e,screenshot:e.screenshot?n[e.screenshot]||e.screenshot:void 0}))}}),d=this.generateSuiteHTML(i),o=t.join(a,"report.html");return e.writeFileSync(o,d),a}generateMarkdown(e){const s=[],n="passed"===e.status?"✅":"❌";if(s.push(`# ${t.basename(e.flowFile,".flow")}`),s.push(""),s.push(`**Status:** ${n} ${e.status.toUpperCase()}`),s.push(`**Duration:** ${this.formatDuration(e.duration)}`),s.push(`**Started:** ${e.startTime.toISOString()}`),s.push(""),s.push("## Summary"),s.push(""),s.push("| Metric | Value |"),s.push("|--------|-------|"),s.push(`| Total Steps | ${e.totalSteps} |`),s.push(`| Passed | ${e.passedSteps} |`),s.push(`| Failed | ${e.failedSteps} |`),s.push(`| Skipped | ${e.skippedSteps} |`),s.push(""),e.autoHandled.length>0){s.push("## Auto-Handled");for(const t of e.autoHandled)s.push(`- ${t}`);s.push("")}s.push("## Steps"),s.push("");for(const t of e.steps){const e=t.step,n="passed"===t.status?"✅":"failed"===t.status?"❌":"⏭️",r=e.optional?" [Optional]":"";if(s.push(`### ${n} ${e.text}${r}`),s.push(`Duration: ${this.formatDuration(t.duration)}`),s.push(""),t.actions.length>0){for(const e of t.actions)s.push(`- ${e.description}`);s.push("")}t.error&&(s.push(`**Error:** ${t.error}`),s.push("")),t.screenshot&&(s.push(`![Screenshot](./${t.screenshot})`),s.push(""))}return s.join("\n")}generateHTML(e){const s="passed"===e.status?"✓":"✗";return`<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>${t.basename(e.flowFile,".flow")} - Test Report</title>\n  <script src="https://cdn.tailwindcss.com"><\/script>\n  <style>\n    .step-details { display: none; }\n    .step.expanded .step-details { display: block; }\n    .step.expanded .chevron { transform: rotate(180deg); }\n    .modal { display: none; }\n    .modal.active { display: flex; }\n  </style>\n</head>\n<body class="bg-gray-50 text-gray-900 min-h-screen">\n  <div class="max-w-4xl mx-auto p-6">\n    \n    \x3c!-- Header --\x3e\n    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">\n      <div class="flex items-center justify-between mb-4">\n        <h1 class="text-2xl font-bold">${t.basename(e.flowFile,".flow")}</h1>\n        <span class="px-4 py-2 rounded-full font-semibold text-sm ${"passed"===e.status?"bg-green-100 text-green-800":"bg-red-100 text-red-800"}">\n          ${s} ${e.status.toUpperCase()}\n        </span>\n      </div>\n      <p class="text-gray-500 text-sm mb-6">Duration: ${this.formatDuration(e.duration)} · ${e.startTime.toLocaleString()}</p>\n      \n      \x3c!-- Stats --\x3e\n      <div class="grid grid-cols-4 gap-4">\n        <div class="bg-gray-100 rounded-lg p-4 text-center">\n          <div class="text-3xl font-bold">${e.totalSteps}</div>\n          <div class="text-xs text-gray-500 uppercase tracking-wide">Total</div>\n        </div>\n        <div class="bg-gray-100 rounded-lg p-4 text-center">\n          <div class="text-3xl font-bold text-green-600">${e.passedSteps}</div>\n          <div class="text-xs text-gray-500 uppercase tracking-wide">Passed</div>\n        </div>\n        <div class="bg-gray-100 rounded-lg p-4 text-center">\n          <div class="text-3xl font-bold text-red-600">${e.failedSteps}</div>\n          <div class="text-xs text-gray-500 uppercase tracking-wide">Failed</div>\n        </div>\n        <div class="bg-gray-100 rounded-lg p-4 text-center">\n          <div class="text-3xl font-bold text-yellow-600">${e.skippedSteps}</div>\n          <div class="text-xs text-gray-500 uppercase tracking-wide">Skipped</div>\n        </div>\n      </div>\n    </div>\n\n    ${e.autoHandled.length>0?`\n    \x3c!-- Auto-handled --\x3e\n    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">\n      <div class="font-semibold text-blue-800 mb-2">ℹ️ Auto-Handled Interruptions</div>\n      ${e.autoHandled.map(e=>`<div class="text-blue-700 text-sm py-1">• ${e}</div>`).join("")}\n    </div>\n    `:""}\n\n    ${e.perfAudit?this.formatPerfSectionHTML(e.perfAudit):""}\n\n    \x3c!-- Steps --\x3e\n    <div class="bg-white rounded-xl shadow-sm overflow-hidden">\n      <div class="px-6 py-4 border-b border-gray-200 font-semibold">Steps</div>\n      ${e.steps.map((e,t)=>this.formatStepHTML(e,t)).join("")}\n    </div>\n    \n    \x3c!-- Footer --\x3e\n    <div class="text-center text-gray-400 text-sm py-8">\n      Generated by Slapify · ${(new Date).toISOString()}\n    </div>\n  </div>\n\n  \x3c!-- Modal --\x3e\n  <div class="modal fixed inset-0 bg-black/90 z-50 items-center justify-center cursor-pointer" id="modal">\n    <img src="" alt="Screenshot" id="modal-img" class="max-w-[95%] max-h-[95%] rounded-lg">\n  </div>\n\n  <script>\n    document.querySelectorAll('.step-header').forEach(header => {\n      header.addEventListener('click', () => header.parentElement.classList.toggle('expanded'));\n    });\n    \n    const modal = document.getElementById('modal');\n    const modalImg = document.getElementById('modal-img');\n    \n    document.querySelectorAll('.screenshot-img').forEach(img => {\n      img.addEventListener('click', (e) => {\n        e.stopPropagation();\n        modalImg.src = img.src;\n        modal.classList.add('active');\n      });\n    });\n    \n    modal.addEventListener('click', () => modal.classList.remove('active'));\n    document.querySelectorAll('.step.failed').forEach(step => step.classList.add('expanded'));\n  <\/script>\n</body>\n</html>`}formatStepHTML(e,t){const s=e.step,n="passed"===e.status?"✓":"failed"===e.status?"✗":"○",r=!!e.screenshot,a=e.retried;return`\n    <div class="step ${e.status} border-b border-gray-100 last:border-b-0">\n      <div class="step-header flex items-center px-6 py-4 cursor-pointer hover:bg-gray-50 transition-colors">\n        <div class="w-8 h-8 rounded-full flex items-center justify-center font-semibold text-sm mr-4 flex-shrink-0 ${{passed:"bg-green-100 text-green-600",failed:"bg-red-100 text-red-600",skipped:"bg-yellow-100 text-yellow-600"}[e.status]}">${n}</div>\n        <div class="flex-1 min-w-0">\n          <div class="font-medium flex items-center flex-wrap gap-2">\n            <span>${s.text}</span>\n            ${s.optional?'<span class="px-2 py-0.5 bg-gray-100 text-gray-500 text-xs rounded">Optional</span>':""}\n            ${a?'<span class="px-2 py-0.5 bg-orange-100 text-orange-600 text-xs rounded">Retried</span>':""}\n          </div>\n          ${e.actions.length>0?`<div class="text-sm text-gray-500 mt-1 truncate">${e.actions[0]?.description||""}</div>`:""}\n        </div>\n        <div class="flex items-center gap-3 ml-4">\n          ${r?'<span class="text-gray-400" title="Has screenshot">📷</span>':""}\n          <span class="text-gray-400 text-sm">${this.formatDuration(e.duration)}</span>\n        </div>\n        <div class="chevron ml-2 text-gray-400 transition-transform">▼</div>\n      </div>\n      <div class="step-details px-6 pb-6 pl-16">\n        ${e.actions.length>0?`\n        <div class="bg-gray-50 rounded-lg p-4 mb-4">\n          ${e.actions.map(e=>`<div class="py-1 text-sm"><span class="mr-2">${this.getActionIcon(e.type)}</span>${e.description}</div>`).join("")}\n        </div>\n        `:""}\n        ${e.assumptions&&e.assumptions.length>0?`\n        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">\n          <div class="font-semibold text-yellow-800 mb-2">💡 Assumptions</div>\n          ${e.assumptions.map(e=>`<div class="text-yellow-700 text-sm py-1">• ${e}</div>`).join("")}\n        </div>\n        `:""}\n        ${e.error?`<div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4 font-mono text-sm text-red-700 whitespace-pre-wrap break-words">${e.error}</div>`:""}\n        ${e.screenshot?`\n        <div class="mt-4">\n          <img src="./${e.screenshot}" alt="Step ${t+1}" loading="lazy" class="screenshot-img max-w-full rounded-lg border border-gray-200 cursor-pointer hover:shadow-lg transition-shadow">\n        </div>\n        `:""}\n      </div>\n    </div>`}generateSuiteHTML(e){const t=e.length,s=e.filter(e=>"passed"===e.status).length,n=e.filter(e=>"failed"===e.status).length,r=e.reduce((e,t)=>e+t.totalSteps,0),a=e.reduce((e,t)=>e+t.duration,0),i=0===n?"passed":"failed";return`<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>Test Suite Report</title>\n  <script src="https://cdn.tailwindcss.com"><\/script>\n  <style>\n    .test-details { display: none; }\n    .test-item.expanded .test-details { display: block; }\n    .test-item.expanded .chevron { transform: rotate(180deg); }\n  </style>\n</head>\n<body class="bg-gray-50 text-gray-900 min-h-screen">\n  <div class="max-w-5xl mx-auto p-6">\n    \n    \x3c!-- Header --\x3e\n    <div class="bg-white rounded-xl shadow-sm p-8 mb-6">\n      <div class="flex items-center justify-between mb-6">\n        <h1 class="text-3xl font-bold">Test Suite Report</h1>\n        <span class="px-6 py-3 rounded-full font-bold ${"passed"===i?"bg-green-100 text-green-800":"bg-red-100 text-red-800"}">\n          ${"passed"===i?"✓ ALL PASSED":"✗ FAILURES"}\n        </span>\n      </div>\n      \n      \x3c!-- Stats --\x3e\n      <div class="grid grid-cols-5 gap-4">\n        <div class="bg-gray-100 rounded-lg p-5 text-center">\n          <div class="text-4xl font-bold">${t}</div>\n          <div class="text-xs text-gray-500 uppercase tracking-wide mt-1">Test Files</div>\n        </div>\n        <div class="bg-gray-100 rounded-lg p-5 text-center">\n          <div class="text-4xl font-bold text-green-600">${s}</div>\n          <div class="text-xs text-gray-500 uppercase tracking-wide mt-1">Passed</div>\n        </div>\n        <div class="bg-gray-100 rounded-lg p-5 text-center">\n          <div class="text-4xl font-bold text-red-600">${n}</div>\n          <div class="text-xs text-gray-500 uppercase tracking-wide mt-1">Failed</div>\n        </div>\n        <div class="bg-gray-100 rounded-lg p-5 text-center">\n          <div class="text-4xl font-bold">${r}</div>\n          <div class="text-xs text-gray-500 uppercase tracking-wide mt-1">Total Steps</div>\n        </div>\n        <div class="bg-gray-100 rounded-lg p-5 text-center">\n          <div class="text-2xl font-bold">${this.formatDuration(a)}</div>\n          <div class="text-xs text-gray-500 uppercase tracking-wide mt-1">Duration</div>\n        </div>\n      </div>\n    </div>\n\n    \x3c!-- Test List --\x3e\n    <div class="bg-white rounded-xl shadow-sm overflow-hidden">\n      <div class="px-6 py-4 border-b border-gray-200 font-semibold text-lg">Test Files (${t})</div>\n      ${e.map((e,t)=>this.formatTestItemHTML(e,t)).join("")}\n    </div>\n    \n    \x3c!-- Footer --\x3e\n    <div class="text-center text-gray-400 text-sm py-8">\n      Generated by Slapify · ${(new Date).toISOString()}\n    </div>\n  </div>\n\n  <script>\n    document.querySelectorAll('.test-header').forEach(header => {\n      header.addEventListener('click', () => header.parentElement.classList.toggle('expanded'));\n    });\n    document.querySelectorAll('.test-item.failed').forEach(item => item.classList.add('expanded'));\n  <\/script>\n</body>\n</html>`}formatTestItemHTML(e,s){const n="passed"===e.status?"✓":"✗",r="passed"===e.status?"bg-green-100 text-green-600":"bg-red-100 text-red-600";return`\n    <div class="test-item ${e.status} border-b border-gray-100 last:border-b-0">\n      <div class="test-header flex items-center px-6 py-5 cursor-pointer hover:bg-gray-50 transition-colors">\n        <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold mr-4 ${r}">${n}</div>\n        <div class="flex-1">\n          <div class="font-semibold text-lg">${t.basename(e.flowFile,".flow")}</div>\n          <div class="text-sm text-gray-500 mt-1">${e.totalSteps} steps · ${this.formatDuration(e.duration)}</div>\n        </div>\n        <div class="flex gap-2 ml-4">\n          <span class="px-3 py-1 bg-green-100 text-green-700 rounded text-sm font-medium">${e.passedSteps} passed</span>\n          ${e.failedSteps>0?`<span class="px-3 py-1 bg-red-100 text-red-700 rounded text-sm font-medium">${e.failedSteps} failed</span>`:""}\n        </div>\n        <div class="chevron ml-4 text-gray-400 transition-transform">▼</div>\n      </div>\n      <div class="test-details px-6 pb-6 bg-gray-50">\n        ${e.steps.map(e=>{const t="passed"===e.status?"✓":"failed"===e.status?"✗":"○";return`\n            <div class="flex items-center py-2 text-sm">\n              <div class="w-6 h-6 rounded-full flex items-center justify-center text-xs mr-3 ${{passed:"bg-green-100 text-green-600",failed:"bg-red-100 text-red-600",skipped:"bg-yellow-100 text-yellow-600"}[e.status]}">${t}</div>\n              <div class="flex-1">${e.step.text}</div>\n              <div class="text-gray-400">${this.formatDuration(e.duration)}</div>\n            </div>\n            ${e.error?`<div class="ml-9 p-2 bg-red-50 border border-red-200 rounded text-xs text-red-700 mb-2">${e.error}</div>`:""}\n          `}).join("")}\n      </div>\n    </div>`}formatPerfSectionHTML(e){const t=(e,t)=>{const s=e>=90?"#16a34a":e>=50?"#d97706":"#dc2626",n=e>=90?"bg-green-50 border-green-200":e>=50?"bg-yellow-50 border-yellow-200":"bg-red-50 border-red-200",r=e>=90?"text-green-700":e>=50?"text-yellow-700":"text-red-700",a=2*Math.PI*28;return`<div class="flex flex-col items-center p-4 rounded-xl border ${n} min-w-[100px]">\n        <svg width="64" height="64" viewBox="0 0 72 72" class="mb-2">\n          <circle cx="36" cy="36" r="28" fill="none" stroke="#e5e7eb" stroke-width="8"/>\n          <circle cx="36" cy="36" r="28" fill="none" stroke="${s}" stroke-width="8"\n            stroke-dasharray="${(e/100*a).toFixed(1)} ${a.toFixed(1)}"\n            stroke-linecap="round" transform="rotate(-90 36 36)"/>\n          <text x="36" y="41" text-anchor="middle" fill="${s}" font-size="16" font-weight="700">${e}</text>\n        </svg>\n        <div class="text-xs font-semibold text-gray-600">${t}</div>\n        <div class="text-xs ${r}">${e>=90?"Good":e>=50?"Needs Work":"Poor"}</div>\n      </div>`},s=(e,t,s,n)=>{if(null==t)return"";return`<div class="flex items-center justify-between px-4 py-2 rounded-lg border ${t<=n[0]?"text-green-700 bg-green-50 border-green-200":t<=n[1]?"text-yellow-700 bg-yellow-50 border-yellow-200":"text-red-700 bg-red-50 border-red-200"}">\n        <span class="text-xs font-medium text-gray-600">${e}</span>\n        <span class="text-sm font-bold ml-4">${""===s?t.toFixed(4):`${t}${s}`}</span>\n      </div>`},n=e.lighthouse?[t(e.lighthouse.performance,"Performance"),t(e.lighthouse.accessibility,"Accessibility"),t(e.lighthouse.bestPractices,"Best Practices"),t(e.lighthouse.seo,"SEO")].join(""):"",r=[s("FCP",e.vitals.fcp,"ms",[1800,3e3]),s("LCP",e.vitals.lcp,"ms",[2500,4e3]),s("CLS",e.vitals.cls,"",[.1,.25]),s("TTFB",e.vitals.ttfb,"ms",[800,1800]),s("DOM Ready",e.vitals.domContentLoaded,"ms",[2e3,4e3])].filter(Boolean).join(""),a=e.lighthouse?[["FCP",e.lighthouse.fcp,"ms"],["LCP",e.lighthouse.lcp,"ms"],["TBT",e.lighthouse.tbt,"ms"],["Speed Index",e.lighthouse.speedIndex,"ms"],["TTI",e.lighthouse.tti,"ms"]].filter(([,e])=>null!=e).map(([e,t,s])=>`<div class="bg-gray-100 rounded-lg p-3 text-center">\n            <div class="text-xs text-gray-500">${e}</div>\n            <div class="text-lg font-bold">${t}${s}</div>\n          </div>`).join(""):"",i=e.react?e.react.detected?`<div class="mt-4 pt-4 border-t border-gray-200">\n            <div class="font-semibold text-sm mb-3">⚛️ React Scan${e.react.version?` <span class="text-gray-400 font-normal">v${e.react.version}</span>`:""}</div>\n            ${0===e.react.issues.length?'<p class="text-green-600 text-sm">✅ No unnecessary re-renders detected</p>':`<div class="space-y-1">${e.react.issues.map(e=>`<div class="flex items-center justify-between text-sm px-3 py-2 bg-yellow-50 rounded-lg border border-yellow-200">\n                    <code class="text-yellow-800">${e.component}</code>\n                    <span class="text-red-600 font-semibold">${e.renderCount} renders${null!=e.avgMs?` · ${e.avgMs}ms avg`:""}</span>\n                  </div>`).join("")}</div>`}\n          </div>`:'<p class="text-gray-400 text-sm mt-4">ℹ️ React not detected on this page</p>':"";return`\n    \x3c!-- Performance --\x3e\n    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">\n      <div class="font-semibold text-lg mb-1">⚡ Performance Audit</div>\n      <div class="text-xs text-gray-400 mb-4">${e.url}</div>\n\n      ${n?`<div class="flex flex-wrap gap-3 mb-6">${n}</div>`:""}\n\n      ${a?`<div class="grid grid-cols-3 gap-3 mb-4">${a}</div>`:""}\n\n      ${r?`\n      <div class="mb-2 text-xs font-semibold text-gray-500 uppercase tracking-wide">Core Web Vitals (live)</div>\n      <div class="grid grid-cols-2 gap-2 mb-2">${r}</div>`:""}\n\n      ${i}\n\n      ${e.lighthouseReportPath?`<div class="mt-4 text-xs text-gray-400">Full Lighthouse report: <a href="${e.lighthouseReportPath}" class="text-blue-500 underline">${e.lighthouseReportPath}</a></div>`:""}\n    </div>`}formatDuration(e){if(e<1e3)return`${e}ms`;if(e<6e4)return`${(e/1e3).toFixed(1)}s`;return`${Math.floor(e/6e4)}m ${Math.floor(e%6e4/1e3)}s`}getActionIcon(e){switch(e){case"navigate":return"🔗";case"click":return"👆";case"fill":return"✏️";case"verify":return"✓";case"wait":return"⏳";case"auto-handle":return"ℹ️";default:return"•"}}printSummary(e){const s="passed"===e.status?"✅":"❌";console.log(""),console.log(`${s} ${t.basename(e.flowFile,".flow")} - ${e.status.toUpperCase()}`),console.log(`   ${e.passedSteps}/${e.totalSteps} steps passed (${this.formatDuration(e.duration)})`)}}

package/dist/runner/index.d.ts

@@ -14,8 +14,9 @@ export declare class TestRunner {
      * Run a flow file
      * @param flow The flow file to run
      * @param onStep Optional callback for real-time step progress
+     * @param runPerformanceAudit If true, collect perf metrics before closing the browser
      */
-    runFlow(flow: FlowFile, onStep?: (result: StepResult) => void): Promise<TestResult>;
+    runFlow(flow: FlowFile, onStep?: (result: StepResult) => void, runPerformanceAudit?: boolean): Promise<TestResult>;
     /**
      * Execute a single step
      */
@@ -24,6 +25,18 @@ export declare class TestRunner {
      * Execute a browser command
      */
     private executeCommand;
+    /**
+     * Pick the best credential profile for a given URL.
+     * Prefers profiles whose name matches the current domain, falls back to "default".
+     * Returns null when no profiles exist.
+     */
+    private pickBestCredentialProfile;
+    /**
+     * Detect and solve captchas on the current page.
+     * Handles common captcha patterns — checkbox reCAPTCHA, hCaptcha, Cloudflare Turnstile.
+     * Runs silently; any failure is swallowed so the main flow continues.
+     */
+    private handleCaptcha;
     /**
      * Handle automatic dismissal of interruptions
      */