Hilo/test/html/utils.js

var utils = {
    /**
     * 触发点击事件
     * @param  {Element} elem dom元素
     */
    click:function(elem){
        var ev = document.createEvent("MouseEvent");
        ev.initMouseEvent(
            "click",
            true /* bubble */, true /* cancelable */,
            window, null,
            0, 0, 0, 0, /* coordinates */
            false, false, false, false, /* modifier keys */
            0 /*left*/, null
        );
        elem.dispatchEvent(ev);
    },
    /**
     * 与截图对比差异
     * @param  {[type]}   name  对比图名字
     * @param  {Function} done
     * @param  {Object} tolerantCfg 容错配置
     * @param  {Number} tolerantCfg.value 允许颜色最大的差值 默认为5
     * @param  {Number} tolerantCfg.num 允许错误像素点数量 默认为10
     * */
    diffWithScreenshot:function(name, done, tolerantCfg){
        var that = this;
        that.takeScreenshot(name, function(screenshotImg){
            if(screenshotImg){
                utils.loadImage('../expectScreenshot/' + name + '.png', function(specImg){
                    if(specImg){
                        var diff = utils.diffImage(screenshotImg, specImg);
                        if(diff < 10){
                            done();
                        }
                        else{
                            done(new Error('diff image error:' + name + ', diff:' + diff));
                        }
                    }
                    else{
                        console.log('no spec image:' + name);
                        done();
                    }
                });
            }
            else{
                setTimeout(function(){
                    done();
                }, 100);
            }
        });
    },

    /**
     * 用例结束后截屏
     */
    screenshot:function(callback, context) {
      var name = new Date().getTime();
      this.takeScreenshot(name, callback, context);
    },

    /**
     * 截屏
     * @param  {String} name 图片名
     * @param  {Function} callback 回调
     */
    takeScreenshot:function(name, callback, context) {
        var that = this;
        setTimeout(function(){
            _macaca_uitest.screenshot(name + '.png', function() {
              if (callback) {
                if (context) {
                _macaca_uitest.appendToContext(context, '../reports/screenshots/' + name + '.png');
                }
                that.loadImage('../reports/screenshots/' + name + '.png', callback, context);
              }
            });
        }, window._IS_TRAVIS?1000:100);
    },
    /**
     * 加载图片
     * @param  {String} src 图片地址
     * @param  {Function} callback 加载回调，成功会传image参数，失败传null
     */
    loadImage:function(src, callback, context){
        var img = new Image();
        img.onerror = function(){
            callback && callback(null);
        };
        img.onload = function(){
          if (context) {
            callback && callback();
          } else {
            callback && callback(img);
          }
        };
        img.src = src;
    },
    /**
     * 对比图像是否相同
     * @param  {Image|String} img0
     * @param  {Image|String} img1
     * @param  {Object} tolerantCfg 容错配置
     * @param  {Number} tolerantCfg.value 允许颜色最大的差值 默认为5
     * @param  {Number} tolerantCfg.num 允许错误像素点数量 默认为10
     * @return {Boolean} 是否相同
     */
    diffImage:function(img0, img1, tolerantCfg){
        if(img0.width !== img1.width || img0.height !== img1.height){
            return false;
        }
        else{
            var imgData0 = this.getImageData(img0);
            var imgData1 = this.getImageData(img1);
            var diff = pixelmatch(imgData0, imgData1, null, img0.width, img0.height, {threshold: 0.1, includeAA:false});
            console.log('      (imageDiff:' + diff + ')');
            return diff;
        }
    },
    /**
     * 获取图片数据
     * @param  {Image} img 图片
     * @return {Array} imageData
     */
    getImageData:function(img){
        this._cacheCanvas = this._cacheCanvas||document.createElement('canvas');
        var canvas = this._cacheCanvas;
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        var data = ctx.getImageData(0, 0, img.width, img.height).data;
        return data;
    }
};