@arcadialdev/arcality 2.2.9 → 2.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcadialdev/arcality",
-  "version": "2.2.9",
+  "version": "2.3.2",
   "description": "AI-powered QA testing tool — Autonomous web testing agent by Arcadial",
   "main": "index.js",
   "scripts": {

package/playwright.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from '@playwright/test';
 export default defineConfig({
   testDir: './tests',
   reporter: [
-    ['./tests/_helpers/ArcalityReporter.ts', { outputDir: process.env.REPORTS_DIR || 'tests-report' }]
+    ['./tests/_helpers/ArcalityReporter.js', { outputDir: process.env.REPORTS_DIR || 'tests-report' }]
   ],
   use: {
     video: 'on',

package/scripts/gen-and-run.mjs

@@ -732,7 +732,9 @@ async function main() {
             const configFile = path.join(PROJECT_ROOT, 'playwright.config.ts');
 
             try {
-                await run("node", [playwrightCli, "test", path.join(PROJECT_ROOT, "tests/_helpers/agentic-runner.spec.ts"), "--headed", `--config=${configFile}`], {
+                // IMPORTANT: Node 22.12+ breaks Playwright's TS transpiler (pirates.js) with sync require()
+                // We MUST pass --no-experimental-require-module to let Playwright compile TS safely.
+                await run("node", ["--no-experimental-require-module", playwrightCli, "test", path.join(PROJECT_ROOT, "tests/_helpers/agentic-runner.spec.ts"), "--headed", `--config=${configFile}`], {
                     env: mergedEnv,
                     onStatus: (msg) => s.message(msg)
                 });

package/scripts/rebrand-report.mjs

@@ -24,22 +24,15 @@ async function rebrandReport() {
         try {
             const logoBuffer = fs.readFileSync(logoPngPath);
             logoBase64 = `data:image/png;base64,${logoBuffer.toString('base64')}`;
-            console.log("✅ Logo Arcality cargado desde public/logo.png");
-        } catch (e) {
-            console.error("⚠️ Error leyendo logo:", e.message);
-        }
-    } else {
-        console.warn("⚠️ No se encontró public/logo.png");
+        } catch (e) { /* silent */ }
     }
 
     for (const dir of targetDirs) {
         if (fs.existsSync(dir)) {
-            console.log(`Processing report directory: ${dir}`);
             processDirectory(dir, logoBase64);
         }
     }
-
-    console.log("🏁 Branding process finished.");
+    // Silent — CLI spinner communicates progress
 }
 
 function processDirectory(reportDir, logoBase64) {
@@ -168,7 +161,7 @@ function processDirectory(reportDir, logoBase64) {
             }
 
             fs.writeFileSync(indexPath, html, 'utf8');
-            console.log(`✨ [REBRAND] Report transformado en: ${indexPath}`);
+            // Silent success — CLI handles notification
         } catch (err) {
             console.error(`❌ Error al procesar ${indexPath}: ${err.message}`);
         }
@@ -237,7 +230,7 @@ function processTraceViewer(reportDir, logoBase64) {
             }
 
             fs.writeFileSync(tracePath, traceHtml, 'utf8');
-            console.log(`✨ [REBRAND] Trace Viewer transformado en: ${tracePath}`);
+            // Silent success
         } catch (e) {
             console.error(`⚠️ Error en Trace Viewer ${tracePath}: ${e.message}`);
         }

package/tests/_helpers/ArcalityReporter.js

@@ -0,0 +1,279 @@
+// tests/_helpers/ArcalityReporter.js
+// Plain JavaScript CJS version — compatible with any Playwright version
+// Avoids TypeScript compilation issues when loaded as a reporter
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+class ArcalityReporter {
+    constructor(options = {}) {
+        this.outputDir = options.outputDir || 'arcality-report';
+        this.results = [];
+        this.totalDuration = 0;
+        this.startTime = new Date();
+    }
+
+    onBegin(_config, _suite) {
+        if (fs.existsSync(this.outputDir)) {
+            try {
+                fs.rmSync(this.outputDir, { recursive: true, force: true });
+            } catch (err) {
+                // ignore
+            }
+        }
+        if (!fs.existsSync(this.outputDir)) {
+            fs.mkdirSync(this.outputDir, { recursive: true });
+        }
+        this.startTime = new Date();
+    }
+
+    onTestEnd(test, result) {
+        const stepsHtml = result.steps.map(step => this.renderStep(step, 0)).join('');
+
+        const processedAttachments = result.attachments.map(att => {
+            const fileName = att.path ? path.basename(att.path) : `${att.name || 'attachment'}-${Date.now()}.png`;
+            const attachmentsDir = path.join(this.outputDir, 'attachments');
+            const destPath = path.join(attachmentsDir, fileName);
+
+            if (!fs.existsSync(attachmentsDir)) {
+                fs.mkdirSync(attachmentsDir, { recursive: true });
+            }
+
+            try {
+                if (att.path && fs.existsSync(att.path)) {
+                    fs.copyFileSync(att.path, destPath);
+                } else if (att.body) {
+                    fs.writeFileSync(destPath, att.body);
+                }
+                return { ...att, path: `attachments/${fileName}` };
+            } catch (e) {
+                return att;
+            }
+        });
+
+        this.results.push({ test, result, stepsHtml, attachments: processedAttachments });
+    }
+
+    async onEnd(result) {
+        this.totalDuration = result.duration;
+        const htmlContent = this.generateHtml();
+        const reportPath = path.join(this.outputDir, 'index.html');
+        fs.writeFileSync(reportPath, htmlContent);
+        // Intentionally silent — CLI handles the report open notification
+    }
+
+    renderStep(step, depth) {
+        // Humanize: hide internal Playwright hooks
+        if (step.category === 'hook' || step.category === 'fixture') return '';
+
+        const padding = depth * 16;
+        const statusClass = step.error ? 'step-error' : 'step-passed';
+        const icon = step.error ? '✕' : '✓';
+        const duration = step.duration >= 0 ? `<span class="step-duration">${step.duration}ms</span>` : '';
+
+        let title = this.escapeHtml(step.title);
+        title = title.replace(/^(click|fill|navigate|wait|expect|goto|press)/i, '<span class="step-action">$1</span>');
+
+        let children = '';
+        if (step.steps && step.steps.length > 0) {
+            children = `<div class="step-children">${step.steps.map(s => this.renderStep(s, depth + 1)).join('')}</div>`;
+        }
+
+        return `
+            <div class="step-wrapper ${statusClass}" style="margin-left: ${padding}px">
+                <div class="step-header">
+                    <span class="step-icon">${icon}</span>
+                    <span class="step-title">${title}</span>
+                    ${duration}
+                </div>
+                ${children}
+            </div>
+        `;
+    }
+
+    getEngineVersion() {
+        try {
+            // Check Arcality's own package.json first, then cwd fallback
+            const toolPkg = path.join(__dirname, '..', '..', 'package.json');
+            const cwdPkg = path.join(process.cwd(), 'package.json');
+            const pkgPath = fs.existsSync(toolPkg) ? toolPkg : cwdPkg;
+            if (fs.existsSync(pkgPath)) {
+                const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+                return pkg.version || '2.2.9';
+            }
+        } catch (e) { /* ignore */ }
+        return '2.2.9';
+    }
+
+    generateHtml() {
+        const stats = {
+            total: this.results.length,
+            passed: this.results.filter(r => r.result.status === 'passed').length,
+            failed: this.results.filter(r => r.result.status === 'failed' || r.result.status === 'timedOut').length,
+            flaky: this.results.filter(r => r.result.status === 'passed' && r.result.retry > 0).length,
+        };
+
+        const testCards = this.results.map((r, i) => {
+            const statusClass = `status-${r.result.status}`;
+            const projectName = (r.test.parent && r.test.parent.project && r.test.parent.project()) ? r.test.parent.project().name : 'default';
+
+            const successSummaryAtt = r.attachments.find(a => a.name === 'success_summary');
+            const successBlock = (r.result.status === 'passed' && successSummaryAtt && successSummaryAtt.body)
+                ? `<div class="success-block">${this.escapeHtml(successSummaryAtt.body.toString())}</div>`
+                : '';
+
+            const errorBlock = r.result.error
+                ? `<div class="steps-section"><span class="section-title">Analysis of the Obstacle</span><div class="error-block">${this.escapeHtml(r.result.error.message || 'Unknown Failure')}</div></div>`
+                : '';
+
+            const mediaAttachments = r.attachments.filter(a => a.contentType && (a.contentType.startsWith('image/') || a.contentType.startsWith('video/')));
+            const mediaGrid = mediaAttachments.length > 0 ? `
+                <div class="steps-section">
+                    <span class="section-title">Visual Evidence</span>
+                    <div class="attachments-grid">
+                        ${mediaAttachments.map(att => {
+                            if (att.contentType.startsWith('image/')) {
+                                return `<div class="attachment-item"><img src="${att.path}" alt="${att.name}" onclick="window.open('${att.path}')"><a href="${att.path}" target="_blank" class="att-label">${att.name}</a></div>`;
+                            }
+                            if (att.contentType.startsWith('video/')) {
+                                return `<div class="attachment-item"><video controls src="${att.path}"></video><a href="${att.path}" target="_blank" class="att-label">${att.name}</a></div>`;
+                            }
+                            return '';
+                        }).join('')}
+                    </div>
+                </div>` : '';
+
+            return `
+                <div class="test-entry ${statusClass}">
+                    <div class="test-header" onclick="toggleDetails(${i})">
+                        <div class="test-info">
+                            <span class="status-dot"></span>
+                            <div>
+                                <div class="test-name">${this.escapeHtml(r.test.title)}</div>
+                                <div class="test-meta">
+                                    <span class="tag tag-project">${projectName}</span>
+                                    ${r.result.retry > 0 ? `<span class="tag tag-retry">Retry #${r.result.retry}</span>` : ''}
+                                    <span>${(r.result.duration / 1000).toFixed(2)}s</span>
+                                </div>
+                            </div>
+                        </div>
+                        <span style="opacity:0.5; font-size: 1.2rem">▼</span>
+                    </div>
+                    <div class="test-details" id="details-${i}">
+                        ${successBlock}
+                        ${errorBlock}
+                        <div class="steps-section">
+                            <span class="section-title">🧠 Agent Cognitive Process</span>
+                            <div class="steps-container">${r.stepsHtml || '<p style="opacity:0.5">No steps recorded.</p>'}</div>
+                        </div>
+                        ${mediaGrid}
+                    </div>
+                </div>`;
+        }).join('');
+
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Arcality Mission Report</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
+        :root {
+            --bg-deep: #020617; --bg-card: #0f172a; --text-main: #f8fafc; --text-muted: #94a3b8;
+            --primary: #6366f1; --success: #10b981; --error: #f43f5e; --warning: #f59e0b;
+            --border: #1e293b; --accent: #c084fc;
+        }
+        * { box-sizing: border-box; }
+        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--bg-deep); color: var(--text-main); margin: 0; line-height: 1.6; }
+        .container { max-width: 1400px; margin: 0 auto; padding: 2rem; }
+        .main-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
+        .brand-section h1 { font-size: 2.5rem; font-weight: 800; margin: 0; background: linear-gradient(to right, #818cf8, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+        .mission-id { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 3px; }
+        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
+        .stat-card { background: var(--bg-card); padding: 1.5rem; border-radius: 16px; border: 1px solid var(--border); text-align: center; }
+        .stat-value { font-size: 2rem; font-weight: 800; display: block; }
+        .stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
+        .val-total { color: var(--text-main); } .val-passed { color: var(--success); } .val-failed { color: var(--error); } .val-flaky { color: var(--warning); }
+        .test-entry { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; margin-bottom: 2rem; overflow: hidden; }
+        .test-entry:hover { border-color: var(--primary); }
+        .test-header { padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: rgba(255,255,255,0.02); }
+        .test-info { display: flex; align-items: center; gap: 1rem; }
+        .status-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
+        .status-passed .status-dot { background: var(--success); box-shadow: 0 0 10px var(--success); }
+        .status-failed .status-dot { background: var(--error); box-shadow: 0 0 10px var(--error); }
+        .test-name { font-weight: 700; font-size: 1.1rem; }
+        .test-meta { font-size: 0.8rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
+        .test-details { padding: 0 2rem 2rem; }
+        .error-block { background: rgba(244,63,94,0.1); border-left: 4px solid var(--error); padding: 1.5rem; border-radius: 8px; margin: 1rem 0; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; color: #fda4af; white-space: pre-wrap; }
+        .success-block { background: rgba(16,185,129,0.1); border-left: 4px solid var(--success); padding: 1.2rem; border-radius: 12px; margin: 1rem 0; font-size: 1.1rem; font-weight: 600; color: #6ee7b7; display: flex; align-items: center; gap: 12px; }
+        .success-block::before { content: "✨"; font-size: 1.4rem; }
+        .steps-section { margin-top: 2rem; }
+        .section-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); margin-bottom: 1rem; display: block; }
+        .step-wrapper { border-left: 1px solid var(--border); padding: 8px 16px; position: relative; }
+        .step-header { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; }
+        .step-icon { width: 16px; font-size: 0.8rem; opacity: 0.7; }
+        .step-action { color: var(--primary); font-weight: 700; }
+        .step-duration { font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }
+        .step-error { border-left-color: var(--error); color: #fb7185; }
+        .attachments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
+        .attachment-item { background: var(--bg-deep); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
+        .attachment-item img, .attachment-item video { width: 100%; height: 180px; object-fit: cover; display: block; cursor: zoom-in; }
+        .att-label { padding: 0.75rem; font-size: 0.75rem; font-weight: 600; text-align: center; background: rgba(255,255,255,0.05); display: block; text-decoration: none; color: var(--text-muted); }
+        .tag { padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
+        .tag-project { background: rgba(192,132,252,0.2); color: var(--accent); }
+        .tag-retry { background: rgba(245,158,11,0.2); color: var(--warning); }
+        footer { margin-top: 5rem; text-align: center; padding: 2rem; font-size: 0.8rem; color: var(--text-muted); border-top: 1px solid var(--border); }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="main-header">
+            <div class="brand-section">
+                <span class="mission-id">Mission Alpha System</span>
+                <h1>Arcality Mission Report</h1>
+                <p style="color: var(--text-muted)">Testing Intelligence &amp; Diagnostics Console</p>
+            </div>
+            <div style="text-align: right">
+                <div style="color: var(--accent); font-weight: 700;">${this.startTime.toLocaleDateString()}</div>
+                <div style="font-family: 'JetBrains Mono'; font-size: 0.8rem;">ENGINE VERSION ${this.getEngineVersion()}</div>
+            </div>
+        </div>
+
+        <div class="stats-grid">
+            <div class="stat-card"><span class="stat-value val-total">${stats.total}</span><span class="stat-label">Total Missions</span></div>
+            <div class="stat-card"><span class="stat-value val-passed">${stats.passed}</span><span class="stat-label">Successful</span></div>
+            <div class="stat-card"><span class="stat-value val-failed">${stats.failed}</span><span class="stat-label">Fatal Errors</span></div>
+            <div class="stat-card"><span class="stat-value val-flaky">${stats.flaky}</span><span class="stat-label">Flaky Tests</span></div>
+            <div class="stat-card"><span class="stat-value val-total">${(this.totalDuration / 1000).toFixed(2)}s</span><span class="stat-label">Total Duration</span></div>
+        </div>
+
+        <div class="test-list">${testCards}</div>
+
+        <footer>ARCALITY ENGINE v${this.getEngineVersion()} • SYSTEM TIME [${new Date().toISOString()}] • GENERATED FOR ARCADIAL</footer>
+    </div>
+    <script>
+        function toggleDetails(id) {
+            const el = document.getElementById('details-' + id);
+            el.style.display = (el.style.display === 'none' || el.style.display === '') ? 'block' : 'none';
+        }
+        document.querySelectorAll('.test-details').forEach(d => d.style.display = 'none');
+    </script>
+</body>
+</html>`;
+    }
+
+    escapeHtml(unsafe) {
+        if (!unsafe) return '';
+        return String(unsafe)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#039;');
+    }
+}
+
+module.exports = ArcalityReporter;