Better API for path to failed screenshot (for inclusion in HTML reports)

[rkrisztian]

What would you like?

With Cypress 8, I use code like this to add a screenshot in the mochawesome report for failed tests:

Cypress.on('test:after:run', (test, runnable) => {
  if (test.state === 'failed') {
    const screenshotDir = `../screenshots/${Cypress.spec.name}`;
    const screenshotFileBaseName =
      runnable.titlePath().join(' -- ').replace(/[:/]/g, '') +
      (test.hookName ? ` -- ${test.hookName} hook` : '');
    const screenshotFileName = encodeURIComponent(`${screenshotFileBaseName} (failed).png`);
    addContext({ test }, { title: 'Screenshot', value: `${screenshotDir}/${screenshotFileName}` }); 

    if (Cypress.config('video')) {
      const videoFileName = encodeURIComponent(`${Cypress.spec.name}.mp4`);
      addContext({ test }, { title: 'Video', value: `../videos/${videoFileName}` }); 
    }
  }
});

With previous versions of Cypress it used to look less hardcoded because I didn't need to deal with absolute paths:

Cypress.on('test:after:run', (test, runnable) => {
  if (test.state === 'failed') {
    const screenshotDir = `${Cypress.config('screenshotsFolder')}/${Cypress.spec.name}`;
    const screenshot = `${screenshotDir}/${runnable.titlePath().join(' -- ')} (failed).png`;
    addContext({ test }, screenshot);
  }
});

So this API keeps changing, and now I suspect I'm also using internal API, which feels wrong. I need something easier to use and something more stable over time.

Why is this needed?

This is also a problem because:

• I've been trying to popularize the better solution but never could: Support for nested suites. mdcruz/cypress-demo-todo#2
• Others also advertise the solutions not supporting nested describes, also setting the screenshotsFolder to the assets folder of the HTML report, which feels arguable to me, e.g., https://www.youtube.com/watch?v=NfBLB329jpg

Other

No response

[gustawx]

This would be really nice to have. I do very similar thing to include the screenshot in the report. Can someone from Cypress team at least reply to this?

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.

[rkrisztian]

Well, that's sad.

[nagash77]

Hi @rkrisztian , I will reopen this issue since it appears it was a feature request that was not labelled as such and so got picked up by our stalebot. I will update the labels accordingly and route to our product team for consideration.

[rkrisztian]

My latest code looks like this, which works even if you describe('<MyComponent />', ...) (tested in a React project).

import addContext from 'mochawesome/addContext';
import * as Mocha from 'mocha';

Cypress.on('test:after:run', (test, runnable) => {
  if (test.state === 'failed') {
    const screenshotDir = `../screenshots/${Cypress.spec.name}`;
    const screenshotFileBaseName = getScreenshotFileBaseName(test, runnable);
    const screenshotFileName = encodeURIComponent(`${screenshotFileBaseName} (failed).png`);
    addContext({ test } as Mocha.Context, { title: 'Screenshot', value: `${screenshotDir}/${screenshotFileName}` });

    if (Cypress.config('video')) {
      const videoFileName = encodeURIComponent(`${Cypress.spec.name}.mp4`);
      addContext({ test } as Mocha.Context, { title: 'Video', value: `../videos/${videoFileName}` });
    }
  }
});

const getScreenshotFileBaseName = (test: Cypress.ObjectLike, runnable: Mocha.Test) => {
  const titlePathNormalized = runnable
    .titlePath()
    .map((title) => title.replace(/[:/<>]/g, '').trim())
    .join(' -- ');
  return titlePathNormalized + (test.hookName ? ` -- ${test.hookName} hook` : '');
};

[rkrisztian]

I noticed that the test:after:run event does not even run for errors like #25913. I couldn't find a suitable event type in the catalog to attach a screenshot to the report in such cases.

[rkrisztian]

The screenshot patch changes in Cypress 13 make the problem worse: #24052. Now I can no longer use Cypress.spec.name, and we have no easy way to deduct the path to the screenshot, as the structure of Cypress.spec does not contain the common ancestor paths (which are documented to be calculated at runtime).

I also checked if the after:spec event can help, but no, because I can't easily map tests to screenshots.

So as long as our tests are organized in directories, now my workaround doesn't even work anymore, and I can't find anything to get the screenshots attached to the test report. :(