上一篇写了通过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读取
kgshop金刚网店系统
下载
KgShop,是国内一款快速／稳定／安全的开源电子商城系统，采用linux,mysql,srutsEX,hibernate,ejb3等技术，Kghop第一版诞生于2010年，经过多年开发，Kgshop系统已拥有快速、稳定、支持大量并发访问等软件特性，是10万人在线的JAVA商城优秀解决方案。KgShop拥有良好的模板机制，易于进行二次开发。Kgshop每一行代码都经过严谨的测试，汇聚大批工程师多年
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 = getBase64('期望图路径.png',"image/png");
browser.executeScript(getCanvasBase64()).then(function(canvasBase64){
return browser.executeAsyncScript(compareImage(),reseblejs,canvasBase64,expectBase64str);
}).then(function(data){
console.log(data);
expect(data.isSameDimensions).toBe(true);//比较大小 expect(data. misMatchPercentage).toBe(0);//断言图像差异
});});
以上就是用protractor测试canvas绘制(二) 的内容，更多相关内容请关注PHP中文网（www.php.cn）！
