Use protractor to test canvas rendering (2), protractorcanvas

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.