mocha.js - 我可以在 mocha awesome html 报告中添加柏树截图吗

Question

我能够生成 mocha awesome html 报告，一切都很好，但我想在 html 报告中添加屏幕截图，我正在拍摄 cypress 屏幕截图，但想在 html 报告中添加。有什么办法可以添加它们吗？

Answer 1

考虑mochawesome addContext。这将为报告注入任何价值。我相当确定生成的 html 报告将显示给定路径的图像。这可能需要进一步阅读 addContext。

const { expect } = require('chai');
const addContext = require('mochawesome/addContext');

describe('Cypress tests.', function () {
  before(function () {
    // Perform Cypress things.
    // Take screenshots.
  };

  after(function () {
    const title = 'Screenshot of thing.';
    const value = 'path/to/screenshot.png';
    addContext(this, {
      title,
      value,
    };

  it('Foo should equal batz.', function () {
    // Expect some things.
  };
};

Answer 2

我使用以下代码将屏幕截图自动添加到任何（且仅）失败的测试中：

import addContext from 'mochawesome/addContext'
Cypress.on('test:after:run', (test, runnable) => {
    if (test.state === 'failed') {
        addContext({ test }, {title: 'Screenshot', value: `<path/to/screenshots/folder>/${Cypress.spec.name}/${runnable.parent.title.replace(':', '')} -- ${test.title} (failed).png`})
        addContext({ test }, {title: 'Video', value: `<path/to/videos/folder>/${Cypress.spec.name}.mp4`})
    }
});

将它放在support/index.js中，因为该文件在任何测试之前加载。

确保将<path/to/.../folder>以上内容更新到您保存屏幕截图/视频的位置。该路径是相对于生成的html报告的。