Use protractor to test canvas rendering (2), protractorcanvas

Use protractor to test canvas rendering (2), protractorcanvas

In the previous article, JavaScript code is asynchronously called using webdriver in the browser environment.

Enter the topic today.

In fact, with executeAsyncScript, everything is coming.

Directly run 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 string of the two images to be compared as parameters in sequence.

Browser.exe cuteAsyncScript (compareImage (), resemblejs, canvasBase64, expectBase64str ). then (function (data) {console. log (data); reverse CT (data. isSameDimensions ). toBe (true); // compare the size of CT (data. misMatchPercentage ). toBe (0); // asserted image difference });

The difference between the asserted size and the image is enough. I use 0, that is, the image is exactly the same.

Although it is not necessary, let's talk about how the resemblejs code is written in?

Read in with fs.

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

The following question is, how can I compare two base64 strings?

The string to be tested is also very simple. Use the code to intercept it in the browser. Because only the canvas is tested, you can use toDataUrl.

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

This time we use executeScript to call it. It is synchronous, so we need to return

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

Then we expect that the image will still be read using fs.

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

All right, Let's combine all the above. It's our case.

H

It ('test like a Noise', function () {var expectBase64str = <span style = "font-family: Arial, Helvetica, sans-serif; "> getBase64 </span> ('expect .png '," image/png "); browser.exe cuteScript (getCanvasBase64 ()). then (function (canvasBase64) {return browser.exe cuteAsyncScript (compareImage (), reseblejs, canvasBase64, expectBase64str );}). then (function (data) {console. log (data); <span style = "font-family: Arial, Helvetica, sans-serif;"> keep CT (data. isSameDimensions ). toBe (true); // compare the size </span> <pre name = "code" class = "html"> comparative CT (data. misMatchPercentage ). toBe (0); // asserted image difference

});});

OK. Congratulations!

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.