difflens 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+import { Result } from 'axe-core';
+
+interface DiffLensConfig {
+    baseUrl?: string;
+    viewports?: {
+        [key: string]: {
+            width: number;
+            height: number;
+        };
+    };
+    scenarios: Scenario[];
+    threshold?: number;
+    outDir?: string;
+    format?: 'default' | 'json' | 'ai';
+    failOnActionError?: boolean;
+    failOnNavigationError?: boolean;
+}
+interface Viewport {
+    width: number;
+    height: number;
+    label?: string;
+}
+interface Action {
+    type: 'click' | 'type' | 'wait';
+    selector?: string;
+    value?: string;
+    timeout?: number;
+}
+interface Scenario {
+    label: string;
+    path: string;
+    viewports?: Viewport[];
+    actions?: Action[];
+    maskSelectors?: string[];
+    hideSelectors?: string[];
+}
+interface TestResult {
+    scenario: string;
+    timestamp: string;
+    status: 'pass' | 'fail' | 'new';
+    diffPixels: number;
+    diffPercentage: number;
+    screenshotPath: string;
+    diffPath?: string;
+    baselinePath?: string;
+    a11yViolations: Result[];
+    dimensionMismatch?: boolean;
+}
+interface ReportData {
+    timestamp: string;
+    results: TestResult[];
+}
+
+declare const DEFAULT_CONFIG: DiffLensConfig;
+declare function loadConfig(configPath?: string): Promise<DiffLensConfig>;
+
+declare function runTests(config: DiffLensConfig): Promise<boolean>;
+
+declare function formatAiReport(results: TestResult[], outDir: string): string;
+
+export { type Action, DEFAULT_CONFIG, type DiffLensConfig, type ReportData, type Scenario, type TestResult, type Viewport, formatAiReport, loadConfig, runTests };

package/dist/index.js

@@ -0,0 +1,537 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/core/reporters/ai-reporter.ts
+var ai_reporter_exports = {};
+__export(ai_reporter_exports, {
+  formatAiReport: () => formatAiReport
+});
+function formatAiReport(results, outDir) {
+  let output = "DiffLens Test Report\n====================\n\n";
+  const failures = results.filter((r) => r.status === "fail" || r.a11yViolations.length > 0);
+  if (failures.length === 0) {
+    return output + "All tests passed. No visual regressions or accessibility violations found.\n";
+  }
+  output += `Found ${failures.length} issues:
+
+`;
+  failures.forEach((result, index) => {
+    output += `Issue #${index + 1}: ${result.scenario}
+`;
+    output += `----------------------------------------
+`;
+    if (result.status === "fail") {
+      if (result.dimensionMismatch) {
+        output += `[Dimension Mismatch]
+`;
+        output += `  Baseline and current images have different dimensions.
+`;
+      } else if (result.diffPixels > 0) {
+        output += `[Visual Regression]
+`;
+        output += `  Diff Pixels: ${result.diffPixels} (${result.diffPercentage.toFixed(2)}%)
+`;
+        if (result.diffPath) {
+          output += `  Diff Image: ${import_path3.default.relative(process.cwd(), result.diffPath)}
+`;
+        }
+      }
+    }
+    if (result.a11yViolations.length > 0) {
+      output += `[Accessibility Violations]
+`;
+      result.a11yViolations.forEach((v) => {
+        output += `  - [${v.impact}] ${v.help} (${v.id})
+`;
+        output += `    Target: ${v.nodes.map((n) => n.target.join(", ")).join(" | ")}
+`;
+      });
+    }
+    output += "\n";
+  });
+  return output;
+}
+var import_path3;
+var init_ai_reporter = __esm({
+  "src/core/reporters/ai-reporter.ts"() {
+    "use strict";
+    import_path3 = __toESM(require("path"));
+  }
+});
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DEFAULT_CONFIG: () => DEFAULT_CONFIG,
+  formatAiReport: () => formatAiReport,
+  loadConfig: () => loadConfig,
+  runTests: () => runTests
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/config.ts
+var import_path = __toESM(require("path"));
+var import_fs = __toESM(require("fs"));
+var import_esbuild = require("esbuild");
+var DEFAULT_CONFIG = {
+  scenarios: [],
+  threshold: 0.1,
+  outDir: ".difflens"
+};
+async function loadConfig(configPath) {
+  const searchPlaces = [
+    "difflens.config.ts",
+    "difflens.config.js",
+    "difflens.config.mjs",
+    "difflens.config.cjs"
+  ];
+  let resolvedPath;
+  if (configPath) {
+    resolvedPath = import_path.default.resolve(process.cwd(), configPath);
+  } else {
+    for (const place of searchPlaces) {
+      const p = import_path.default.resolve(process.cwd(), place);
+      if (import_fs.default.existsSync(p)) {
+        resolvedPath = p;
+        break;
+      }
+    }
+  }
+  if (!resolvedPath) {
+    console.warn("No configuration file found. Using default config.");
+    return DEFAULT_CONFIG;
+  }
+  try {
+    let importPath = resolvedPath;
+    let isTs = resolvedPath.endsWith(".ts");
+    let tempFile = null;
+    if (isTs) {
+      const outfile = resolvedPath.replace(/\.ts$/, ".js.tmp.mjs");
+      await (0, import_esbuild.build)({
+        entryPoints: [resolvedPath],
+        outfile,
+        bundle: true,
+        platform: "node",
+        format: "esm",
+        external: ["difflens"]
+        // Exclude self if referenced?
+      });
+      importPath = outfile;
+      tempFile = outfile;
+    }
+    const importUrl = `file://${importPath}`;
+    const userConfigModule = await import(importUrl);
+    const userConfig = userConfigModule.default || userConfigModule;
+    if (tempFile && import_fs.default.existsSync(tempFile)) {
+      import_fs.default.unlinkSync(tempFile);
+    }
+    return {
+      ...DEFAULT_CONFIG,
+      ...userConfig
+    };
+  } catch (error) {
+    console.error(`Failed to load configuration from ${resolvedPath}:`, error);
+    throw error;
+  }
+}
+
+// src/core/runner.ts
+var import_playwright2 = require("playwright");
+var import_path4 = __toESM(require("path"));
+var import_fs4 = __toESM(require("fs"));
+
+// src/core/capture.ts
+async function captureScreenshot(page, url, outputPath, options = {}) {
+  if (url) {
+    await page.goto(url, { waitUntil: "networkidle" });
+  }
+  await page.evaluate(() => document.fonts.ready);
+  await page.addStyleTag({
+    content: `
+      *, *::before, *::after {
+        animation-duration: 0s !important;
+        transition-duration: 0s !important;
+        animation-iteration-count: 1 !important;
+      }
+    `
+  });
+  if (options.hideSelectors) {
+    for (const selector of options.hideSelectors) {
+      await page.locator(selector).evaluate((el) => el.style.visibility = "hidden");
+    }
+  }
+  if (options.maskSelectors) {
+    for (const selector of options.maskSelectors) {
+      await page.locator(selector).evaluate((el) => el.style.backgroundColor = "#FF00FF");
+    }
+  }
+  await page.screenshot({
+    path: outputPath,
+    fullPage: options.fullPage ?? true,
+    animations: "disabled"
+  });
+}
+
+// src/core/compare.ts
+var import_fs2 = __toESM(require("fs"));
+var import_pngjs = require("pngjs");
+var import_pixelmatch = __toESM(require("pixelmatch"));
+function compareImages(img1Path, img2Path, diffPath, threshold = 0.1) {
+  const img1 = import_pngjs.PNG.sync.read(import_fs2.default.readFileSync(img1Path));
+  const img2 = import_pngjs.PNG.sync.read(import_fs2.default.readFileSync(img2Path));
+  const { width, height } = img1;
+  const diff = new import_pngjs.PNG({ width, height });
+  if (img1.width !== img2.width || img1.height !== img2.height) {
+    return {
+      diffPixels: -1,
+      diffPercentage: -1,
+      isSameDimensions: false
+    };
+  }
+  const diffPixels = (0, import_pixelmatch.default)(
+    img1.data,
+    img2.data,
+    diff.data,
+    width,
+    height,
+    { threshold }
+  );
+  import_fs2.default.writeFileSync(diffPath, import_pngjs.PNG.sync.write(diff));
+  const totalPixels = width * height;
+  const diffPercentage = diffPixels / totalPixels * 100;
+  return {
+    diffPixels,
+    diffPercentage,
+    isSameDimensions: true
+  };
+}
+
+// src/core/a11y.ts
+var import_playwright = __toESM(require("@axe-core/playwright"));
+async function runAxeAudit(page) {
+  const results = await new import_playwright.default({ page }).analyze();
+  if (results.violations.length > 0) {
+    console.error(`Found ${results.violations.length} accessibility violations:`);
+    results.violations.forEach((violation) => {
+      console.error(`- [${violation.impact}] ${violation.help} (${violation.id})`);
+      violation.nodes.forEach((node) => {
+        console.error(`  Target: ${node.target}`);
+      });
+    });
+  }
+  return {
+    violations: results.violations
+  };
+}
+
+// src/core/report.ts
+var import_fs3 = __toESM(require("fs"));
+var import_path2 = __toESM(require("path"));
+function generateHtmlReport(data, outDir) {
+  const html = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DiffLens Report</title>
+  <style>
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 20px; background: #f5f5f5; }
+    .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+    h1 { color: #333; border-bottom: 2px solid #eee; padding-bottom: 10px; }
+    .summary { margin-bottom: 20px; padding: 15px; background: #eef; border-radius: 4px; }
+    .scenario { border: 1px solid #ddd; margin-bottom: 20px; border-radius: 4px; overflow: hidden; }
+    .scenario-header { padding: 10px 15px; background: #f9f9f9; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
+    .scenario-title { font-weight: bold; font-size: 1.1em; }
+    .status { padding: 4px 8px; border-radius: 4px; font-size: 0.9em; font-weight: bold; color: white; }
+    .status.pass { background: #28a745; }
+    .status.fail { background: #dc3545; }
+    .status.new { background: #17a2b8; }
+    .scenario-body { padding: 15px; }
+    .images { display: flex; gap: 20px; margin-bottom: 15px; overflow-x: auto; }
+    .image-container { flex: 0 0 auto; }
+    .image-container img { max-width: 300px; border: 1px solid #ddd; border-radius: 4px; }
+    .image-label { font-size: 0.9em; color: #666; margin-bottom: 5px; }
+    .a11y { margin-top: 15px; border-top: 1px solid #eee; padding-top: 10px; }
+    .a11y-title { font-weight: bold; color: #666; margin-bottom: 5px; }
+    .violation { margin-bottom: 5px; color: #d63384; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>DiffLens Report</h1>
+    <div class="summary">
+      <p><strong>Generated at:</strong> ${new Date(data.timestamp).toLocaleString()}</p>
+      <p><strong>Total Scenarios:</strong> ${data.results.length}</p>
+      <p><strong>Failed:</strong> ${data.results.filter((r) => r.status === "fail").length}</p>
+    </div>
+
+    ${data.results.map((result) => `
+      <div class="scenario">
+        <div class="scenario-header">
+          <span class="scenario-title">${result.scenario}</span>
+          <span class="status ${result.status}">${result.status.toUpperCase()}</span>
+        </div>
+        <div class="scenario-body">
+          <div class="images">
+            ${result.baselinePath ? `
+              <div class="image-container">
+                <div class="image-label">Baseline</div>
+                <img src="${import_path2.default.relative(import_path2.default.resolve(outDir), import_path2.default.resolve(result.baselinePath))}" alt="Baseline">
+              </div>
+            ` : ""}
+            <div class="image-container">
+              <div class="image-label">Current</div>
+              <img src="${import_path2.default.relative(import_path2.default.resolve(outDir), import_path2.default.resolve(result.screenshotPath))}" alt="Current">
+            </div>
+            ${result.diffPath ? `
+              <div class="image-container">
+                <div class="image-label">Diff</div>
+                <img src="${import_path2.default.relative(import_path2.default.resolve(outDir), import_path2.default.resolve(result.diffPath))}" alt="Diff">
+              </div>
+            ` : ""}
+          </div>
+          
+          ${result.diffPixels === -1 ? `
+            <p style="color: #dc3545; font-weight: bold;">[FAIL] Dimension mismatch! Baseline and current images have different sizes.</p>
+          ` : `
+            <p><strong>Diff:</strong> ${result.diffPixels} pixels (${result.diffPercentage.toFixed(2)}%)</p>
+          `}
+
+          ${result.a11yViolations.length > 0 ? `
+            <div class="a11y">
+              <div class="a11y-title">Accessibility Violations (${result.a11yViolations.length})</div>
+              ${result.a11yViolations.map((v) => `
+                <div class="violation">
+                  [${v.impact}] ${v.help} (${v.id})
+                </div>
+              `).join("")}
+            </div>
+          ` : '<div class="a11y"><div class="a11y-title">No Accessibility Violations</div></div>'}
+        </div>
+      </div>
+    `).join("")}
+  </div>
+</body>
+</html>
+  `;
+  import_fs3.default.writeFileSync(import_path2.default.join(outDir, "index.html"), html);
+  import_fs3.default.writeFileSync(import_path2.default.join(outDir, "report.json"), JSON.stringify(data, null, 2));
+  console.log(`Report generated: ${import_path2.default.join(outDir, "index.html")}`);
+}
+
+// src/core/runner.ts
+async function runTests(config) {
+  const browser = await import_playwright2.chromium.launch();
+  const context = await browser.newContext();
+  const page = await context.newPage();
+  const outDir = config.outDir || ".difflens";
+  const dirs = {
+    baseline: import_path4.default.join(outDir, "baseline"),
+    current: import_path4.default.join(outDir, "current"),
+    diff: import_path4.default.join(outDir, "diff")
+  };
+  Object.values(dirs).forEach((dir) => {
+    if (!import_fs4.default.existsSync(dir)) {
+      import_fs4.default.mkdirSync(dir, { recursive: true });
+    }
+  });
+  const results = [];
+  if (!config.scenarios || config.scenarios.length === 0) {
+    console.error("Error: No scenarios defined in configuration.");
+    return false;
+  }
+  for (const scenario of config.scenarios) {
+    const viewports = scenario.viewports || config.viewports && Object.entries(config.viewports).map(([label, { width, height }]) => ({ label, width, height })) || [{ width: 1280, height: 720, label: "default" }];
+    for (const viewport of viewports) {
+      const viewportLabel = viewport.label || `${viewport.width}x${viewport.height}`;
+      const label = viewports.length > 1 || viewport.label ? `${scenario.label}-${viewportLabel}` : scenario.label;
+      console.error(`Running scenario: ${label}`);
+      const url = config.baseUrl ? new URL(scenario.path, config.baseUrl).toString() : scenario.path;
+      await page.setViewportSize({ width: viewport.width, height: viewport.height });
+      let retries = 2;
+      let navigationSuccess = false;
+      while (retries >= 0) {
+        try {
+          await page.goto(url, { waitUntil: "networkidle" });
+          navigationSuccess = true;
+          break;
+        } catch (e) {
+          if (retries === 0) {
+            console.error(`  [WARN] Navigation failed: ${e}`);
+          } else {
+            console.error(`  [WARN] Navigation failed, retrying... (${retries} attempts left)`);
+            retries--;
+            await page.waitForTimeout(1e3);
+          }
+        }
+      }
+      if (!navigationSuccess) {
+        if (config.failOnNavigationError) {
+          console.error(`  [FAIL] Navigation failed.`);
+          results.push({
+            scenario: label,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            status: "fail",
+            diffPixels: 0,
+            diffPercentage: 0,
+            screenshotPath: "",
+            a11yViolations: []
+          });
+          continue;
+        }
+      }
+      let actionFailed = false;
+      if (scenario.actions) {
+        for (const action of scenario.actions) {
+          console.error(`  Action: ${action.type} ${action.selector || ""}`);
+          try {
+            if (action.type === "click" && action.selector) {
+              await page.click(action.selector);
+            } else if (action.type === "type" && action.selector && action.value) {
+              await page.fill(action.selector, action.value);
+            } else if (action.type === "wait" && action.timeout) {
+              await page.waitForTimeout(action.timeout);
+            }
+          } catch (e) {
+            console.error(`  [WARN] Action failed: ${e}`);
+            actionFailed = true;
+            if (config.failOnActionError) {
+              break;
+            }
+          }
+        }
+        await page.waitForTimeout(500);
+      }
+      const currentPath = import_path4.default.join(dirs.current, `${label}.png`);
+      retries = 2;
+      while (retries >= 0) {
+        try {
+          await captureScreenshot(page, null, currentPath, {
+            fullPage: true,
+            maskSelectors: scenario.maskSelectors,
+            hideSelectors: scenario.hideSelectors
+          });
+          break;
+        } catch (e) {
+          if (retries === 0) throw e;
+          console.error(`  [WARN] Screenshot failed, retrying... (${retries} attempts left)`);
+          retries--;
+          await page.waitForTimeout(1e3);
+        }
+      }
+      console.error(`  Screenshot captured: ${currentPath}`);
+      const a11yResult = await runAxeAudit(page);
+      if (a11yResult.violations.length > 0) {
+        console.error(`  Accessibility violations: ${a11yResult.violations.length}`);
+      }
+      const baselinePath = import_path4.default.join(dirs.baseline, `${label}.png`);
+      const diffPath = import_path4.default.join(dirs.diff, `${label}.png`);
+      let status = "new";
+      let diffPixels = 0;
+      let diffPercentage = 0;
+      let finalDiffPath;
+      let finalBaselinePath;
+      let dimensionMismatch = false;
+      if (import_fs4.default.existsSync(baselinePath)) {
+        finalBaselinePath = baselinePath;
+        console.error("  Comparing with baseline...");
+        const result = compareImages(baselinePath, currentPath, diffPath, config.threshold);
+        diffPixels = result.diffPixels;
+        diffPercentage = result.diffPercentage;
+        dimensionMismatch = !result.isSameDimensions;
+        if (!result.isSameDimensions) {
+          status = "fail";
+          console.error(`  [FAIL] Dimension mismatch! Baseline and current images have different sizes.`);
+        } else if (result.diffPixels > 0) {
+          status = "fail";
+          finalDiffPath = diffPath;
+          console.error(`  [FAIL] Visual regression detected! Diff pixels: ${result.diffPixels} (${result.diffPercentage.toFixed(2)}%)`);
+          console.error(`  Diff image saved to: ${diffPath}`);
+        } else {
+          status = "pass";
+          console.error("  [PASS] No visual regression detected.");
+        }
+      } else {
+        console.error("  Baseline not found. Saving current as baseline.");
+        import_fs4.default.copyFileSync(currentPath, baselinePath);
+        console.error(`  Baseline saved to: ${baselinePath}`);
+        finalBaselinePath = baselinePath;
+      }
+      if (a11yResult.violations.length > 0) {
+        status = "fail";
+        console.error(`  [FAIL] Accessibility violations detected: ${a11yResult.violations.length}`);
+      }
+      if (actionFailed && config.failOnActionError) {
+        status = "fail";
+        console.error(`  [FAIL] Action execution failed.`);
+      }
+      results.push({
+        scenario: label,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        status,
+        diffPixels,
+        diffPercentage,
+        screenshotPath: currentPath,
+        diffPath: finalDiffPath,
+        baselinePath: finalBaselinePath,
+        a11yViolations: a11yResult.violations,
+        dimensionMismatch
+      });
+    }
+  }
+  await browser.close();
+  const reportData = {
+    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+    results
+  };
+  if (config.format === "json") {
+    console.log(JSON.stringify(results, null, 2));
+  } else if (config.format === "ai") {
+    const { formatAiReport: formatAiReport2 } = await Promise.resolve().then(() => (init_ai_reporter(), ai_reporter_exports));
+    console.log(formatAiReport2(results, outDir));
+  } else {
+    generateHtmlReport(reportData, outDir);
+  }
+  const hasFailures = results.some((r) => r.status === "fail");
+  return !hasFailures;
+}
+
+// src/index.ts
+init_ai_reporter();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_CONFIG,
+  formatAiReport,
+  loadConfig,
+  runTests
+});

package/dist/index.mjs

@@ -0,0 +1,14 @@
+import {
+  DEFAULT_CONFIG,
+  loadConfig,
+  runTests
+} from "./chunk-LVDSHTE4.mjs";
+import {
+  formatAiReport
+} from "./chunk-4Q2LAHUO.mjs";
+export {
+  DEFAULT_CONFIG,
+  formatAiReport,
+  loadConfig,
+  runTests
+};

package/dist/mcp-server.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/mcp-server.d.ts

@@ -0,0 +1,2 @@
+
+export {  }