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

Posted 2023-02-16

【中文标题】我可以在 mocha awesome html 报告中添加柏树截图吗

【英文标题】：Can I add cypress screenshot in mocha awesome html report

【发布时间】：2020-02-27 13:03:56

【问题描述】：

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

【问题讨论】：

liron_e 写了一个Answer 说“你可以使用这个自动附加截图的插件npmjs.com/package/cypress-mochawesome-reporter”

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

【参考方案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 报告的。