Add Context in Mochawesome Report

• Cypress

mochawesome 是为 Mocha 提供的一个 Report 库，可以用于生成不错的 HTML 报告（见 npm）。库本身提供了一个 addContext 的 API，可以用于在运行 Test 的时候，存入额外的信息到 Context 中，最终在生成 HTML 报告的时候，将这部分 Context 信息写入对应的测试用例内。

参考代码如下：

const addContext = require('mochawesome/addContext');

describe('test suite', function () {
  it('unit test', function () {
    addContext(this, 'content');
    // or
    addContext(this, {
      title: 'title',
      value: 'value or object'
    });
  });
});

几点说明：

  1. 在 beforeEach 或 afterEach 的钩子内调用 addContext 也是允许的；
  2. 如果给定的第二个参数是 URL 或是一个图片的话，mochawesome 可以有相对应的展示；
  3. 记得 it 函数的第二个参数不要使用箭头函数，否则 this 的指向会有问题

然而，在 Cypress 中如果试图直接使用上述方法运行代码，会发现并不能成功。最终生成的报告内并没有对应的 context 信息。其原因在于，Cypress 在运行的过程中，原本被赋值的 context 属性被覆盖掉了，导致虽然进行了 addContext 的赋值，但是最终的结果中并没有保留这部分数据。

一个可行的解决方案是，在 test:after:run 事件中再进行赋值，保证结果生效。示例代码如下：

const addContext = require('mochawesome/addContext');

Cypress.Commands.add('addContext', (content) => {
  cy.once('test:after:run', test => {
    addContext({ test }, content);
  });
});

几点说明：

  1. 因为 addContext API 本质上就是往 test 对象上写 context 数据，而 Cypress 的 API 正好提供了 test 对象，因而第一个参数不需要传 this，直接将 test 以合适的方法传入就可以了；
  2. 上面的代码定义了一个 Cypress 的命令方便各个地方调用，类似的代码改成一个普通的函数也是可以的；
  3. 需要用 cy.once 保证这个代码只会被调用一次，这样其他的测试用例中不会有类似的数据被写入