Test canvas drawing with protractor (2)-H5 Tutorial-php.cn

Test canvas drawing with protractor (2)

黄舟

Release： 2017-02-25 13:12:05

Original

1345 people have browsed it

The previous article wrote about asynchronously calling js code in the browser environment through webdriver.

Let’s get down to business today.

In fact, with executeAsyncScript, everything is ready to go.

Directly upload the code:

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);
            });
    };
}

Copy after login

Then pass the resamble code and the base64 strings of the two images to be compared as parameters in sequence

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

Copy after login

Just assert the difference in size and image. I used 0, which means the image is completely consistent.
Although it is probably not necessary, let me tell you how to pour the resemblejs code in?

Just use fs to read it in

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

Copy after login

The next question is, where do I get the two base64 strings for comparison?

Let’s talk about the string to be tested first. It is also very simple. Use the code to intercept it in the browser. Because only canvas is tested, just use toDataUrl.

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

Copy after login

This time I used executeScript to adjust it, which is synchronous, so I have to return

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

Copy after login

and then I hope that the plan will still use fs Read

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

Copy after login

Okay, combine all the above, this is our case

h

it(&#39;测一下图像一不一样&#39;, 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);//断言图像差异

Copy after login

});});

The above is the content of using protractor to test canvas drawing (2). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!