Inject cypress-image-snapshot diff images to Mochawesome reports

Question

I am using Cypress along with the Mochawesome reporter and the cypress-image-snapshot library. The cypress-image-snapshot library creates screenshots of visual regressions any time a test fails. I am trying to see if there is a way of injecting these images to the final report.

I was able to inject the standard test snapshot to the report since I already know the path of the file. The file name always follows the same pattern so I could build the string easily.

// cypress/support/index.js

import './commands'

const addContext = require('mochawesome/addContext')

Cypress.on('test:after:run', (test, runnable) => {
    if (test.state === 'failed') {
        // Build image path
        const screenshotFileName = `${runnable.parent.title} -- ${test.title} (failed).png`
        addContext({ test }, `assets/${Cypress.spec.name}/${screenshotFileName}`)

        // TODO: Here I need to inject all the images from the snapshots/SPEC_NAME/__diff_output__ directory
        ...
    }
})

I tried creating a Cypress task to access the filesystem and simply read all the files from the specific diff_output folder, hovewer tasks are not available in the Cypress.on('test:after:run') event listener.

Answer 1

I managed to add diff image in mochawesome HTML report from cypress-image-snapshop plugin.

The way I did it is not the most secure but it's the fastest way and actually the only way I found.

Cypress.on('test:after:run', (test, runnable) => {
  if(test.state === 'failed') {
    let screenshot;
    screenshot = `${Cypress.config('screenshotsFolder')}/${Cypress.spec.name}/${runnable.parent.title} -- ${test.title} (failed).png`;
    if(test.err.message.includes('See diff')) {
    // If the test failed due to cypress-image-snapshot the message will always be the same and the plugin gives you in the message the url of the path
      screenshot = test.err.parsedStack[1].message.replace('See diff for details: ', '');
    }
    addContext({test}, {
      title: 'Image',
      value: screenshot
    });
  }
})