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

Question

我正在使用Cypress以及Mochawesome报告器和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
...
}
})

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

Answer 1

我设法在 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
});
}
})