1

我正在使用 Cypress 以及 Mochawesome 记者和 cypress-image-snapshot 库。cypress-image-snapshot 库在测试失败时创建视觉回归的屏幕截图。我想看看是否有办法将这些图像注入到最终报告中。

因为我已经知道文件的路径，所以我能够将标准测试快照注入到报告中。文件名始终遵循相同的模式，因此我可以轻松构建字符串。

// cypress/support/index.js

import './commands'

const addContext = require('mochawesome/addContext')

Cypress.on('test:after:run', (test, runnable) => {
    if (test.state === 'failed') {
        // Build image path
        const screenshotFileName = `${runnable.parent.title} -- ${test.title} (failed).png`
        addContext({ test }, `assets/${Cypress.spec.name}/${screenshotFileName}`)

        // TODO: Here I need to inject all the images from the snapshots/SPEC_NAME/__diff_output__ directory
        ...
    }
})

我尝试创建一个赛普拉斯任务来访问文件系统并简单地从特定的diff_output文件夹中读取所有文件，但是 Cypress.on('test:after:run') 事件侦听器中没有可用的任务。

4

1 回答 1

0

我设法在 cypress-image-snapshop 插件的 mochawesome HTML 报告中添加了差异图像。

我这样做的方式不是最安全的，但它是最快的方式，实际上是我找到的唯一方式。

Cypress.on('test:after:run', (test, runnable) => {
  if(test.state === 'failed') {
    let screenshot;
    screenshot = `${Cypress.config('screenshotsFolder')}/${Cypress.spec.name}/${runnable.parent.title} -- ${test.title} (failed).png`;
    if(test.err.message.includes('See diff')) {
    // If the test failed due to cypress-image-snapshot the message will always be the same and the plugin gives you in the message the url of the path
      screenshot = test.err.parsedStack[1].message.replace('See diff for details: ', '');
    }
    addContext({test}, {
      title: 'Image',
      value: screenshot
    });
  }
})

于 2022-02-16T09:35:47.803 回答