dceky 1.2.1 → 1.2.3

package/start/helpers/embedScreenshotsInReportData.ts

@@ -0,0 +1,171 @@
+/* eslint-disable no-console */
+import fs from 'fs';
+import path from 'path';
+
+type Screenshot = {
+  href: string;
+  matchKey: string;
+};
+
+/**
+ * Normalize Cypress screenshot names and Mochawesome test titles for matching.
+ * @author Yuen Ler Chow
+ * @param value raw screenshot filename or test title
+ * @returns normalized value used for screenshot/test matching
+ */
+const normalize = (value: string): string => {
+  return (
+    value
+      .replace(/\s+\(failed\)(?:\s+\(attempt\s+\d+\))?$/i, '')
+      .replace(/\s+\(attempt\s+\d+\)$/i, '')
+      .replace(/[^a-z0-9]+/gi, '')
+      .toLowerCase()
+  );
+};
+
+/**
+ * Recursively collect screenshots and store paths relative to the HTML report.
+ * @author Yuen Ler Chow
+ * @param dir screenshot directory to scan
+ * @param reportDir directory where marge will generate the HTML report
+ * @returns screenshot metadata used for report embedding
+ */
+const collectScreenshots = (dir: string, reportDir: string): Screenshot[] => {
+  if (!fs.existsSync(dir)) {
+    return [];
+  }
+
+  return fs.readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const entryPath = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      return collectScreenshots(entryPath, reportDir);
+    }
+
+    if (!entry.isFile() || !entry.name.endsWith('.png')) {
+      return [];
+    }
+
+    return [{
+      href: path.relative(reportDir, entryPath).replace(/\\/g, '/'),
+      matchKey: normalize(entry.name.replace(/\.png$/i, '')),
+    }];
+  });
+};
+
+/**
+ * Convert Mochawesome's context field into an array while preserving existing entries.
+ * @author Yuen Ler Chow
+ * @param context raw Mochawesome context value
+ * @returns context entries as an array
+ */
+const getContextItems = (context: any): any[] => {
+  if (!context) {
+    return [];
+  }
+
+  if (Array.isArray(context)) {
+    return context;
+  }
+
+  if (typeof context !== 'string') {
+    return [context];
+  }
+
+  try {
+    const parsed = JSON.parse(context);
+    return Array.isArray(parsed) ? parsed : [parsed];
+  } catch {
+    return [context];
+  }
+};
+
+/**
+ * Walk a Mochawesome report node and attach matching screenshots to failed tests.
+ * @author Yuen Ler Chow
+ * @param node Mochawesome report node, suite, test, or array of nodes
+ * @param screenshots screenshots available for matching
+ * @returns number of failed tests that received screenshot context
+ */
+const embedScreenshotsInNode = (node: any, screenshots: Screenshot[]): number => {
+  if (!node || typeof node !== 'object') {
+    return 0;
+  }
+
+  if (Array.isArray(node)) {
+    return node.reduce((sum, child) => {
+      return sum + embedScreenshotsInNode(child, screenshots);
+    }, 0);
+  }
+
+  let numEmbedded = 0;
+  if (node.fail) {
+    const testKey = normalize(node.fullTitle || node.title || '');
+    const matches = screenshots.filter((screenshot) => {
+      return screenshot.matchKey.endsWith(testKey);
+    });
+
+    if (matches.length > 0) {
+      const contextItems = getContextItems(node.context);
+      const existingHrefs = new Set(
+        contextItems.map((item) => {
+          return typeof item === 'string' ? item : item.value;
+        }),
+      );
+
+      matches.forEach((screenshot, index) => {
+        if (!existingHrefs.has(screenshot.href)) {
+          contextItems.push({
+            title: matches.length === 1 ? 'Screenshot' : `Screenshot ${index + 1}`,
+            value: screenshot.href,
+          });
+        }
+      });
+
+      // eslint-disable-next-line no-param-reassign
+      node.context = JSON.stringify(contextItems.length === 1 ? contextItems[0] : contextItems, null, 2);
+      numEmbedded += 1;
+    }
+  }
+
+  return (
+    numEmbedded
+    + embedScreenshotsInNode(node.suites, screenshots)
+    + embedScreenshotsInNode(node.tests, screenshots)
+  );
+};
+
+/**
+ * Add screenshot context to failed tests in a merged Mochawesome JSON report.
+ * @author Yuen Ler Chow
+ * @param opts object of arguments
+ * @param opts.reportDataPath path to report-data.json
+ * @param opts.screenshotsDir path to Cypress screenshots for this report
+ * @param opts.reportDir path where marge will generate the HTML report
+ */
+const embedScreenshotsInReportData = (
+  opts: {
+    reportDataPath: string,
+    screenshotsDir: string,
+    reportDir: string,
+  },
+): void => {
+  const { reportDataPath, screenshotsDir, reportDir } = opts;
+  const screenshots = collectScreenshots(screenshotsDir, reportDir);
+  if (!fs.existsSync(reportDataPath) || screenshots.length === 0) {
+    return;
+  }
+
+  const report = JSON.parse(fs.readFileSync(reportDataPath, 'utf8'));
+  const numEmbedded = embedScreenshotsInNode(report.results, screenshots);
+
+  if (numEmbedded === 0) {
+    console.warn('⚠️ Screenshots were found, but none matched failed tests in the Mochawesome report.');
+    return;
+  }
+
+  fs.writeFileSync(reportDataPath, JSON.stringify(report, null, 2));
+  console.log(`   ✅ Embedded screenshots into ${numEmbedded} failed test(s)`);
+};
+
+export default embedScreenshotsInReportData;

package/start/helpers/executeCypress.ts

@@ -44,7 +44,7 @@ const executeCypress = async (
   console.log(`Headless: ${isHeadless}`);
   if (isHeadless) {
     console.log(`E2E test folder: ${e2eTestFolder}`);
-    console.log(`Threads per combo: ${threadsPerCombo}`);
+    console.log(`Num Test Files in Parallel Per Combo: ${threadsPerCombo}`);
   }
   console.log('═══════════════════════════════════════════════════════════\n');
 

package/start/helpers/generateHtmlReport.ts

@@ -3,6 +3,7 @@ import { execSync } from 'child_process';
 import path from 'path';
 import { existsSync } from 'fs';
 import getRootPath from './getRootPath';
+import embedScreenshotsInReportData from './embedScreenshotsInReportData';
 
 /**
  * Generate HTML report from merged JSON report using mochawesome-report-generator (marge)
@@ -31,6 +32,11 @@ const generateHtmlReport = (
     `${profileName}-${browserName}`,
     'report',
   );
+  const screenshotsDir = path.join(
+    resultsDir,
+    `${profileName}-${browserName}`,
+    'screenshots',
+  );
   const expectedHtmlPath = path.join(reportDir, 'report-data.html');
 
   console.log(`\n📄 Generate HTML Report Debug for ${profileName} + ${browserName}:`);
@@ -44,6 +50,12 @@ const generateHtmlReport = (
   }
 
   try {
+    embedScreenshotsInReportData({
+      reportDataPath,
+      screenshotsDir,
+      reportDir,
+    });
+
     const command = `npx marge "${reportDataPath}" --reportDir "${reportDir}"`;
 
     console.log(`   Running: ${command}`);

package/start/helpers/getCypressDetectedBrowsersForChooser.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { spawnSync } from 'child_process';
+import { spawn } from 'child_process';
 
 // Import helpers
 import getRootPath from './getRootPath';
@@ -12,33 +12,51 @@ import AVAILABLE_BROWSERS from '../constants/AVAILABLE_BROWSERS';
  * `npx cypress info` reports (`- Name:` lines), plus Webkit (always shown
  * because `cypress info` omits WebKit; https://github.com/cypress-io/cypress/issues/27304).
  * @author Yuen Ler Chow
+ * @returns promise containing browsers to show in the chooser
  */
-const getCypressDetectedBrowsersForChooser = (): typeof AVAILABLE_BROWSERS => {
+const getCypressDetectedBrowsersForChooser = (): Promise<typeof AVAILABLE_BROWSERS> => {
   const root = getRootPath();
-  const result = spawnSync('npx', ['cypress', 'info'], {
-    cwd: root,
-    encoding: 'utf8',
-    shell: true,
-    maxBuffer: 10 * 1024 * 1024,
-  });
 
-  const detected = new Set<string>();
-  if (!result.error && result.status === 0) {
-    const text = `${result.stdout ?? ''}\n${result.stderr ?? ''}`;
-    text.split('\n').forEach((line) => {
-      const m = line.match(/^\s*-\s*Name:\s*(\S+)/);
-      if (m) {
-        const [, name] = m;
-        detected.add(name.toLowerCase());
-      }
+  return new Promise((resolve) => {
+    const detected = new Set<string>();
+    let output = '';
+    const cypressInfo = spawn('npx', ['cypress', 'info'], {
+      cwd: root,
+      shell: true,
+    });
+
+    cypressInfo.stdout.on('data', (chunk) => {
+      output += chunk.toString();
+    });
+    cypressInfo.stderr.on('data', (chunk) => {
+      output += chunk.toString();
     });
-  } else {
-    console.warn('Could not detect installed browsers (cypress info failed).');
-  }
 
-  return AVAILABLE_BROWSERS.filter((b) => {
-    // Always include Webkit in the chooser because "npx cypress info" omits WebKit
-    return b.name === 'webkit' || detected.has(b.name);
+    cypressInfo.on('error', () => {
+      console.warn('Could not detect installed browsers (cypress info failed).');
+      resolve([]);
+    });
+
+    cypressInfo.on('close', (code) => {
+      if (code !== 0) {
+        console.warn('Could not detect installed browsers (cypress info failed).');
+      } else {
+        output.split('\n').forEach((line) => {
+          const match = line.match(/^\s*-\s*Name:\s*(\S+)/);
+          if (match) {
+            const [, name] = match;
+            detected.add(name.toLowerCase());
+          }
+        });
+      }
+
+      resolve(
+        AVAILABLE_BROWSERS.filter((b) => {
+          // Always include Webkit in the chooser because "npx cypress info" omits WebKit
+          return b.name === 'webkit' || detected.has(b.name);
+        }),
+      );
+    });
   });
 };
 

package/start/helpers/mergeAllReportsAndGenerateHtml.ts

@@ -50,6 +50,64 @@ const annotateMochawesomeSuites = (node: any, label: string): void => {
   }
 };
 
+/**
+ * Rewrite screenshot paths so they resolve from the combined all-runs.html report.
+ * @author Yuen Ler Chow
+ * @param node Mochawesome report node, suite, test, or array of nodes
+ * @param comboFolderName folder name for the profile+browser run
+ */
+const rewriteScreenshotContextPaths = (node: any, comboFolderName: string): void => {
+  if (!node || typeof node !== 'object') {
+    return;
+  }
+
+  if (Array.isArray(node)) {
+    node.forEach((child: any) => {
+      rewriteScreenshotContextPaths(child, comboFolderName);
+    });
+    return;
+  }
+
+  if (typeof node.context === 'string') {
+    try {
+      const parsed = JSON.parse(node.context);
+      const contextItems = Array.isArray(parsed) ? parsed : [parsed];
+      let didRewrite = false;
+
+      contextItems.forEach((context) => {
+        if (
+          typeof context !== 'string'
+          && typeof context.value === 'string'
+          && context.value.startsWith('../screenshots/')
+        ) {
+          // eslint-disable-next-line no-param-reassign
+          context.value = `${comboFolderName}/${context.value.replace(/^\.\.\//, '')}`;
+          didRewrite = true;
+        }
+      });
+
+      if (didRewrite) {
+        // eslint-disable-next-line no-param-reassign
+        node.context = JSON.stringify(Array.isArray(parsed) ? contextItems : contextItems[0], null, 2);
+      }
+    } catch {
+      // Ignore non-JSON contexts generated outside of ky.
+    }
+  }
+
+  if (Array.isArray(node.suites)) {
+    node.suites.forEach((suite: any) => {
+      rewriteScreenshotContextPaths(suite, comboFolderName);
+    });
+  }
+
+  if (Array.isArray(node.tests)) {
+    node.tests.forEach((test: any) => {
+      rewriteScreenshotContextPaths(test, comboFolderName);
+    });
+  }
+};
+
 /**
  * Merge all per-combination mochawesome JSON reports into a single JSON
  * and generate one combined HTML report for all runs.
@@ -80,12 +138,14 @@ const mergeAllReportsAndGenerateHtml = (
       const raw = fs.readFileSync(jsonPath, 'utf-8');
       const data = JSON.parse(raw);
       const label = `[${result.profileName}][${result.browser}] `;
+      const comboFolderName = `${result.profileName}-${result.browser}`;
 
       if (Array.isArray(data.results)) {
         data.results.forEach((res: any) => {
           if (res && res.suites) {
             annotateMochawesomeSuites(res.suites, label);
           }
+          rewriteScreenshotContextPaths(res, comboFolderName);
         });
       }
 

package/start/helpers/reportHomepage.ejs

@@ -179,11 +179,20 @@
       background: #115293;
       border-color: #115293;
     }
-    .screenshots-header {
+    .screenshots-details {
       margin-top: 0.875rem;
+      border-top: 0.0625rem solid #e5e5e5;
+      padding-top: 0.75rem;
+    }
+    .screenshots-details summary {
+      cursor: pointer;
       font-weight: 600;
+      color: #333;
+      list-style-position: inside;
     }
     .screenshot-list {
+      margin-top: 0.625rem;
+      margin-bottom: 0;
       padding-left: 1.25rem;
       padding-right: 0.5rem;
     }
@@ -265,12 +274,14 @@
             <p class="no-report">Report not available</p>
             <% } %>
             <% if (report.screenshots && report.screenshots.length > 0) { %>
-            <div class="screenshots-header">📸 Screenshots from failed tests</div>
-            <ul class="screenshot-list">
-              <% report.screenshots.forEach((screenshot) => { %>
-              <li><a href="<%= screenshot.href %>" target="_blank"><%= screenshot.name %></a></li>
-              <% }) %>
-            </ul>
+            <details class="screenshots-details">
+              <summary>Screenshots from failed tests (<%= report.screenshots.length %>)</summary>
+              <ul class="screenshot-list">
+                <% report.screenshots.forEach((screenshot) => { %>
+                <li><a href="<%= screenshot.href %>" target="_blank"><%= screenshot.name %></a></li>
+                <% }) %>
+              </ul>
+            </details>
             <% } %>
           </div>
           <% }) %>