将柏树-图像快照差异图像注入Mochawesome报告

Question

我正在使用Cypress以及Mochawesome记者和柏树图像快照库。当测试失败时，柏树图像快照库将创建可视回归的屏幕截图。我想看看是否有办法将这些图像注入到最后报告中。

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

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

我尝试创建一个Cypress任务来访问文件系统，只需从特定的diff_output文件夹读取所有文件，hovewer任务在Cypress.on('test:after:run')事件侦听器中不可用。

Answer 1

我设法从柏树图片管理商店插件中添加了令人毛骨悚然的HTML报告中的diff图像。

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

​

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

​