snap-ally 0.0.2 → 0.0.4

package/README.md

@@ -1,4 +1,4 @@
-# snap-ally <span aria-hidden="true">📸♿</span>
+# snap-ally 📸♿
 
 [![npm version](https://img.shields.io/npm/v/snap-ally.svg)](https://www.npmjs.com/package/snap-ally)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -7,17 +7,13 @@ A powerful, developer-friendly Playwright reporter for **Accessibility testing**
 
 ---
 
-## <span aria-hidden="true">📺</span> Demo
+## 📺 Demo
 
-<div align="center">
-  <video src="video.webm" width="800" controls aria-label="Snap-Ally accessibility reporter demonstration video showing HTML reports and visual overlays">
-    Your browser does not support the video tag. You can <a href="video.webm">download the video</a> to view it.
-  </video>
-</div>
+**[▶️ Watch the Demo Video](https://www.loom.com/share/853c04f1f76242a699e8f82e54733007)**
 
 ---
 
-## <span aria-hidden="true">✨</span> Features
+## ✨ Features
 
 - **Beautiful HTML Reporting**: Comprehensive summary and detail pages.
 - **Visual Overlays**: Highlights violations directly on the page in screenshots.
@@ -28,7 +24,7 @@ A powerful, developer-friendly Playwright reporter for **Accessibility testing**
 
 ---
 
-## <span aria-hidden="true">🚀</span> Installation
+## 🚀 Installation
 
 ```bash
 npm install snap-ally --save-dev
@@ -36,30 +32,33 @@ npm install snap-ally --save-dev
 
 ---
 
-## <span aria-hidden="true">🛠️</span> Setup
+## 🛠️ Setup
 
 Add `snap-ally` to your `playwright.config.ts`:
 
 ```typescript
-import { defineConfig } from '@playwright/test';
+import { defineConfig } from "@playwright/test";
 
 export default defineConfig({
   reporter: [
-    ['snap-ally', {
-      outputFolder: 'a11y-report',
-      // Optional: Visual Customization
-      colors: {
-        critical: '#dc2626',
-        serious: '#ea580c',
-        moderate: '#f59e0b',
-        minor: '#0ea5e9',
+    [
+      "snap-ally",
+      {
+        outputFolder: "a11y-report",
+        // Optional: Visual Customization
+        colors: {
+          critical: "#dc2626",
+          serious: "#ea580c",
+          moderate: "#f59e0b",
+          minor: "#0ea5e9",
+        },
+        // Optional: Azure DevOps Integration
+        ado: {
+          organization: "your-org",
+          project: "your-project",
+        },
       },
-      // Optional: Azure DevOps Integration
-      ado: {
-        organization: 'your-org',
-        project: 'your-project'
-      }
-    }]
+    ],
   ],
 });
 ```
@@ -71,23 +70,24 @@ export default defineConfig({
 Import and use `scanA11y` within your Playwright tests:
 
 ```typescript
-import { test } from '@playwright/test';
-import { scanA11y } from 'snap-ally';
+import { test } from "@playwright/test";
+import { scanA11y } from "snap-ally";
+
+test("verify page accessibility", async ({ page }, testInfo) => {
+  await page.goto("https://example.com");
 
-test('verify page accessibility', async ({ page }, testInfo) => {
-  await page.goto('https://example.com');
-  
   // Basic scan
   await scanA11y(page, testInfo);
 
   // Advanced scan with configuration
   await scanA11y(page, testInfo, {
+    verbose: true,      // Log results to terminal
+    consoleLog: true,   // Log results to browser console
+    pageKey: 'Homepage', // Custom name for the report file
+    tags: ['wcag2a', 'wcag2aa'], 
     rules: {
-      'color-contrast': { enabled: false }, // Disable specific rule
-    },
-    tags: ['wcag2a', 'wcag2aa'], // Focus on specific WCAG levels
-    verbose: true,
-    pageKey: 'Homepage' // Custom name for the report file
+      'color-contrast': { enabled: false },
+    }
   });
 });
 ```
@@ -98,20 +98,21 @@ test('verify page accessibility', async ({ page }, testInfo) => {
 
 ### Reporter Options (in `playwright.config.ts`)
 
-| Option | Type | Description |
-| --- | --- | --- |
-| `outputFolder` | `string` | Where to save the reports. Defaults to `steps-report`. |
-| `colors` | `object` | Customize severity colors (critical, serious, moderate, minor). |
-| `ado` | `object` | Azure DevOps configuration for deep linking. |
-| `ado.organization` | `string` | Your Azure DevOps organization name. |
-| `ado.project` | `string` | Your Azure DevOps project name. |
+| Option             | Type     | Description                                                     |
+| ------------------ | -------- | --------------------------------------------------------------- |
+| `outputFolder`     | `string` | Where to save the reports. Defaults to `steps-report`.          |
+| `colors`           | `object` | Customize severity colors (critical, serious, moderate, minor). |
+| `ado`              | `object` | Azure DevOps configuration for deep linking.                    |
+| `ado.organization` | `string` | Your Azure DevOps organization name.                            |
+| `ado.project`      | `string` | Your Azure DevOps project name.                                 |
 
 ### `scanA11y` Options
 
 | Option | Type | Description |
 | --- | --- | --- |
 | `include` | `string` | CSS selector to limit the scan to a specific element. |
-| `verbose` | `boolean` | Log violations to the console. Defaults to `true`. |
+| `verbose` | `boolean` | **Terminal Logs**: Print violations to terminal. Defaults to `true`. |
+| `consoleLog` | `boolean` | **Browser Logs**: Print violations to browser console. Defaults to `true`. |
 | `rules` | `object` | Axe-core rule configuration. |
 | `tags` | `string[]` | List of Axe-core tags to run (e.g., `['wcag2aa']`). |
 | `pageKey` | `string` | Custom identifier for the report file name. |

package/dist/A11yScanner.d.ts

@@ -16,6 +16,8 @@ export interface A11yScannerOptions {
     tags?: string[];
     /** Any other Axe-core options to pass to the builder. */
     axeOptions?: Record<string, unknown>;
+    /** Custom identifier for the report file name. */
+    pageKey?: string;
 }
 /**
  * Performs an accessibility audit using Axe and Lighthouse.

package/dist/A11yScanner.js

@@ -9,13 +9,38 @@ const playwright_1 = __importDefault(require("@axe-core/playwright"));
 const test_1 = require("@playwright/test");
 const A11yAuditOverlay_1 = require("./A11yAuditOverlay");
 const models_1 = require("./models");
+/**
+ * Sanitizes a string to be safe for use in file paths and prevents path traversal attacks.
+ * Removes or replaces dangerous characters and path separators.
+ */
+function sanitizePageKey(input) {
+    return input
+        // Remove protocol
+        .replace(/^https?:\/\//, '')
+        // Remove or replace path separators and dangerous characters
+        .replace(/[\/\\:*?"<>|]/g, '-')
+        // Remove any remaining path traversal attempts
+        .replace(/\.\./g, '')
+        // Replace multiple consecutive dashes with a single dash
+        .replace(/-+/g, '-')
+        // Remove leading/trailing dashes
+        .replace(/^-+|-+$/g, '')
+        // Convert to lowercase for consistency
+        .toLowerCase()
+        // Limit length to prevent filesystem issues
+        .substring(0, 200);
+}
 /**
  * Performs an accessibility audit using Axe and Lighthouse.
  */
 async function scanA11y(page, testInfo, options = {}) {
-    var _a;
-    const verbose = (_a = options.verbose) !== null && _a !== void 0 ? _a : true;
-    const overlay = new A11yAuditOverlay_1.A11yAuditOverlay(page, page.url());
+    var _a, _b;
+    const showTerminal = (_a = options.verbose) !== null && _a !== void 0 ? _a : true;
+    const showBrowser = (_b = options.consoleLog) !== null && _b !== void 0 ? _b : true;
+    // Sanitize pageKey to prevent path traversal attacks
+    const rawPageKey = options.pageKey || page.url();
+    const pageKey = sanitizePageKey(rawPageKey);
+    const overlay = new A11yAuditOverlay_1.A11yAuditOverlay(page, pageKey);
     // Configure Axe
     let axeBuilder = new playwright_1.default({ page });
     const target = options.include || options.box;
@@ -39,11 +64,22 @@ async function scanA11y(page, testInfo, options = {}) {
     }
     const axeResults = await axeBuilder.analyze();
     const violationCount = axeResults.violations.length;
-    if (verbose && violationCount > 0) {
-        console.log(`\n[A11yScanner] Violations found: ${violationCount}`);
-        axeResults.violations.forEach((v, i) => {
-            console.log(`  ${i + 1}. ${v.id} [${v.impact}] - ${v.help}`);
-        });
+    if ((showTerminal || showBrowser) && violationCount > 0) {
+        const mainMsg = `[A11yScanner] Violations found: ${violationCount}`;
+        // Prepare all detail messages
+        const detailMessages = axeResults.violations.map((v, i) => `  ${i + 1}. ${v.id} [${v.impact}] - ${v.help}`);
+        // Log to terminal
+        if (showTerminal) {
+            console.log(`\n${mainMsg}`);
+            detailMessages.forEach(msg => console.log(msg));
+        }
+        // Batch log to Browser Console in a single evaluate call
+        if (showBrowser) {
+            await page.evaluate(([mainMsg, details]) => {
+                console.log(`%c ${mainMsg}`, 'color: #ea580c; font-weight: bold; font-size: 12px;');
+                details.forEach((msg) => console.log(msg));
+            }, [mainMsg, detailMessages]);
+        }
     }
     // Fail the test if violations found (softly)
     test_1.expect.soft(violationCount, `Accessibility audit failed with ${violationCount} violations.`).toBe(0);
@@ -106,7 +142,7 @@ async function scanA11y(page, testInfo, options = {}) {
     }
     // Prepare data for the reporter
     const reportData = {
-        pageKey: page.url(),
+        pageKey,
         accessibilityScore: 0, // No longer used, derivation from Lighthouse removed
         errors,
         video: 'a11y-scan-video.webm', // Reference name for reporter

package/dist/SnapAllyReporter.d.ts

@@ -33,6 +33,7 @@ declare class SnapAllyReporter implements Reporter {
     private renderer;
     private options;
     private projectRoot;
+    printsToStdio(): boolean;
     private executionSummary;
     private tasks;
     constructor(options?: AccessibilityReporterOptions);

package/dist/SnapAllyReporter.js

@@ -44,6 +44,9 @@ const fs = __importStar(require("fs"));
  * Generates an execution summary and detailed reports per test.
  */
 class SnapAllyReporter {
+    printsToStdio() {
+        return false;
+    }
     constructor(options = {}) {
         this.testIndex = 0;
         this.assetsManager = new A11yReportAssets_1.A11yReportAssets();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snap-ally",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A custom Playwright reporter for Accessibility testing using Axe, with HTML reporting and Azure DevOps integration.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",