用protractor測試canvas繪製(二)，protractorcanvas

用protractor測試canvas繪製(二)，protractorcanvas

上一篇寫了通過webdriver在瀏覽器環境下非同步呼叫js代碼。

今天進入正題。

其實有了executeAsyncScript，一切就呼之欲出了。

直接上代碼：

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串，作為參數依次傳進來

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讀進來就可以了

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

下面的問題是，我用於比較的兩個base64串怎麼來呢？

先來說要測試的串，也很簡單，用代碼到瀏覽器裡去截，因為只測canvas，所以用toDataUrl就可以了。

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

這次用executeScript來調，是同步的，所以要return

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

然後期望圖則還是用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};

好了，把上面所有的結合起來，就是我們的case了

h

it('測一像一不一樣', function(){    var expectBase64str = <span style="font-family: Arial, Helvetica, sans-serif;">getBase64</span>('期望圖路徑.png',"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);//斷言映像差異

});});

ok，大公告成，可喜可賀，可喜可賀

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。