feat: show custom screenshot title

lib/enhanceReport.js

@@ -1,10 +1,10 @@
 const path = require('path');
 const fse = require('fs-extra');
-const { debugLog, log} = require('./logger');
+const { debugLog, log } = require('./logger');
 
 function enhanceReport(report, mochawesomeOptions, screenshotsDir) {
-  const baseFolder = extrapolateBaseFolder(report.results)
-  
+  const baseFolder = extrapolateBaseFolder(report.results);
+
   report.results.forEach((result) => {
     const { file, fullFile, suites, tests } = result;
 
@@ -89,31 +89,29 @@ function attachMediaToTestContext(context, mochawesomeOptions, screenshotsDir, b
       });
     }
   }
-  
+
   const videoContextIndex = parsedContext.findIndex(
-      (c) => typeof c === 'object' && c.value && c.title.startsWith("cypress-mochawesome-reporter-videos-")
+    (c) => typeof c === 'object' && c.value && c.title.startsWith('cypress-mochawesome-reporter-videos-')
   );
 
   debugLog(`video index: ${videoContextIndex}`);
-  
+
   if (videoContextIndex !== -1) {
     const video = parsedContext[videoContextIndex].value;
     const title = parsedContext[videoContextIndex].title;
     parsedContext.splice(videoContextIndex, 1);
-
-    debugLog(`videos type: ${typeof video}. value: ${JSON.stringify(video)}`)
-    if (!mochawesomeOptions.ignoreVideos && (title !== 'cypress-mochawesome-reporter-videos-passed' || !mochawesomeOptions.videoOnFailOnly)) {
-      parsedContext = parsedContext.concat(
-        createVideoContext(
-            video,
-            baseFolder
-        )
-      )
+
+    debugLog(`videos type: ${typeof video}. value: ${JSON.stringify(video)}`);
+    if (
+      !mochawesomeOptions.ignoreVideos &&
+      (title !== 'cypress-mochawesome-reporter-videos-passed' || !mochawesomeOptions.videoOnFailOnly)
+    ) {
+      parsedContext = parsedContext.concat(createVideoContext(video, baseFolder));
     }
   }
   if (parsedContext.length === 0) {
-    debugLog("No result")
-    return null
+    debugLog('No result');
+    return null;
   }
   const result = JSON.stringify(parsedContext, null, 4);
 
@@ -123,21 +121,27 @@ function attachMediaToTestContext(context, mochawesomeOptions, screenshotsDir, b
 }
 
 function createScreenshotsContextList(screenshots, titleSuffix, mochawesomeOptions, screenshotsDir) {
-  return screenshots.map((screenshot) => ({
-    title: screenshot.title.concat(titleSuffix),
-    value:
-      mochawesomeOptions.embeddedScreenshots === true
-        ? convertImageToBase64(screenshotsDir, screenshot.value)
-        : encodeMediaPath(`screenshots${screenshot.value}`),
-  }));
+  return screenshots.map((screenshotPath) => {
+    const screenshotTitle = screenshotPath.includes('(failed)')
+      ? 'Failed screenshot'.concat(titleSuffix)
+      : `Screenshot (${path.parse(screenshotPath).name})`;
+
+    return {
+      title: screenshotTitle,
+      value:
+        mochawesomeOptions.embeddedScreenshots === true
+          ? convertImageToBase64(screenshotsDir, screenshotPath)
+          : encodeMediaPath(`screenshots${screenshotPath}`),
+    };
+  });
 }
 
 function createVideoContext(video, baseFolder) {
   video = video.replace(baseFolder, '').concat('.mp4');
   const videoPath = path.normalize(`videos/${video}`);
   return {
     title: 'Spec video recording',
-    value: encodeMediaPath(videoPath)
+    value: encodeMediaPath(videoPath),
   };
 }
 
@@ -155,20 +159,20 @@ function encodeMediaPath(p) {
 
 function extrapolateBaseFolder(results) {
   //Snatched from https://rosettacode.org/wiki/Find_common_directory_path#JavaScript
-  const splitStrings = (a, sep = path.sep) => a.map(i => i.split(sep));
-  const elAt = i => a => a[i];
-  const rotate = a => a[0].map((e, i) => a.map(elAt(i)));
-  const allElementsEqual = arr => arr.every(e => e === arr[0]);
-  const commonPath = (input, sep = path.sep) => rotate(splitStrings(input, sep))
-      .filter(allElementsEqual).map(elAt(0)).join(sep);
-  
+  const splitStrings = (a, sep = path.sep) => a.map((i) => i.split(sep));
+  const elAt = (i) => (a) => a[i];
+  const rotate = (a) => a[0].map((e, i) => a.map(elAt(i)));
+  const allElementsEqual = (arr) => arr.every((e) => e === arr[0]);
+  const commonPath = (input, sep = path.sep) =>
+    rotate(splitStrings(input, sep)).filter(allElementsEqual).map(elAt(0)).join(sep);
+
   let directoryArray = [];
   results.forEach((result) => {
-    directoryArray = directoryArray.concat(path.dirname(result.fullFile))
-  })
-  const baseFolder = commonPath(directoryArray)
-  debugLog(`baseFolder: ${baseFolder}`)
-  return baseFolder
+    directoryArray = directoryArray.concat(path.dirname(result.fullFile));
+  });
+  const baseFolder = commonPath(directoryArray);
+  debugLog(`baseFolder: ${baseFolder}`);
+  return baseFolder;
 }
 
 module.exports = {

register.js

@@ -10,16 +10,16 @@ Cypress.Screenshot.defaults({
 });
 
 Cypress.on('test:after:run', (test) => {
-  if (Cypress.config('video')){
+  if (Cypress.config('video')) {
     addContext(
-        { test },
-        {
-          title: 'cypress-mochawesome-reporter-videos-' + test.state,
-          value: Cypress.spec.relative
-        }
-    )
+      { test },
+      {
+        title: 'cypress-mochawesome-reporter-videos-' + test.state,
+        value: Cypress.spec.relative,
+      }
+    );
   }
-  
+
   if (!Cypress.Mochawesome) {
     return;
   }
@@ -55,13 +55,11 @@ Cypress.Commands.add('addTestContext', (context) => {
 function saveScreenshotReference(details) {
   const normalizedScreenshotPath = details.path.replace(screenshotsFolder, '');
 
-  const title = normalizedScreenshotPath.includes('(failed)') ? 'Failed screenshot' : 'Screenshot';
-
   if (!Cypress.Mochawesome) {
     Cypress.Mochawesome = createMochawesomeObject();
   }
 
-  Cypress.Mochawesome.currentAttemptScreenshots.push({ title, value: normalizedScreenshotPath });
+  Cypress.Mochawesome.currentAttemptScreenshots.push(normalizedScreenshotPath);
 }
 
 function createMochawesomeObject() {