@testivai/witness-playwright 1.0.0

package/dist/domAnalyzer.js

@@ -0,0 +1,285 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.analyzeDOM = analyzeDOM;
+exports.compareDOMAnalysis = compareDOMAnalysis;
+/**
+ * Default configuration for DOM analysis
+ */
+const DEFAULT_CONFIG = {
+    enableFingerprint: true,
+    enableStructure: true,
+    enableSemantic: true,
+    ignoreAttributes: [
+        'data-testid',
+        'data-reactid',
+        'data-reactroot',
+        'ng-version',
+        'ng-version',
+        'ng-reflect-router-outlet',
+        'data-ng-version',
+        'style', // Inline styles change often
+        'class', // CSS classes can be dynamic
+    ],
+    ignoreElements: [
+        'script',
+        'style',
+        'noscript',
+        'meta',
+        'link',
+        'title',
+    ],
+    ignoreContentPatterns: [
+        /\d{4}-\d{2}-\d{2}/, // Dates
+        /\d{1,2}:\d{2}(:\d{2})?/, // Times
+        /\b\d{4}\b/, // Years
+        /\b\d+\b/, // Pure numbers
+        /uuid-/i, // UUIDs
+        /_\d+/, // Number suffixes
+        /\$\d+\.?\d*/, // Currency
+    ],
+};
+/**
+ * Analyzes DOM structure and generates fingerprint
+ */
+async function analyzeDOM(page, config = {}) {
+    const finalConfig = { ...DEFAULT_CONFIG, ...config };
+    return await page.evaluate((cfg) => {
+        // Helper functions
+        const normalizeSelector = (el) => {
+            let selector = el.nodeName.toLowerCase();
+            // Add ID if present and not a dynamic ID
+            if (el.id && !cfg.ignoreAttributes.includes('id')) {
+                // Skip if ID looks dynamic
+                if (!/^(ember|react|ng|vue|_)/.test(el.id)) {
+                    selector += `#${el.id}`;
+                }
+            }
+            // Add meaningful classes only
+            if (el.className && !cfg.ignoreAttributes.includes('class')) {
+                const classes = el.className.toString()
+                    .split(' ')
+                    .filter((c) => c &&
+                    !/^(ember|react|ng|vue|css|active|hover|focus)/.test(c) &&
+                    !c.includes('_') &&
+                    !/\d/.test(c))
+                    .slice(0, 3); // Limit to 3 most meaningful classes
+                if (classes.length > 0) {
+                    selector += `.${classes.join('.')}`;
+                }
+            }
+            return selector;
+        };
+        const getElementPath = (el, maxDepth = 10) => {
+            const path = [];
+            let current = el;
+            let depth = 0;
+            while (current && current.nodeType === Node.ELEMENT_NODE && depth < maxDepth) {
+                path.unshift(normalizeSelector(current));
+                current = current.parentElement;
+                depth++;
+            }
+            return path.join(' > ');
+        };
+        const shouldIgnoreElement = (el) => {
+            return cfg.ignoreElements.includes(el.nodeName.toLowerCase());
+        };
+        const shouldIgnoreAttribute = (attr) => {
+            return cfg.ignoreAttributes.includes(attr.toLowerCase());
+        };
+        const shouldIgnoreContent = (content) => {
+            return cfg.ignoreContentPatterns.some((pattern) => pattern.test(content));
+        };
+        const normalizeText = (text) => {
+            if (!text)
+                return '';
+            // Replace ignored patterns with placeholders
+            let normalized = text.trim();
+            cfg.ignoreContentPatterns.forEach((pattern) => {
+                normalized = normalized.replace(pattern, '[DYNAMIC]');
+            });
+            // Normalize whitespace
+            normalized = normalized.replace(/\s+/g, ' ');
+            return normalized;
+        };
+        // Get all meaningful elements
+        const allElements = Array.from(document.querySelectorAll('*'))
+            .filter(el => !shouldIgnoreElement(el));
+        const analysis = {};
+        // 1. Generate fingerprint
+        if (cfg.enableFingerprint) {
+            const paths = allElements.map((el) => {
+                const path = getElementPath(el);
+                const text = normalizeText(el.textContent || '');
+                const attrs = [];
+                // Add important attributes
+                for (const attr of el.attributes) {
+                    if (!shouldIgnoreAttribute(attr.name) && attr.value) {
+                        attrs.push(`${attr.name}="${attr.value}"`);
+                    }
+                }
+                return `${path}${text ? `|${text}` : ''}${attrs.length ? `|${attrs.join(',')}` : ''}`;
+            });
+            // Create hash from sorted paths
+            const sortedPaths = paths.sort().join('|||');
+            analysis.fingerprint = btoa(sortedPaths).substring(0, 32);
+        }
+        // 2. Structural analysis
+        if (cfg.enableStructure) {
+            const elementTypes = {};
+            let maxDepth = 0;
+            allElements.forEach((el) => {
+                const tag = el.nodeName.toLowerCase();
+                elementTypes[tag] = (elementTypes[tag] || 0) + 1;
+                // Calculate depth
+                let depth = 0;
+                let current = el;
+                while (current.parentElement) {
+                    depth++;
+                    current = current.parentElement;
+                }
+                maxDepth = Math.max(maxDepth, depth);
+            });
+            analysis.structure = {
+                totalElements: allElements.length,
+                elementTypes,
+                maxDepth,
+                interactiveElements: {
+                    buttons: document.querySelectorAll('button').length,
+                    inputs: document.querySelectorAll('input').length,
+                    links: document.querySelectorAll('a[href]').length,
+                    forms: document.querySelectorAll('form').length,
+                },
+            };
+        }
+        // 3. Semantic analysis
+        if (cfg.enableSemantic) {
+            const headings = {};
+            for (let i = 1; i <= 6; i++) {
+                headings[`h${i}`] = document.querySelectorAll(`h${i}`).length;
+            }
+            analysis.semantic = {
+                headings,
+                landmarks: {
+                    hasHeader: !!document.querySelector('header'),
+                    hasNav: !!document.querySelector('nav'),
+                    hasMain: !!document.querySelector('main'),
+                    hasFooter: !!document.querySelector('footer'),
+                    hasAside: !!document.querySelector('aside'),
+                },
+                lists: {
+                    ordered: document.querySelectorAll('ol').length,
+                    unordered: document.querySelectorAll('ul').length,
+                },
+                tables: document.querySelectorAll('table').length,
+                images: document.querySelectorAll('img').length,
+            };
+        }
+        // 4. Component analysis (framework-agnostic)
+        const components = {};
+        allElements.forEach((el) => {
+            // Try various component detection strategies
+            const componentName = el.getAttribute('data-testid')?.replace(/-/g, '') ||
+                el.getAttribute('data-component') ||
+                el.getAttribute('data-testid') ||
+                el.className?.toString().match(/(\w+Container|\w+Component|\w+Page|\w+Card|\w+Modal)/i)?.[1];
+            if (componentName && componentName.length > 2) {
+                if (!components[componentName]) {
+                    components[componentName] = [];
+                }
+                const attrs = {};
+                for (const attr of el.attributes) {
+                    if (!shouldIgnoreAttribute(attr.name) && attr.value) {
+                        attrs[attr.name] = attr.value;
+                    }
+                }
+                components[componentName].push({
+                    selector: getElementPath(el),
+                    text: normalizeText(el.textContent || '').substring(0, 100),
+                    attributes: attrs,
+                });
+            }
+        });
+        if (Object.keys(components).length > 0) {
+            analysis.components = components;
+        }
+        return analysis;
+    }, finalConfig);
+}
+/**
+ * Compare two DOM analyses and identify changes
+ */
+function compareDOMAnalysis(baseline, current) {
+    const changes = [];
+    // Compare fingerprints
+    if (baseline.fingerprint && current.fingerprint) {
+        if (baseline.fingerprint !== current.fingerprint) {
+            changes.push({
+                type: 'fingerprint',
+                severity: 'high',
+                description: 'DOM structure has changed',
+                details: {
+                    baseline: baseline.fingerprint,
+                    current: current.fingerprint,
+                },
+            });
+        }
+    }
+    // Compare structure
+    if (baseline.structure && current.structure) {
+        if (baseline.structure.totalElements !== current.structure.totalElements) {
+            changes.push({
+                type: 'structure',
+                severity: 'medium',
+                description: `Element count changed from ${baseline.structure.totalElements} to ${current.structure.totalElements}`,
+            });
+        }
+        // Check for new/removed element types
+        const baselineTypes = Object.keys(baseline.structure.elementTypes);
+        const currentTypes = Object.keys(current.structure.elementTypes);
+        const removed = baselineTypes.filter(t => !currentTypes.includes(t));
+        const added = currentTypes.filter(t => !baselineTypes.includes(t));
+        if (removed.length > 0) {
+            changes.push({
+                type: 'structure',
+                severity: 'medium',
+                description: `Removed element types: ${removed.join(', ')}`,
+            });
+        }
+        if (added.length > 0) {
+            changes.push({
+                type: 'structure',
+                severity: 'medium',
+                description: `Added element types: ${added.join(', ')}`,
+            });
+        }
+    }
+    // Compare semantic structure
+    if (baseline.semantic && current.semantic) {
+        // Check heading changes
+        const baselineHeadings = baseline.semantic.headings;
+        const currentHeadings = current.semantic.headings;
+        for (const level in baselineHeadings) {
+            if (baselineHeadings[level] !== currentHeadings[level]) {
+                changes.push({
+                    type: 'semantic',
+                    severity: 'low',
+                    description: `${level} count changed from ${baselineHeadings[level]} to ${currentHeadings[level]}`,
+                });
+            }
+        }
+        // Check landmark changes
+        const baselineLandmarks = baseline.semantic.landmarks;
+        const currentLandmarks = current.semantic.landmarks;
+        for (const landmark in baselineLandmarks) {
+            if (baselineLandmarks[landmark] !==
+                currentLandmarks[landmark]) {
+                changes.push({
+                    type: 'semantic',
+                    severity: 'medium',
+                    description: `Landmark ${landmark} ${baselineLandmarks[landmark] ? 'removed' : 'added'}`,
+                });
+            }
+        }
+    }
+    return changes;
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { snapshot } from './snapshot';
+import { getCiRunId } from './ci';
+export declare const testivai: {
+    witness: typeof snapshot;
+    ci: typeof getCiRunId;
+};
+export type { TestivAIConfig, TestivAIProjectConfig, StructureAnalysisConfig, StructureAnalysis } from './types';

package/dist/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testivai = void 0;
+const snapshot_1 = require("./snapshot");
+const ci_1 = require("./ci");
+exports.testivai = {
+    witness: snapshot_1.snapshot,
+    ci: ci_1.getCiRunId,
+};
+// Structure analyzer is now handled on the backend
+// The types are kept for backwards compatibility

package/dist/reporter-entry.d.ts

@@ -0,0 +1,2 @@
+import { TestivAIPlaywrightReporter } from './reporter';
+export = TestivAIPlaywrightReporter;

package/dist/reporter-entry.js

@@ -0,0 +1,5 @@
+"use strict";
+// Entry point for Playwright reporter
+// Playwright expects: module.exports = ReporterClass
+const reporter_1 = require("./reporter");
+module.exports = reporter_1.TestivAIPlaywrightReporter;

package/dist/reporter-types.d.ts

@@ -0,0 +1,2 @@
+import type { Reporter, FullConfig, Suite, FullResult } from '@playwright/test/reporter';
+export type { Reporter, FullConfig, Suite, FullResult };

package/dist/reporter-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/reporter.d.ts

@@ -0,0 +1,21 @@
+import { Reporter, FullConfig, Suite, FullResult } from './reporter-types';
+import { type CompressionOptions } from '@testivai/common';
+interface TestivaiReporterOptions {
+    apiUrl?: string;
+    apiKey?: string;
+    compression?: CompressionOptions;
+    debug?: boolean;
+}
+export declare class TestivAIPlaywrightReporter implements Reporter {
+    private options;
+    private gitInfo;
+    private browserInfo;
+    private runId;
+    private ciInfo;
+    private tempDir;
+    private compressionHelper;
+    constructor(options?: TestivaiReporterOptions);
+    onBegin(config: FullConfig, suite: Suite): Promise<void>;
+    onEnd(result: FullResult): Promise<void>;
+}
+export default TestivAIPlaywrightReporter;

package/dist/reporter.js

@@ -0,0 +1,249 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestivAIPlaywrightReporter = void 0;
+const fs = __importStar(require("fs-extra"));
+const path = __importStar(require("path"));
+const simple_git_1 = __importDefault(require("simple-git"));
+const axios_1 = __importDefault(require("axios"));
+const ci_1 = require("./ci");
+const common_1 = require("@testivai/common");
+class TestivAIPlaywrightReporter {
+    constructor(options = {}) {
+        this.gitInfo = null;
+        this.browserInfo = null;
+        this.runId = null;
+        this.ciInfo = null;
+        this.tempDir = path.join(process.cwd(), '.testivai', 'temp');
+        this.options = {
+            apiUrl: options.apiUrl || process.env.TESTIVAI_API_URL || 'https://core-api.testiv.ai',
+            apiKey: options.apiKey || process.env.TESTIVAI_API_KEY,
+            compression: options.compression || {},
+            debug: options.debug || process.env.TESTIVAI_DEBUG === 'true',
+        };
+        // Initialize compression helper
+        this.compressionHelper = new common_1.CompressionHelper(this.options.compression);
+    }
+    async onBegin(config, suite) {
+        if (!this.options.apiKey) {
+            console.error('Testivai Reporter: API Key is not configured. Disabling reporter.');
+            console.error('Set TESTIVAI_API_KEY environment variable or pass apiKey in reporter options.');
+            this.options.apiUrl = undefined; // Disable reporter
+            return;
+        }
+        // 1. Clean temp directory
+        await fs.emptyDir(this.tempDir);
+        // 2. Capture Git metadata
+        try {
+            const git = (0, simple_git_1.default)();
+            const [branch, commit] = await Promise.all([
+                git.revparse(['--abbrev-ref', 'HEAD']),
+                git.revparse(['HEAD']),
+            ]);
+            this.gitInfo = { branch, commit };
+        }
+        catch (error) {
+            console.error('Testivai Reporter: Could not get Git information.', error);
+            this.gitInfo = { branch: 'unknown', commit: 'unknown' };
+        }
+        // 3. Capture Browser info from the first project
+        const project = suite.suites[0]?.project();
+        if (project) {
+            this.browserInfo = {
+                name: project.use.browserName || 'unknown',
+                version: 'unknown', // Playwright does not easily expose browser version
+                viewportWidth: project.use.viewport?.width || 0,
+                viewportHeight: project.use.viewport?.height || 0,
+                userAgent: project.use.userAgent || 'unknown',
+                os: 'unknown',
+            };
+        }
+        // 4. Get CI Run ID and CI info
+        this.runId = (0, ci_1.getCiRunId)();
+        this.ciInfo = (0, ci_1.getCiInfo)();
+        if (this.runId && this.options.debug) {
+            console.log(`Testivai Reporter: [DEBUG] Detected CI environment. Run ID: ${this.runId}`);
+            if (this.ciInfo) {
+                console.log(`Testivai Reporter: [DEBUG] CI Info: provider=${this.ciInfo.provider}, PR=#${this.ciInfo.prNumber || 'N/A'}`);
+            }
+        }
+    }
+    async onEnd(result) {
+        // Wrap entire reporter logic in try-catch to prevent crashes
+        try {
+            if (!this.options.apiUrl) {
+                return; // Reporter is disabled
+            }
+            if (this.options.debug) {
+                console.log('Testivai Reporter: [DEBUG] Test run finished. Preparing to upload evidence...');
+            }
+            const snapshotFiles = await fs.readdir(this.tempDir);
+            // Filter out .css.json files - they're not metadata files
+            const jsonFiles = snapshotFiles.filter(f => f.endsWith('.json') && !f.endsWith('.css.json'));
+            if (jsonFiles.length === 0) {
+                if (this.options.debug) {
+                    console.log('Testivai Reporter: [DEBUG] No snapshots found to upload.');
+                }
+                return;
+            }
+            if (this.options.debug) {
+                console.log(`Testivai Reporter: [DEBUG] Found ${jsonFiles.length} snapshot(s) to process`);
+            }
+            // Build snapshots array matching CDP SDK format
+            const snapshots = [];
+            for (const jsonFile of jsonFiles) {
+                const metadataPath = path.join(this.tempDir, jsonFile);
+                const metadata = await fs.readJson(metadataPath);
+                // Null safety: ensure metadata has required structure
+                // @renamed: dom → structure, css → styles (IP protection)
+                const structurePath = metadata.files.structure;
+                const screenshotPath = metadata.files.screenshot;
+                const stylesPath = metadata.files.styles;
+                if (!metadata.files || !structurePath || !screenshotPath) {
+                    console.warn(`Testivai Reporter: Invalid metadata structure in ${jsonFile}, skipping...`);
+                    continue;
+                }
+                // Extract the first selector's layout data (usually 'body')
+                const layoutKeys = Object.keys(metadata.layout || {});
+                if (layoutKeys.length === 0) {
+                    console.warn(`Testivai Reporter: No layout data found for ${metadata.snapshotName}, skipping...`);
+                    continue;
+                }
+                const firstSelector = layoutKeys[0];
+                const layoutData = metadata.layout[firstSelector];
+                // Read screenshot and encode to base64
+                const screenshotBuffer = await fs.readFile(screenshotPath);
+                const screenshotBase64 = screenshotBuffer.toString('base64');
+                // Read computed styles if available
+                // @renamed: cssData → stylesData (IP protection)
+                let stylesData;
+                if (stylesPath && await fs.pathExists(stylesPath)) {
+                    try {
+                        const stylesJson = await fs.readJson(stylesPath);
+                        if (stylesJson.computed_styles && Object.keys(stylesJson.computed_styles).length > 0) {
+                            stylesData = { computed_styles: stylesJson.computed_styles };
+                        }
+                    }
+                    catch (err) {
+                        if (this.options.debug) {
+                            console.warn(`Testivai Reporter: [DEBUG] Failed to read styles file for ${metadata.snapshotName}:`, err);
+                        }
+                    }
+                }
+                // @renamed: dom → structure, css → styles (IP protection)
+                const snapshotPayload = {
+                    snapshotName: metadata.snapshotName,
+                    testName: metadata.testName,
+                    timestamp: metadata.timestamp,
+                    url: metadata.url,
+                    viewport: metadata.viewport,
+                    structure: { html: await fs.readFile(structurePath, 'utf-8') },
+                    styles: stylesData,
+                    layout: {
+                        x: layoutData.x,
+                        y: layoutData.y,
+                        width: layoutData.width,
+                        height: layoutData.height,
+                        top: layoutData.y,
+                        left: layoutData.x,
+                        right: layoutData.x + layoutData.width,
+                        bottom: layoutData.y + layoutData.height
+                    },
+                    testivaiConfig: metadata.testivaiConfig,
+                    screenshotData: screenshotBase64
+                };
+                snapshots.push(snapshotPayload);
+            }
+            // Build batch payload matching CDP SDK format
+            const batchPayload = {
+                git: this.gitInfo,
+                browser: this.browserInfo,
+                snapshots,
+                timestamp: Date.now(),
+                runId: this.runId,
+                ci: this.ciInfo,
+            };
+            // Compress and upload (same as CDP SDK)
+            const payloadJson = JSON.stringify(batchPayload);
+            const compressionResult = await this.compressionHelper.compress(payloadJson);
+            if (this.options.debug && compressionResult.compressionRatio > 0) {
+                this.compressionHelper.logCompressionResult(compressionResult);
+            }
+            const headers = {
+                'X-API-KEY': this.options.apiKey,
+                'Content-Type': 'application/json',
+                ...compressionResult.headers,
+            };
+            // Upload to same endpoint as CDP SDK
+            const startBatchResponse = await axios_1.default.post(`${this.options.apiUrl}/api/v1/ingest/start-batch`, compressionResult.data, { headers });
+            const batchId = startBatchResponse.data.batch_id || startBatchResponse.data.batchId;
+            // Show success message (brief in normal mode, detailed in debug mode)
+            if (this.options.debug) {
+                console.log(`Testivai Reporter: [DEBUG] ✓ Uploaded ${snapshots.length} snapshot(s) (Batch ID: ${batchId})`);
+            }
+            else {
+                console.log(`Testivai Reporter: ✓ Uploaded ${snapshots.length} snapshot(s)`);
+            }
+            // Clean up temp files (skip if DEBUG mode is enabled)
+            if (this.options.debug) {
+                console.log(`Testivai Reporter: [DEBUG] Keeping temporary evidence files in: ${this.tempDir}`);
+            }
+            else {
+                await fs.emptyDir(this.tempDir);
+            }
+            // Finalize batch
+            await axios_1.default.post(`${this.options.apiUrl}/api/v1/ingest/finish-batch/${batchId}`, {}, {
+                headers: { 'X-API-KEY': this.options.apiKey },
+            });
+        }
+        catch (error) {
+            // Log error but don't throw - let tests complete normally
+            console.error('Testivai Reporter: ❌ Error:', error.message);
+            if (this.options.debug) {
+                console.error('Error stack:', error.stack);
+                if (error.response) {
+                    console.error('Response status:', error.response.status);
+                    console.error('Response data:', JSON.stringify(error.response.data, null, 2));
+                }
+            }
+            // Don't throw - reporter errors should not crash the test run
+        }
+    }
+}
+exports.TestivAIPlaywrightReporter = TestivAIPlaywrightReporter;
+exports.default = TestivAIPlaywrightReporter;

package/dist/snapshot.d.ts

@@ -0,0 +1,12 @@
+import { Page, TestInfo } from '@playwright/test';
+import { TestivAIConfig } from './types';
+/**
+ * Captures a snapshot of the page, including a screenshot, DOM, and layout data.
+ * The evidence is stored in a temporary directory for the reporter to process later.
+ *
+ * @param page The Playwright Page object.
+ * @param testInfo The Playwright TestInfo object, passed from the test.
+ * @param name An optional unique name for the snapshot. If not provided, a name is generated from the URL.
+ * @param config Optional TestivAI configuration for this snapshot (overrides project defaults).
+ */
+export declare function snapshot(page: Page, testInfo: TestInfo, name?: string, config?: TestivAIConfig): Promise<void>;