在 Cypress 中配置屏幕截图文件夹

Posted 2023-02-16

【中文标题】在 Cypress 中配置屏幕截图文件夹

【英文标题】：Configure screenshot folder in Cypress

【发布时间】：2019-08-10 03:48:50

【问题描述】：

我使用 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 报告中）。 有什么办法吗？ 任何帮助将不胜感激，如果我无法正确提出我的问题，请告诉我。我愿意补充更多信息。

【问题讨论】：

为什么不在 cypress.json 中指定 "screenshotsFolder": '"screenshots",

它只会配置默认的根目录。在根目录中，它将根据您的测试用例结构创建子目录。

【参考方案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 )
      )
    )
  )

例如，如果您希望图像位于两个位置，您也可以创建符号链接。

【讨论】：

您能否确保您的完整答案可见。看起来像是一些标记问题。

我认为您的解决方案不会起作用，因为事件 'after:screenshot' 只有在我们调用 cy.screenshot() 时才会触发。对于我的用例（成功将失败的 TC 的屏幕截图附加到 mochawesome），一旦我检测到 TC 失败（在事件 'test:after:run' 下），我将无法触发 cy.screenshot() （在 test:after 内：运行块。）

该事件仍应触发，请参阅此文档页面：docs.cypress.io/api/plugins/after-screenshot-api.html#Usage

我不知道这是 Cypress 中的错误还是我做错了什么，但如果 TC 故障导致屏幕截图，则不会触发此事件。我可以清楚地看到它在 cy.screenshot() 的情况下被解雇。

我仍然会接受您的回答，因为根据文档，这应该是所需的行为。谢谢@bkucera。帮助很大。