如何打造东半球 No1 的测试报告器
发布于 4 个月前 作者 yllziv 681 次浏览 来自 分享

引言

在编程测试用例的过程中,一款好的测试报告器能帮忙我们一览用例全貌,并且快速定位问题。目前市面上的报告器大多功能较为单一,随着对报告器的要求不断提升,现有测试报告器已经无法满足飞速发展的业务。本文从如何获取 Mocha 数据到渲染 HTML 报告器,分享如何开发一款测试报告器,最后介绍一款蚂蚁国际出品的测试报告器 Macaca Reporter

获取 Mocha 数据

处理数据

通过监听 Mocha 用例处理事件,对 Mocha 的数据进行二次加工,可以获取我们需要的数据结构。具体代码见 GitHub

function MacacaReporter(runner, options) {

  // 用例结束的钩子函数,对数据 output 进行处理
  this.done = (failures, exit) => done(this.output, options, this.config, failures, exit);

  this.config = {
    reportFilename: 'report',
    saveJson: true
  };
  Base.call(this, runner);

  new Spec(runner);

  // 测试用例开始执行的时候,获取 Mocha 数据的引用
  runner.on('start', () => {
    this._originSuiteData = runner.suite;
  });

  // 每次用例结束后,对 Mocha 数据进行处理
  runner.on('test end', test => {
    test.uuid = _.uuid();
    handleTestEnd();
  });

  // 所有用例结束后,打印数据,输出报告器
  runner.on('end', test => {
    handleTestEnd(true);
  });
}

数据处理过程中需要注意对 circle json 的处理,Mocha 数据中每个 test 会引用 suit,导致普通 JSON.stringify 处理会抛异常,这里采用 safe-json-stringify 对其进行处理。

在数据处理数据后,得到 Mocha 测试数据

  • JSON 文件保存到本地一份,以供其他测试框架集成使用。
  • 同时通过转码后内嵌到 html 报告器中,作为 html 报告器的原始数据:见 GitHub

用例截图

用例截图使用 macaca 框架提供的能力,基于 electron 的截图功能,能够在用例结束前自动产生截图

// https://github.com/macacajs/macaca-wd/blob/master/lib/helper.js#L183 
wd.addPromiseChainMethod('saveScreenshots', function(context) {
  const reportspath = path.join(cwd, 'reports');
  const filepath = path.join(reportspath, 'screenshots', `${uuid()}.png`);
  mkdir(path.dirname(filepath));

  return this.saveScreenshot(filepath).then(() => {
    appendToContext(context, `${path.relative(reportspath, filepath)}`);
  });
});

生成截图后,可以将图片上传到 CDN 中,将路径保存到每个 test 数据中。

// https://github.com/macacajs/macaca-reporter/blob/master/lib/macaca-reporter.js#L130
MacacaReporter.appendToContext = function (mocha, content) {
  try {
    const test = mocha.currentTest || mocha.test;

    if (!test.context) {
      test.context = content;
    } else if (Array.isArray(test.context)) {
      test.context.push(content);
    } else {
      test.context = [test.context];
      test.context.push(content);
    }
  } catch (e) {
    console.log('error', e);
  }
};

开发 HTML 报告器

有了测试原始数据后,我们开始着手开发 HTML 报告器,报告器应该有以下两个要素:

  • 直观显示用例总数、成功和失败用例数量、耗时
  • 显示每个用例的具体名称、状态、耗时

在此基础上,为了方便开发者直观的看到每个用例的情况以及用例的整体情况,我们添加了链路树模式、脑图模式和全图模式。

链路树模式

Mocha 测试用例编写是 suit 中嵌套 suit,叶子节点是 test(describle -> describle -> it),非常适合用链路图的形式开表达用例的关系。我们基于 D3 开发了 d3-tree,用来展示链路树结构。链路树模式是最常用的也是默认的展示模式,将用例的组织结构按照树来展示,链路树模式方便还原业务产品的测试执行路径。

// https://github.com/macacajs/macaca-reporter/blob/master/assets/components/Suite.js#L107
const d3tree = new D3Tree({
  selector: selector,
  data: d3Data,
  width: document.querySelector('ul.head').clientWidth,
  height: this.maxD3Height * 300,
  duration: 500,
  imageHeight: 200,
  imageWidth: 200,
  imageMargin: 10,
  itemConfigHandle: () => {
    return {
      isVertical: false
    };
  }
});
d3tree.init();

传入对应数据结构就能绘制出下图:<br />

脑图模式

通过使用 [@antv/g6-editor](https://github.com/antvis/g6-editor) 提供的 Mind 可以非常方便的绘制脑图。脑图模式可以认为是全部用例的概览,这个视图更方便用户整理和组织用例,在改进、补充新用例前可作为分析依据。

// https://github.com/macacajs/macaca-reporter/blob/master/assets/components/Mind.js#L77
new Editor.Mind({
  defaultData: mindSuite,
  labelEditable: false,
  mode: 'readOnly',
  graph: {
    container: 'mind-node',
    height: window.innerHeight - 100,
    width: window.innerWidth,
  },
});

全图模式

全图模式提取了测试过程中的全部截图,更适用于偏渲染展示型的功能测试。在交付下一阶段前可以用做质量依据从而降低成本。但不建议每次通过人工看报告的形式来避免问题,推荐使用 像素判断 和异常捕获等自动化手段辅助断言当前渲染是否正常。<br />

Macaca Reporter

蚂蚁国际的前端同学在业务实践过程中,基于 Mocha 沉淀了 macaca-reporter,经过近两年的不断打磨,已经在阿里多个 BU 中广泛使用。我们先看看 Macaca Reporter 具有哪些能力,能够做哪些事情:

  • 配合自动截图功能能够刻画完整的链路
  • 能够支持成功、失败、跳过等类型的用例展示
  • 支持计算通过率
  • 支持脑图模型展示用例链路
  • 支持图片模式直观展示用例截图
  • 支持二次定制开发,添加功能

深度刻画链路

效果图(页面太长,只截取了一小部分):

脑图模式

图片模式

表格模式

体验 Macaca Reporter

通过 DataHub 项目体验下 Macaca Repoter:

$ git clone [email protected]:macacajs/macaca-datahub.git
$ cd macaca-datahub
$ npm i
$ npm run dev:test
$ npm run test

等测试用例跑完之后,控制台会输出:

>> >> html reporter generated: /github/macacajs/datahub-view/reports/index.html
>> >> json reporter generated: /github/macacajs/datahub-view/reports/json-final.json
>> >> reporter config generated:/github/macacajs/datahub-view/reports/config.json
>> >> coverage reporter generated: /github/macacajs/datahub-view/coverage/index.html

打开 HTML 报告器即可。

结语

Macaca Reporter 作为一款功能强大的报告器,欢迎大家来使用,来共建。

项目主页:https://macacajs.github.io/macaca-reporter/zh/<br />GitHub:https://github.com/macacajs/macaca-reporter<br />问题反馈:https://github.com/macacajs/macaca-reporter/issues

BTW,欢迎成为 Macaca 项目的贡献者,Macaca 是一套面向用户端软件的测试解决方案,提供了自动化驱动,环境配套,周边工具,集成方案等,拥有自研的自主产权的产品矩阵,旨在解决终端上的测试、自动化、性能等方面的问题。

7 回复

。。。图片看不了还不修复下

@jxycbjhc 已火速修复

@yllziv 可以理解为antv+mocha+图像识别的结合体吗?图片以及脑图模式太耗时,如果真的一个测试等待那么久不不能接受的,有考虑吗

@jxycbjhc 这个主要是报告器,显示数据用的,渲染不耗时。你说的是 e2e 测试把?e2e 本身就是耗时的,要模拟用户操作的,跟单元测试不一样的。

有处markdown错误,另外,是否是mindmap,而不是minimap,minimap不是缩略图吗?

@cctv1005s 确实~ 我修改下

@yllziv 好的,感谢提醒,我这边也准备上这个,前端我不太熟悉,主要就把后端的测试用例整成报告的形式,挺好的

回到顶部