Test canvas drawing with protractor (2)

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

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);//断言图像差异
    });

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

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('我叫canvas');
        var str = canvasElement.toDataURL();
        return str;
    };
};

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

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

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

Okay, combine all the above, this is our case

h

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);//断言图像差异

});});

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)!