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

[adamgruber]

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

[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`);
    }
});

[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?

[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
cypress-io/cypress#5795