在 Cypress 中配置截图文件夹

Question

我正在使用 Cypress 作为我的用户界面测试自动化框架。
目前我的规范文件文件夹结构（测试文件的逻辑组织）是：

~/myAccount/header/header.spec.js

~/myAccount/footer/footer.spec.js

~/myAccount/mainTabs/home.spec.js

等等...
现在，当我将 cypress.json 中的屏幕截图文件夹配置为屏幕截图并保存失败测试用例的屏幕截图时，赛普拉斯会在屏幕截图文件夹内创建一个文件夹结构。例如，如果 footer.spec.js 中的测试失败，它会将屏幕截图保存在

中

~/screenshots/myAccount/footer/footer.spec.js

我想摆脱这种递归文件夹结构并将所有屏幕截图保存在屏幕截图文件夹中（以便我可以轻松访问这些屏幕截图并将其添加到我的 mochawesome 报告中）。
有什么办法吗？任何帮助将不胜感激，如果我无法正确提出问题，请告诉我。我愿意添加更多信息。

Answer 1

是的，您可以使用 Cypress screenshot API:

例如：

// cypress/plugins/index.js

const fs = require('fs')

module.exports = (on, config) => {
  on('after:screenshot', (details) => {
    // details will look something like this:
    // {
    //   size: 10248
    //   takenAt: '2018-06-27T20:17:19.537Z'
    //   duration: 4071
    //   dimensions: { width: 1000, height: 660 }
    //   multipart: false
    //   pixelRatio: 1
    //   name: 'my-screenshot'
    //   specName: 'integration/my-spec.js'
    //   testFailure: true
    //   path: '/path/to/my-screenshot.png'
    //   scaled: true
    //   blackout: []
    // }

    // example of renaming the screenshot file

    const newPath = '/new/path/to/screenshot.png'

    return new Promise((resolve, reject) => {
      fs.rename(details.path, newPath, (err) => {
        if (err) return reject(err)

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

例如，如果您想要在两个地方放置图像，您也可以创建符号链接。

在 Cypress 中配置截图文件夹

Configure screenshot folder in Cypress

cypress

mochawesome