用protractor测试canvas绘制(二)

黄舟

发布： 2017-02-25 13:12:05

原创

1516人浏览过

上一篇写了通过webdriver在浏览器环境下异步调用js代码。

今天进入正题。

其实有了executeasyncscript，一切就呼之欲出了。

直接上代码：

var compareImage=function(){
    return function(){
        eval(arguments[0]);
        var canvasBase64=arguments[1];
        var expectBase64str=arguments[2];
        var callback=arguments[ arguments.length - 1 ];

        this.resemble(canvasBase64)
            .compareTo(expectBase64str)
            .onComplete(function (data) {
                callback(data);
            });
    };
}

登录后复制

然后把resamble代码，要比较的两个图像的base64串，作为参数依次传进来

browser.executeAsyncScript(compareImage(),resemblejs,canvasBase64,expectBase64str)
    .then(function(data){
        console.log(data);
        expect(data.isSameDimensions).toBe(true);//比较大小
        expect(data. misMatchPercentage).toBe(0);//断言图像差异
    });

登录后复制

断言大小和图像差异就可以了，我这个用的0，就是说图像完全一致。
虽然估计不用，还是说一下，resemblejs的代码怎么倒进来呢？

用fs读进来就可以了

var fs=require("fs");
var resemblejs=fs.readFileSync("jstest/e2e/00Common/resemble.js","utf-8");

登录后复制

下面的问题是，我用于比较的两个base64串怎么来呢？

先来说要测试的串，也很简单，用代码到浏览器里去截，因为只测canvas，所以用toDataUrl就可以了。

var getCanvasBase64 = function(){
    return function(){
        var canvasElement=document.getElementById('我叫canvas');
        var str = canvasElement.toDataURL();
        return str;
    };
};

登录后复制

这次用executeScript来调，是同步的，所以要return

browser.executeScript(getCanvasBase64()).then(function(canvasBase64){
    console.log(canvasBase64)    
})

登录后复制

然后期望图则还是用fs读取

青鸟内测（手机app封装、托管系统）

注意：请在linux环境下测试或生产使用青鸟内测是一个移动应用分发系统，支持安卓苹果应用上传与下载，并且还能快捷封装网址为应用。应用内测分发：一键上传APP应用包，自动生成下载链接和二维码，方便用户内测下载。应用封装：一键即可生成app，无需写代码，可视化编辑、直接拖拽组件制作页面的高效平台。工具箱：安卓证书生成、提取UDID、Plist文件在线制作、IOS封装、APP图标在线制作APP分发：

查看详情

var base64Encode = function(file,type) {
    var fs = require('fs');
    var bitmap = fs.readFileSync(file); 
    var str=new Buffer(bitmap).toString('base64');
    if(type!==undefined){
        str="data:"+type+";base64,"+str;
    }
    else{
        str="data:image/png;base64,"+str;
    }
    return str
};

登录后复制

好了，把上面所有的结合起来，就是我们的case了

h

it('测一下图像一不一样', function(){
    var expectBase64str = <span style="font-family: Arial, Helvetica, sans-serif;">getBase64</span>('期望图路径.png',"image/png");
    browser.executeScript(getCanvasBase64()).then(function(canvasBase64){
        return browser.executeAsyncScript(compareImage(),reseblejs,canvasBase64,expectBase64str);
    }).then(function(data){
        console.log(data);
        <span style="font-family: Arial, Helvetica, sans-serif;">expect(data.isSameDimensions).toBe(true);//比较大小</span><pre name="code" class="html">        expect(data. misMatchPercentage).toBe(0);//断言图像差异

登录后复制

});});

以上就是用protractor测试canvas绘制(二) 的内容，更多相关内容请关注PHP中文网（www.php.cn）！