Macaca [基于 Node.js 的自动化测试-Macaca] - 前端组件测试

达峰的夏天 · 2016年04月28日 · 最后由达峰的夏天回复于 2016年06月27日 · 3879 次阅读

上周在沪江分享了 React 组件开发与测试，很多同学问 Macaca 做黑盒功能测试是如何配置的，所以打算写篇文章介绍下。

明确下做哪些

回顾下我们之前的整理，在浏览器运行时的前端组件是需要覆盖单元测试的，首先我们覆盖白盒测试，如这里，使用世面上的框架 (angular, react, vue) 提供的自带工具模块就好，如果有更多特性的模块随意使用无妨。接下来就是要覆盖 UI 层面的黑盒测试。

需要哪些准备

安装依赖包

cnpm i macaca-cli webdriver-client --save-dev

为了演示方便，我给 PPT 中的组件写了几行用例，如下：

var wd = require('webdriver-client')({
  platformName: 'desktop',
  browserName: 'electron'
});

describe('macaca desktop sample test', function() {
  this.timeout(5 * 60 * 1000);

  ...

  it('#1 should append success', function() {
    var length;

    return driver
      .execute('return document.querySelectorAll(".item").length')
      .then(function(data) {
        length = data;
      })
      .elementsByCss('button.btn')
      .then(function(buttons) {
        return buttons[3];
      })
      .click()
      .sleep(1000)
      .execute('return document.querySelectorAll(".item").length')
      .then(function(newLength) {
        newLength.should.equal(length + 1);
      })
      .sleep(3000);
  });

  ...
});