snap-ally 0.0.4 → 0.1.0-beta

package/dist/A11yHtmlRenderer.d.ts

@@ -1,11 +1,11 @@
 /**
- * Handles the rendering of HTML reports using EJS templates.
+ * Handles the rendering of HTML reports using static templates and JSON data injection.
  */
 export declare class A11yHtmlRenderer {
     /**
-     * Renders an HTML template and saves it to the specified file.
+     * Renders a static HTML template by copying it and generating the accompanied data payload.
      * @param templateName The template file name in the templates folder.
-     * @param data The data object to pass to EJS.
+     * @param data The data object to pass to the client-side JS app.
      * @param outputFolder The folder where the rendered file will be saved.
      * @param outputFileName The full path of the output file.
      */

package/dist/A11yHtmlRenderer.js

@@ -36,40 +36,53 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.A11yHtmlRenderer = void 0;
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
-const ejs = __importStar(require("ejs"));
 /**
- * Handles the rendering of HTML reports using EJS templates.
+ * Handles the rendering of HTML reports using static templates and JSON data injection.
  */
 class A11yHtmlRenderer {
     /**
-     * Renders an HTML template and saves it to the specified file.
+     * Renders a static HTML template by copying it and generating the accompanied data payload.
      * @param templateName The template file name in the templates folder.
-     * @param data The data object to pass to EJS.
+     * @param data The data object to pass to the client-side JS app.
      * @param outputFolder The folder where the rendered file will be saved.
      * @param outputFileName The full path of the output file.
      */
     async render(templateName, data, outputFolder, outputFileName) {
         // Resolve path relative to this file (dist/A11yHtmlRenderer.js)
-        const templatePath = path.join(__dirname, 'templates', templateName);
-        let templateContent = '';
-        try {
-            templateContent = fs.readFileSync(templatePath, 'utf8');
-        }
-        catch {
+        const templatesDir = path.join(__dirname, 'templates');
+        const templatePath = path.join(templatesDir, templateName);
+        const cssPath = path.join(templatesDir, 'global-report-styles.css');
+        const jsPath = path.join(templatesDir, 'report-app.js');
+        if (!fs.existsSync(templatePath)) {
             throw new Error(`[A11yHtmlRenderer] Template not found: ${templatePath}`);
         }
-        let html = '';
+        if (!fs.existsSync(outputFolder)) {
+            fs.mkdirSync(outputFolder, { recursive: true });
+        }
+        // 1. Copy the pure HTML template to the output location
+        fs.copyFileSync(templatePath, outputFileName);
+        // 2. Wrap the report data in a JS variable and write data.js next to the HTML file
+        const outputDir = path.dirname(outputFileName);
+        const dataJsPath = path.join(outputDir, 'data.js');
+        const jsContent = `window.snapAllyData = ${JSON.stringify(data)};`;
+        fs.writeFileSync(dataJsPath, jsContent, 'utf8');
+        // 3. Copy the global CSS and JS rendering engine next to the HTML file
+        const outCssPath = path.join(outputDir, 'global-report-styles.css');
+        const outJsPath = path.join(outputDir, 'report-app.js');
         try {
-            html = ejs.render(templateContent, data);
+            if (fs.existsSync(cssPath))
+                fs.copyFileSync(cssPath, outCssPath);
         }
-        catch (error) {
-            console.error(`[A11yHtmlRenderer] EJS Render Error (${templateName}):`, error);
-            throw error;
+        catch (e) {
+            console.error('Error copying CSS:', e);
         }
-        if (!fs.existsSync(outputFolder)) {
-            fs.mkdirSync(outputFolder, { recursive: true });
+        try {
+            if (fs.existsSync(jsPath))
+                fs.copyFileSync(jsPath, outJsPath);
+        }
+        catch (e) {
+            console.error('Error copying JS:', e);
         }
-        fs.writeFileSync(outputFileName, html);
     }
     /**
      * Converts ANSI color codes to HTML spans for nicer error display.

package/dist/A11yReportAssets.d.ts

@@ -9,7 +9,7 @@ export declare class A11yReportAssets {
     copyToFolder(destFolder: string, srcPath: string, fileName?: string): string;
     /**
      * Copies the test video if available.
-     * Includes a small retry to ensure Playwright has finished flushing the file.
+     * Includes a more robust retry to ensure Playwright has finished flushing the file.
      */
     copyTestVideo(result: TestResult, destFolder: string): Promise<string>;
     /**

package/dist/A11yReportAssets.js

@@ -57,22 +57,24 @@ class A11yReportAssets {
     }
     /**
      * Copies the test video if available.
-     * Includes a small retry to ensure Playwright has finished flushing the file.
+     * Includes a more robust retry to ensure Playwright has finished flushing the file.
      */
     async copyTestVideo(result, destFolder) {
-        const videoAttachments = result.attachments.filter(a => a.name === 'video');
+        // More flexible matching for video attachments
+        const videoAttachments = result.attachments.filter(a => a.name === 'video' || (a.contentType || '').startsWith('video/'));
         let bestVideo = null;
         let maxSize = -1;
         for (const attachment of videoAttachments) {
             if (!attachment.path)
                 continue;
-            // Retry logic: Wait for file to exist and have non-zero size (up to 2 seconds)
+            // Retry logic: Wait for file to exist and have non-zero size (up to 3 seconds)
             let attempts = 0;
             let isReady = false;
-            while (attempts < 10) {
+            while (attempts < 15) {
                 if (fs.existsSync(attachment.path)) {
                     try {
-                        if (fs.statSync(attachment.path).size > 0) {
+                        const stats = fs.statSync(attachment.path);
+                        if (stats.size > 0) {
                             isReady = true;
                             break;
                         }
@@ -97,12 +99,12 @@ class A11yReportAssets {
                 }
             }
             else {
-                console.warn(`[SnapAlly] Video attachment found but file is missing or empty: ${attachment.path}`);
+                console.warn(`[SnapAlly] Video attachment found but file is missing or empty after retry: ${attachment.path}`);
             }
         }
         if (bestVideo) {
             try {
-                return this.copyToFolder(destFolder, bestVideo);
+                return this.copyToFolder(destFolder, bestVideo, 'video.webm');
             }
             catch (e) {
                 console.error(`[SnapAlly] Failed to copy video: ${e}`);
@@ -116,13 +118,15 @@ class A11yReportAssets {
      */
     copyScreenshots(result, destFolder) {
         return result.attachments
-            .filter(a => a.name === 'screenshot')
+            .filter(a => a.name === 'screenshot' || (a.contentType || '').startsWith('image/'))
             .map(a => {
             if (a.path) {
                 return this.copyToFolder(destFolder, a.path);
             }
             else if (a.body) {
-                return this.writeBuffer(destFolder, `screenshot-${Date.now()}.png`, a.body);
+                const timestamp = Date.now();
+                const name = a.name === 'screenshot' ? `screenshot-${timestamp}.png` : (a.name.endsWith('.png') ? a.name : `${a.name}.png`);
+                return this.writeBuffer(destFolder, name, a.body);
             }
             return '';
         })
@@ -133,14 +137,15 @@ class A11yReportAssets {
      */
     copyPngAttachments(result, destFolder) {
         return result.attachments
-            .filter(a => a.name.endsWith('.png') && a.name !== 'screenshot')
+            .filter(a => (a.name.endsWith('.png') || (a.contentType || '') === 'image/png') && a.name !== 'screenshot')
             .map(a => {
             let name = '';
             if (a.path) {
                 name = this.copyToFolder(destFolder, a.path, a.name);
             }
             else if (a.body) {
-                name = this.writeBuffer(destFolder, a.name, a.body);
+                const safeName = a.name.endsWith('.png') ? a.name : `${a.name}.png`;
+                name = this.writeBuffer(destFolder, safeName, a.body);
             }
             return name ? { path: name, name: a.name } : null;
         })
@@ -152,7 +157,10 @@ class A11yReportAssets {
     copyAllOtherAttachments(result, destFolder) {
         const excludedNames = ['screenshot', 'video', 'A11y'];
         return result.attachments
-            .filter(a => !excludedNames.includes(a.name) && !a.name.endsWith('.png'))
+            .filter(a => !excludedNames.includes(a.name) &&
+            !a.name.endsWith('.png') &&
+            !(a.contentType || '').startsWith('image/') &&
+            !(a.contentType || '').startsWith('video/'))
             .map(a => {
             let name = '';
             if (a.path) {

package/dist/A11yScanner.js

@@ -9,6 +9,7 @@ const playwright_1 = __importDefault(require("@axe-core/playwright"));
 const test_1 = require("@playwright/test");
 const A11yAuditOverlay_1 = require("./A11yAuditOverlay");
 const models_1 = require("./models");
+const A11yTimeUtils_1 = require("./A11yTimeUtils");
 /**
  * Sanitizes a string to be safe for use in file paths and prevents path traversal attacks.
  * Removes or replaces dangerous characters and path separators.
@@ -62,7 +63,17 @@ async function scanA11y(page, testInfo, options = {}) {
     if (options.axeOptions) {
         axeBuilder = axeBuilder.options(options.axeOptions);
     }
-    const axeResults = await axeBuilder.analyze();
+    let axeResults;
+    try {
+        axeResults = await axeBuilder.analyze();
+    }
+    catch (error) {
+        if (error.message && (error.message.includes('Test ended') || error.message.includes('Target page, context or browser has been closed'))) {
+            console.warn(`[SnapAlly] Accessibility scan skipped: ${error.message}`);
+            return;
+        }
+        throw error;
+    }
     const violationCount = axeResults.violations.length;
     if ((showTerminal || showBrowser) && violationCount > 0) {
         const mainMsg = `[A11yScanner] Violations found: ${violationCount}`;
@@ -103,9 +114,9 @@ async function scanA11y(page, testInfo, options = {}) {
                 await overlay.showViolationOverlay({ id: violation.id, help: violation.help }, severityColor);
                 if (await locator.isVisible()) {
                     await overlay.highlightElement(elementSelector, severityColor);
-                    // Allow time for video capture or manual inspection during debug
+                    // Allow a small time for overlay highlight to be visible in video
                     // eslint-disable-next-line playwright/no-wait-for-timeout
-                    await page.waitForTimeout(2000);
+                    await page.waitForTimeout(100);
                     const screenshotName = `a11y-${violation.id}-${errorIdx++}.png`;
                     const buffer = await overlay.captureAndAttachScreenshot(screenshotName, testInfo);
                     // Capture execution steps for context
@@ -143,15 +154,17 @@ async function scanA11y(page, testInfo, options = {}) {
     // Prepare data for the reporter
     const reportData = {
         pageKey,
+        pageUrl: page.url(),
         accessibilityScore: 0, // No longer used, derivation from Lighthouse removed
-        errors,
+        a11yErrors: errors,
         video: 'a11y-scan-video.webm', // Reference name for reporter
         criticalColor: models_1.Severity.critical,
         seriousColor: models_1.Severity.serious,
         moderateColor: models_1.Severity.moderate,
         minorColor: models_1.Severity.minor,
         adoOrganization: process.env.ADO_ORGANIZATION || '',
-        adoProject: process.env.ADO_PROJECT || ''
+        adoProject: process.env.ADO_PROJECT || '',
+        timestamp: A11yTimeUtils_1.A11yTimeUtils.formatDate(new Date())
     };
     await overlay.addTestAttachment(testInfo, 'A11y', JSON.stringify(reportData));
     await overlay.hideViolationOverlay();

package/dist/A11yTimeUtils.d.ts

@@ -6,4 +6,8 @@ export declare class A11yTimeUtils {
      * Formats milliseconds into a human-readable duration string.
      */
     static formatDuration(ms: number): string;
+    /**
+     * Formats a Date object into a human-readable string.
+     */
+    static formatDate(date: Date): string;
 }

package/dist/A11yTimeUtils.js

@@ -20,5 +20,20 @@ class A11yTimeUtils {
         const remainingSeconds = seconds % 60;
         return `${minutes}m ${remainingSeconds.toFixed(0)}s`;
     }
+    /**
+     * Formats a Date object into a human-readable string.
+     */
+    static formatDate(date) {
+        const day = String(date.getDate()).padStart(2, '0');
+        const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+        const month = monthNames[date.getMonth()];
+        const year = date.getFullYear();
+        let hours = date.getHours();
+        const ampm = hours >= 12 ? 'PM' : 'AM';
+        hours = hours % 12 || 12;
+        const formattedHours = String(hours).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        return `${day} ${month} ${year}, ${formattedHours}:${minutes} ${ampm}`;
+    }
 }
 exports.A11yTimeUtils = A11yTimeUtils;

package/dist/SnapAllyReporter.js

@@ -65,7 +65,8 @@ class SnapAllyReporter {
             groupedResults: {},
             wcagErrors: {},
             totalA11yErrorCount: 0,
-            browserSummaries: {}
+            browserSummaries: {},
+            date: ''
         };
         // Track async tasks to ensure they finish before onEnd
         this.tasks = [];
@@ -79,7 +80,7 @@ class SnapAllyReporter {
         this.tasks.push(this.processTestResult(test, result));
     }
     async processTestResult(test, result) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         this.testIndex++;
         const sanitizedTitle = test.title.replace(/[^a-z0-9]+/gi, '-').toLowerCase();
         const testFolderName = `${this.testIndex}-${sanitizedTitle}`;
@@ -91,14 +92,14 @@ class SnapAllyReporter {
         }
         const tags = test.tags.map(t => t.replace('@', ''));
         const statusIcon = models_1.TestStatusIcon[result.status] || 'help';
-        const browser = ((_a = test.parent.project()) === null || _a === void 0 ? void 0 : _a.name) || 'unknown';
+        const projectUse = ((_a = test.parent.project()) === null || _a === void 0 ? void 0 : _a.use) || {};
+        const browser = ((_b = test.parent.project()) === null || _b === void 0 ? void 0 : _b.name) || projectUse.browserName || projectUse.defaultBrowserType || 'chromium';
         const descAnnotation = test.annotations.find(a => a.type === 'Description');
         const description = (descAnnotation === null || descAnnotation === void 0 ? void 0 : descAnnotation.description) || 'No Description';
-        // Prepare steps from annotations
-        const skipTypes = new Set(['Pre Condition', 'Post Condition', 'Description', 'A11y']);
-        const steps = test.annotations
-            .filter(a => !skipTypes.has(a.type))
-            .map(a => a.description || 'Step');
+        // Prepare steps from actual test.step calls instead of just annotations
+        const steps = result.steps
+            .filter(s => s.category === 'test.step')
+            .map(s => s.title);
         const preConditions = test.annotations
             .filter(a => a.type === 'Pre Condition')
             .map(a => a.description || '');
@@ -129,6 +130,7 @@ class SnapAllyReporter {
         let a11yReportPath = undefined;
         let a11yErrorCount = 0;
         let aggregatedA11yErrors = [];
+        let testStatsPageUrl = undefined;
         // Loop through all accessibility scans in this test
         for (const [index, source] of a11yDataSources.entries()) {
             let reportData;
@@ -176,10 +178,10 @@ class SnapAllyReporter {
             // Set the main report path to the LAST one (or maybe first? using last for now)
             a11yReportPath = a11yReportName;
             // Re-apply configuration
-            reportData.criticalColor = ((_b = this.options.colors) === null || _b === void 0 ? void 0 : _b.critical) || '#c92a2a';
-            reportData.seriousColor = ((_c = this.options.colors) === null || _c === void 0 ? void 0 : _c.serious) || '#e67700';
-            reportData.moderateColor = ((_d = this.options.colors) === null || _d === void 0 ? void 0 : _d.moderate) || '#ca8a04';
-            reportData.minorColor = ((_e = this.options.colors) === null || _e === void 0 ? void 0 : _e.minor) || '#0891b2';
+            reportData.criticalColor = ((_c = this.options.colors) === null || _c === void 0 ? void 0 : _c.critical) || '#c92a2a';
+            reportData.seriousColor = ((_d = this.options.colors) === null || _d === void 0 ? void 0 : _d.serious) || '#e67700';
+            reportData.moderateColor = ((_e = this.options.colors) === null || _e === void 0 ? void 0 : _e.moderate) || '#ca8a04';
+            reportData.minorColor = ((_f = this.options.colors) === null || _f === void 0 ? void 0 : _f.minor) || '#0891b2';
             if (this.options.ado) {
                 reportData.adoOrganization = this.options.ado.organization || reportData.adoOrganization;
                 reportData.adoProject = this.options.ado.project || reportData.adoProject;
@@ -187,8 +189,24 @@ class SnapAllyReporter {
             // Sync video name
             if (video)
                 reportData.video = video;
+            // Backfill steps from actual test.step calls if annotations were empty
+            const filteredSteps = steps.filter(s => !s.includes('Capture A11y screenshot'));
+            if (filteredSteps.length > 0) {
+                reportData.a11yErrors.forEach(err => {
+                    err.target.forEach(t => {
+                        if (!t.steps || t.steps.length === 0) {
+                            t.steps = filteredSteps;
+                            t.stepsJson = JSON.stringify(filteredSteps);
+                        }
+                    });
+                });
+            }
             const auditFile = path.join(testResultsFolder, a11yReportName);
             await this.renderer.render('accessibility-report.html', { data: reportData, folderTest: testResultsFolder }, testResultsFolder, auditFile);
+            // Capture the first page URL for the testStats if not already set
+            if (reportData.pageUrl && !testStatsPageUrl) {
+                testStatsPageUrl = reportData.pageUrl;
+            }
             // --- 3. Update Browser-Specific Summary (Partial Aggregation) ---
             if (!this.executionSummary.browserSummaries[browser]) {
                 this.executionSummary.browserSummaries[browser] = {
@@ -206,12 +224,12 @@ class SnapAllyReporter {
                 };
             }
             const bSummary = this.executionSummary.browserSummaries[browser];
-            if (reportData.errors && reportData.errors.length > 0) {
+            if (reportData.a11yErrors && reportData.a11yErrors.length > 0) {
                 // Aggregate counts
-                const scanErrorCount = reportData.errors.reduce((sum, err) => sum + (err.total || 0), 0);
+                const scanErrorCount = reportData.a11yErrors.reduce((sum, err) => sum + (err.total || 0), 0);
                 a11yErrorCount += scanErrorCount;
-                aggregatedA11yErrors.push(...reportData.errors);
-                reportData.errors.forEach((err) => {
+                aggregatedA11yErrors.push(...reportData.a11yErrors);
+                reportData.a11yErrors.forEach((err) => {
                     const rule = err.id;
                     // Local Browser aggregation 
                     if (!bSummary.wcagErrors[rule]) {
@@ -278,13 +296,15 @@ class SnapAllyReporter {
             steps,
             postConditions,
             statusIcon,
+            pageUrl: testStatsPageUrl,
             videoPath: video,
             screenshotPaths: screenshots,
             attachments: allAttachments,
             errors: errorLogs,
             a11yReportPath,
             a11yErrorCount,
-            a11yErrors: aggregatedA11yErrors
+            a11yErrors: aggregatedA11yErrors,
+            colors: this.options.colors
         };
         this.executionSummary.groupedResults[fileGroup].push(testStats);
         // Update summary counts
@@ -305,14 +325,14 @@ class SnapAllyReporter {
         this.executionSummary.total++;
         // Create color config for template
         const colors = {
-            critical: ((_f = this.options.colors) === null || _f === void 0 ? void 0 : _f.critical) || '#c92a2a',
-            serious: ((_g = this.options.colors) === null || _g === void 0 ? void 0 : _g.serious) || '#e67700',
-            moderate: ((_h = this.options.colors) === null || _h === void 0 ? void 0 : _h.moderate) || '#ca8a04',
-            minor: ((_j = this.options.colors) === null || _j === void 0 ? void 0 : _j.minor) || '#0891b2'
+            critical: ((_g = this.options.colors) === null || _g === void 0 ? void 0 : _g.critical) || '#c92a2a',
+            serious: ((_h = this.options.colors) === null || _h === void 0 ? void 0 : _h.serious) || '#e67700',
+            moderate: ((_j = this.options.colors) === null || _j === void 0 ? void 0 : _j.moderate) || '#ca8a04',
+            minor: ((_k = this.options.colors) === null || _k === void 0 ? void 0 : _k.minor) || '#0891b2'
         };
         // Render Step Report
         const indexFile = path.join(testResultsFolder, `execution-${sanitizedTitle}.html`);
-        await this.renderer.render('test-execution-report.html', { result: testStats, colors }, testResultsFolder, indexFile);
+        await this.renderer.render('test-execution-report.html', { ...testStats, colors }, testResultsFolder, indexFile);
     }
     async onEnd(result) {
         var _a, _b, _c, _d;
@@ -322,13 +342,14 @@ class SnapAllyReporter {
         this.executionSummary.duration = A11yTimeUtils_1.A11yTimeUtils.formatDuration(result.duration);
         this.executionSummary.status = result.status;
         this.executionSummary.statusIcon = models_1.TestStatusIcon[result.status] || 'help';
+        this.executionSummary.date = A11yTimeUtils_1.A11yTimeUtils.formatDate(new Date());
         const colors = {
             critical: ((_a = this.options.colors) === null || _a === void 0 ? void 0 : _a.critical) || '#c92a2a',
             serious: ((_b = this.options.colors) === null || _b === void 0 ? void 0 : _b.serious) || '#e67700',
             moderate: ((_c = this.options.colors) === null || _c === void 0 ? void 0 : _c.moderate) || '#ca8a04',
             minor: ((_d = this.options.colors) === null || _d === void 0 ? void 0 : _d.minor) || '#0891b2'
         };
-        await this.renderer.render('execution-summary.html', { results: this.executionSummary, colors }, this.outputFolder, summaryFile);
+        await this.renderer.render('execution-summary.html', { ...this.executionSummary, colors }, this.outputFolder, summaryFile);
         console.log(`\n[SnapAlly] Reports generated in: ${path.resolve(this.outputFolder)}`);
     }
 }

package/dist/models/index.d.ts

@@ -1,8 +1,9 @@
 export interface ReportData {
     pageKey: string;
+    pageUrl?: string;
     accessibilityScore: number;
     video: string;
-    errors: A11yError[];
+    a11yErrors: A11yError[];
     criticalColor: string;
     seriousColor: string;
     moderateColor: string;
@@ -10,6 +11,7 @@ export interface ReportData {
     adoOrganization?: string;
     adoProject?: string;
     adoPat?: string;
+    timestamp?: string;
 }
 export interface A11yError {
     id: string;
@@ -50,6 +52,7 @@ export interface TestResults {
     duration: string;
     description: string;
     status: string;
+    pageUrl?: string;
     browser: string;
     tags: string[];
     preConditions: string[];
@@ -67,8 +70,15 @@ export interface TestResults {
     executionReportPath?: string;
     a11yErrors?: A11yError[];
     a11yErrorCount?: number;
+    colors?: {
+        critical?: string;
+        serious?: string;
+        moderate?: string;
+        minor?: string;
+    };
 }
 export interface TestSummary {
+    date?: string;
     duration: string;
     status: string;
     statusIcon: string;