Renaming cypress screenshot

Question

I am trying to rename the screenshots created for my failed cypress tests. I followed the example of the documentation https://docs.cypress.io/api/plugins/after-screenshot-api.html#Modify-screenshot-details

For testing i am using the test suites provided by cypress.

Renaming the file works, as long as i use a static string, but when i try access data form the details object like the timestamp or the old path the renaming fails.

 Error: ENOENT: no such file or directory, rename 'C:\projects\playground\cypress\screenshots\examples\actions.spec
.js\Actions-- .type() - type into a DOM element (failed).png'
-> 'C:\projects\playground\cypress\mochareports\screenshots\2020-03-16T08.55:09.929Z.png'

My code looks like these

const fs = require('fs')

//Screenshots names can be too long for the file system, taht why we truncate them
module.exports = (on, config) => {
    on('after:screenshot', (details) => {
        console.log(details) // print all details to terminal
        //const fileName = details.takenAt.replace(":",".") +".png"; // This fails

        const fileName = details.specName +".1png"; // This fails
        console.log(fileName);
        //const fileName = "test.png"; // This works
        const newPath = "cypress/mochareports/screenshots/"+ fileName;
        console.log(newPath);

        return new Promise((resolve, reject) => {
            // fs.rename moves the file to the existing directory 'new/path/to'
            // and renames the image to 'screenshot.png'
            fs.rename(details.path, newPath, (err) => {
                if (err) return reject(err)

                // because we renamed and moved the image, resolve with the new path
                // so it is accurate in the test results
                resolve({ path: newPath })
            })
        })
    })
}

What confuses me is that in the logs of the execution my console.logs are visible before the logs of the actual test:

...
  Running:  examples\actions.spec.js                                                       (1 of 19)


  Actions
{
  size: 148523,
  takenAt: '2020-03-16T08:55:09.929Z',
  dimensions: { width: 1280, height: 720 },
  multipart: false,
  specName: 'examples\\actions.spec.js',
  testFailure: true,
  path: 'C:\\Projekte\\playground\\cypress\\screenshots\\examples\\actions.spec.js\\Actions -- .type() - type into a DOM element (failed).png',
  scaled: true,
  blackout: [],
  duration: 342
}
2020-03-16T08.55:09.929Z.png
cypress/mochareports/screenshots/2020-03-16T08.55:09.929Z.png
    1) .type() - type into a DOM element
    √ .focus() - focus on a DOM element (326ms)
...

Shouldn't the console logs happen after the test executon, as i add the function to the after:screenshot event?

Answer 1

The problem is the javascript code.

const fileName = details.takenAt.replace(":",".") +".png"

Failed because only replaced the first colon and left the rest. As a colon is not allowed in file names the renaming failed.

const fileName = details.takenAt.replace("/:/g",".") +".png"

This actually replaced all the colons and works just fine.

Furthermore setting the specname as filename failed because the specname would have the schema of "example/action.spec.js". This fails, because the directory example does not exist inside cypress/mochareports/screenshots/. To solve this it is either necessary to create the directory or change the desired filename to a string without slashes.

Answer 2

Replying to Michael Answer:

this solution worked for me & remove quotes in regex

const fileName = details.takenAt.replace(/:/g,".") +".png"

Also you may wanted to make directory before creating and move the file.

if (!fs.existsSync(dir)) {fs.mkdirSync(dir, { recursive: true });}