原文链接：https://testerhome.com/topics/18753 作者：zivyangll Github HomePage：https://github.com/zivyangll

引言

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

一、获取 Mocha 数据

1.1 处理数据

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

  1. function MacacaReporter(runner, options) {
  2.   // 用例结束的钩子函数，对数据 output 进行处理
  3.   this.done = (failures, exit) => done(this.output, options, this.config, failures, exit);
  4.   this.config = {
  5.     reportFilename: 'report',
  6.     saveJson: true
  7.   };
  8.   Base.call(this, runner);
  9.   new Spec(runner);
  10.   // 测试用例开始执行的时候，获取 Mocha 数据的引用
  11.   runner.on('start', () => {
  12.     this._originSuiteData = runner.suite;
  13.   });
  14.   // 每次用例结束后，对 Mocha 数据进行处理
  15.   runner.on('test end', test => {
  16.     test.uuid = _.uuid();
  17.     handleTestEnd();
  18.   });
  19.   // 所有用例结束后，打印数据，输出报告器
  20.   runner.on('end', test => {
  21.     handleTestEnd(true);
  22.   });
  23. }

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

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

1.2 用例截图

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

  1. // https://github.com/macacajs/macaca-wd/blob/master/lib/helper.js#L183 
  2. wd.addPromiseChainMethod('saveScreenshots', function(context) {
  3.   const reportspath = path.join(cwd, 'reports');
  4.   const filepath = path.join(reportspath, 'screenshots', `${uuid()}.png`);
  5.   mkdir(path.dirname(filepath));
  6.   return this.saveScreenshot(filepath).then(() => {
  7.     appendToContext(context, `${path.relative(reportspath, filepath)}`);
  8.   });
  9. });

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

  1. // https://github.com/macacajs/macaca-reporter/blob/master/lib/macaca-reporter.js#L130
  2. MacacaReporter.appendToContext = function (mocha, content) {
  3.   try {
  4.     const test = mocha.currentTest || mocha.test;
  5.     if (!test.context) {
  6.       test.context = content;
  7.     } else if (Array.isArray(test.context)) {
  8.       test.context.push(content);
  9.     } else {
  10.       test.context = [test.context];
  11.       test.context.push(content);
  12.     }
  13.   } catch (e) {
  14.     console.log('error', e);
  15.   }
  16. };

二、开发 HTML 报告器

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

  • 直观显示用例总数、成功和失败用例数量、耗时
  • 显示每个用例的具体名称、状态、耗时
    在此基础上，为了方便开发者直观的看到每个用例的情况以及用例的整体情况，我们添加了链路树模式、脑图模式和全图模式。

2.1 链路树模式

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

  1. // https://github.com/macacajs/macaca-reporter/blob/master/assets/components/Suite.js#L107
  2. const d3tree = new D3Tree({
  3.   selector: selector,
  4.   data: d3Data,
  5.   width: document.querySelector('ul.head').clientWidth,
  6.   height: this.maxD3Height * 300,
  7.   duration: 500,
  8.   imageHeight: 200,
  9.   imageWidth: 200,
  10.   imageMargin: 10,
  11.   itemConfigHandle: () => {
  12.     return {
  13.       isVertical: false
  14.     };
  15.   }
  16. });
  17. d3tree.init();

传入对应数据结构就能绘制出下图：
如何打造东半球 No1 的测试报告器 - 图1

2.2 脑图模式

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

  1. // https://github.com/macacajs/macaca-reporter/blob/master/assets/components/Mind.js#L77
  2. new Editor.Mind({
  3.   defaultData: mindSuite,
  4.   labelEditable: false,
  5.   mode: 'readOnly',
  6.   graph: {
  7.     container: 'mind-node',
  8.     height: window.innerHeight - 100,
  9.     width: window.innerWidth,
  10.   },
  11. });

如何打造东半球 No1 的测试报告器 - 图2

2.3 全图模式

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

三、Macaca Reporter

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

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

3.1 深度刻画链路

效果图（页面太长，只截取了一小部分）：
如何打造东半球 No1 的测试报告器 - 图4

3.2 脑图模式

如何打造东半球 No1 的测试报告器 - 图5

3.3 图片模式

如何打造东半球 No1 的测试报告器 - 图6

3.4 表格模式

如何打造东半球 No1 的测试报告器 - 图7

四、体验 Macaca Reporter

通过 DataHub 项目体验下 Macaca Repoter：

  1. $ git clone git@github.com:macacajs/macaca-datahub.git
  2. $ cd macaca-datahub
  3. $ npm i
  4. $ npm run dev:test
  5. $ npm run test

等测试用例跑完之后，控制台会输出：

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

打开 HTML 报告器即可。

五、结语

Macaca Reporter 作为一款功能强大的报告器，欢迎大家来使用，来共建。
项目主页：https://macacajs.github.io/macaca-reporter/zh/
GitHub：https://github.com/macacajs/macaca-reporter
问题反馈：https://github.com/macacajs/macaca-reporter/issues
BTW，欢迎成为 Macaca 项目的贡献者，Macaca 是一套面向用户端软件的测试解决方案，提供了自动化驱动，环境配套，周边工具，集成方案，旨在解决终端上的测试、自动化、性能等方面的问题。