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 isSame = utils.diffImage(screenshotImg, specImg, tolerantCfg);
                        if(isSame){
                            done();
                        }
                        else{
                            done(new Error('diff image error:' + name));
                        }
                    }
                    else{
                        done();
                    }
                });
            }
            else{
                setTimeout(function(){
                    done();
                }, 100);
            }
        });
    },
    /**
     * 截屏
     * @param  {String} name 图片名
     * @param  {Function} callback 回调
     */
    takeScreenshot:function(name, callback) {
        var that = this;
        _macaca_uitest.screenshot(name + '.png', function() {
          if (callback) {
            that.loadImage('../screenshot/' + name + '.png', callback);
          }
        });
    },
    /**
     * 加载图片
     * @param  {String} src 图片地址
     * @param  {Function} callback 加载回调，成功会传image参数，失败传null
     */
    loadImage:function(src, callback){
        var img = new Image();
        img.onerror = function(){
            callback && callback(null);
        };
        img.onload = function(){
            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);
            return this.diffImageData(imgData0, imgData1, tolerantCfg);
        }
    },
    /**
     * 对比图像数据是否相同
     * @param  {Array} imgData0
     * @param  {Array} imgData1
     * @param  {Object} tolerantCfg 容错配置
     * @param  {Number} tolerantCfg.value 允许颜色最大的差值 默认为5
     * @param  {Number} tolerantCfg.num 允许错误像素点数量 默认为10
     * @return {Boolean} 是否相同
     */
    diffImageData:function(imgData0, imgData1, tolerantCfg){
        tolerantCfg = tolerantCfg||{};
        var tolerantValue = tolerantCfg.value || 20;
        var tolerantNum = tolerantCfg.num || 20;

        var num = 0;
        for(var i = 0, l = imgData0.length;i < l;i += 4){
            for(var j = 0;j < 4;j ++){
                if(Math.abs(imgData0[i + j] - imgData1[i + j]) > tolerantValue){
                    num ++;
                    if(num > tolerantNum){
                        return false;
                    }
                    break;
                }
            }
        }
        return true;
    },
    /**
     * 获取图片数据
     * @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;
    }
};