首页 > web前端 > H5教程 > 用protractor测试canvas绘制(二)

用protractor测试canvas绘制(二)

黄舟
发布: 2017-02-25 13:12:05
原创
1424 人浏览过

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

今天进入正题。

其实有了executeAsyncScript,一切就呼之欲出了。

直接上代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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串,作为参数依次传进来

1

2

3

4

5

6

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读进来就可以了

1

2

var fs=require("fs");

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

登录后复制

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

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

1

2

3

4

5

6

7

var getCanvasBase64 = function(){

    return function(){

        var canvasElement=document.getElementById('我叫canvas');

        var str = canvasElement.toDataURL();

        return str;

    };

};

登录后复制

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

1

2

3

browser.executeScript(getCanvasBase64()).then(function(canvasBase64){

    console.log(canvasBase64)   

})

登录后复制


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

1

2

3

4

5

6

7

8

9

10

11

12

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

1

2

3

4

5

6

7

it('测一下图像一不一样', function(){

    var expectBase64str = <span style="font-family: Arial, Helvetica, sans-serif;">getBase64</span>(&#39;期望图路径.png&#39;,"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)!


相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
javascript - canvas画图
来自于 1970-01-01 08:00:00
0
0
0
html5 - canvas有时候会拿不到toDataURL数据
来自于 1970-01-01 08:00:00
0
0
0
javascript - canvas 裁剪空白区域
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板