重命名cypress截图

Question

我正在尝试重命名为失败的 cypress 测试创建的屏幕截图。 我按照文档的示例https://docs.cypress.io/api/plugins/after-screenshot-api.html#Modify-screenshot-details

为了进行测试，我使用 cypress 提供的测试套件。

只要我使用静态字符串，重命名文件就可以，但是当我尝试从时间戳或旧路径等详细信息对象访问数据时，重命名失败。

 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'

我的代码看起来像这些

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 })
            })
        })
    })
}

令我困惑的是，在执行日志中，我的 console.logs 在实际测试的日志之前可见：

...
  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)
...

当我将函数添加到 after:screenshot 事件时，控制台日志不应该在测试执行后发生吗？

Answer 1

问题出在 javascript 代码上。

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

失败，因为只替换了第一个冒号，留下了其余的。由于文件名中不允许使用冒号，因此重命名失败。

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

这实际上替换了所有冒号并且工作得很好。

此外，将规范名称设置为文件名失败，因为规范名称的架构为“example/action.spec.js”。这会失败，因为 cypress/mochareports/screenshots/ 中不存在目录示例。要解决此问题，需要创建目录或将所需的文件名更改为不带斜杠的字符串。

Answer 2

回复迈克尔的回答：

这个解决方案对我有用并删除正则表达式中的引号

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

您可能想在创建和移动文件之前创建目录。

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

Answer 3

例如，我需要设置快照文件夹而不是屏幕截图文件夹。 因此，我检查快照文件夹是否存在，如果不存在，则会创建它。 代码很简单：

on('after:screenshot', (details) => {

    const name: string = details.name;
        console.log(details);

        const snapshotFullPathName: string = `${details.path}`.replace('screenshots', 'snapshots');
        const snapshotFullFolderPath: string = require('path').dirname(snapshotFullPathName);
        console.log(`snapshots folder is: ${snapshotFullFolderPath}`)

        return new Promise(() => {
            if (!fs.existsSync(snapshotFullFolderPath)) {
                fs.mkdirSync(snapshotFullFolderPath, {recursive: true});
            }
            fs.renameSync(details.path, snapshotFullPathName);
        })
})