[request] Display video/screenshots related to the Cypress Test.

[alucardu]

I would like to see a option to display the generated videos and screenshots in the mocha result. Any chances of this being developed?

[krasnoperov]

@alucardu, you can use addContext feature of mochawesome:

Put next lines into cypress/support/index.js:

import addContext from 'mochawesome/addContext'
Cypress.on('test:after:run', (test, runnable) => {
  if (test.state === 'failed') {
    addContext({ test }, `./${Cypress.spec.name}/${runnable.parent.title.replace(':', '')} -- ${test.title} (failed).png`)
  }
})

[jackgilbertx]

@krasnoperov what would this function look like if we were attaching recorded mp4 videos to the report? Ive tried a few variations of what you have above but wasn't able to get it working for some reason. Thanks in advance

[poplevente]

@alucardu, you can use addContext feature of mochawesome:

Put next lines into cypress/support/index.js:

import addContext from 'mochawesome/addContext'
Cypress.on('test:after:run', (test, runnable) => {
  if (test.state === 'failed') {
    addContext({ test }, `./${Cypress.spec.name}/${runnable.parent.title.replace(':', '')} -- ${test.title} (failed).png`)
  }
})

@krasnoperov this does not seem to work anymore. is there a new way?

[elado]

This worked for me, with both screenshot & video. There was a missing string replace on the test.title in the original code. Also paths depend on where your screenshots/videos go.

// cypress/support/index.js

import addContext from 'mochawesome/addContext';

const titleToFileName = (title) => title.replace(/[:\/]/g, '');

Cypress.on('test:after:run', (test, runnable) => {
    if (test.state === 'failed') {
        const filename = `${titleToFileName(runnable.parent.title)} -- ${titleToFileName(test.title)} (failed).png`;
        addContext({ test }, `../screenshots/${Cypress.spec.name}/${filename}`);
        addContext({ test }, `../videos/${Cypress.spec.name}.mp4`);
    }
});

[TomRiedl]

Thanks @elado it worked great. I had to adjust it a little bit to support more than one level of parents:

import addContext from "mochawesome/addContext";

const titleToFileName = (title) => title.replace(/[:\/]/g, "");

Cypress.on("test:after:run", (test, runnable) =>
{
    if (test.state === "failed")
    {
        let parent = runnable.parent;
        let filename = "";
        while (parent && parent.title)
        {
            filename = `${titleToFileName(parent.title)} -- ${filename}`;
            parent = parent.parent;
        }
        filename += `${titleToFileName(test.title)} (failed).png`;
        addContext({ test }, `../screenshots/${Cypress.spec.name}/${filename}`);
        addContext({ test }, `../videos/${Cypress.spec.name}.mp4`);
    }
});

[tamaker]

Awesome work here! Question -- is it possible to add a 'task' / 'test step' time value to the end of the video URL (i.e. .mp4?t=00:23 ) -- to allow the video to play not the entire mp4, but rather automatically jump to the step that the fail is encountered on?

What would that time value be in terms of a variable name within cypress? I'm guessing it has to exist as a datapoint that we can use.

[noririco]

@elado @TomRiedl Thanks for your comments,

Im using typescript. I get this

const filename = `${titleToFileName( runnable.parent.title )} -- ${titleToFileName( test.title )} (failed).png`;
// Object is possibly 'undefined'.ts(2532)

runnable.parent gives error

(property) Mocha.ITest.parent?: Mocha.ISuite | undefined
@deprecated — .parent has type Mocha.Suite | undefined in Mocha.Test.

any idea ?

UPDATE: this will be fixed here https://github.com/cypress-io/cypress/issues/5795