[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

[lhidalgomqa]

Hi collages, i have the following code to attach the screenshots in the mochaawesome report if the test failed: import addContext from 'mochawesome/addContext'

// Alternatively you can use CommonJS syntax: // require('./commands')

Cypress.on('test:after:run', (test, runnable) => { if (test.state === 'failed') { let item = runnable const nameParts = [runnable.title] // Iterate through all parents and grab the titles while (item.parent) { nameParts.unshift(item.parent.title) item = item.parent } const fullTestName = nameParts .filter(Boolean) .join(' -- ') // this is how cypress joins the test title fragments const imageUrl = screenshots/${ Cypress.spec.name }/${fullTestName} (failed).png

  addContext({ test }, imageUrl)
}

}) But if i need take a screenshot and add the screenshot to the test because i need check if the test select a button for example, the screenshot doesn't attach correctly. The path is not the correct when i try to check the screenshot: Cannot GET /1_X.cy.js/0_login.png,/1_X.cy.js/screenshots.png,/1_busqueda_guia_medica.cy.js/1_acceso_guia_medica.png,/1_busqueda_guia_medica.cy.js/cypress/resultados/screenshots.png,/1_busqueda_guia_medica.cy.js/2_busqueda_producto.png,/1_busqueda_guia_medica.cy.js/3_medicos_y_centros.png,/1_busqueda_guia_medica.cy.js/4_1_busqueda_medico_o_centro.png,/1_busqueda_guia_medica.cy.js/4_2_busqueda_correcta.png

Have any code or action to attach correctly the screenshots into the mochaawesome report??? Thanks a lot!