上一篇 - 跨终端的 Webdriver 客户端实战

上周在沪江分享了 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);
  });

  ...
});

用例会帮助我们自动点击按钮，并且校验是否有预期 DOM 节点生成，完整代码请看 autoresponsive-react。

使用开放持续集成

如果你的组件是开放的，那可以使用免费的 Travis-CI 做持续集成，配置也非常容易。

$ @${npm_bin}/macaca run --no-window

完整的脚本可以看：这里。

这里是详细 log：autoresponsive-react/builds/126152787

这样一旦组件有了改动，就会自动将白盒 + UI 测试都运行一次，可以高效地保障组件质量。

欢迎讨论，互相学习。

微博: http://weibo.com/xudafeng
Github: https://github.com/xudafeng

下一篇 - 使用 Macaca 做手机浏览器测试