用protractor測试canvas绘制(二)
上一篇写了通过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串怎么来呢?
先来说要測试的串,也非常easy,用代码到浏览器里去截。由于仅仅測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。大公告成。可喜可贺,可喜可贺
用protractor測试canvas绘制(二)的更多相关文章
- canvas绘制二次贝塞尔曲线----演示二次贝塞尔四个参数的作用
canvas中绘制二次贝塞尔曲线的方法为ctx.quadraticCurveTo(x1,y1,x2,y2); 四个参数分别为两个控制点的坐标.开始点即当前canvas中目前的点,如果想从指定的点开始, ...
- 谈谈单元測试之(二):測试工具 JUnit 3
前言 上一篇文章<为什么要进行烦人的单元測试?>讨论了一下现阶段软件开发中,程序猿们測试情况的现状.这篇文章中,我打算介绍一下单元測试的工具(插件).而且推荐大家以后在开发中,真正的用上单 ...
- James Whittaker的软件測试戒律(二)
摘录自<探索式软件測试>(注:作者模仿了圣经十诫的语气和内容编写了软件測试戒律) 1.汝应用大量输入重复锤炼汝之应用程序 2.汝应贪图汝之邻居的应用程序 3.汝应亲自寻找睿智的预言家 4. ...
- amazeui+canvas绘制二维码
<link rel="stylesheet" type="text/css" href="css/amazeui.min.css"/& ...
- HTML5 Canvas 绘制二十四字真言钟表
代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...
- canvas 绘制二次贝塞尔曲线
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- ESP8266学习笔记1:怎样在安信可全功能測试板上实现ESP-01的编译下载和调试
近期调试用到了安信可的ESP-01模块,最终打通了编译下载调试的整个通道,有一些细节须要记录,方便兴许的开发工作. 转载请注明:http://blog.csdn.net/sadshen/article ...
- OpenGL学习脚印:深度測试(depth testing)
写在前面 上一节我们使用AssImp载入了3d模型,效果已经令人激动了.可是绘制效率和场景真实感还存在不足,接下来我们还是要保持耐心,继续学习一些高级主题,等学完后面的高级主题,我们再次来改进我们载入 ...
- Unityclient通信測试问题处理(二)
Unityclient通信測试问题处理(二) 在client的通信測试过程中.场景载入的问题给自己带来了不小的麻烦.由于消息的解析方法在单独的监听线程中调用,这也就意味着无法在消息的解析方法中调用Un ...
随机推荐
- MyEclipse找不到install new software
Window->Preferences->Capabilities-> classic update(勾选即可) 勾选后会出现software updates,下面按照help-&g ...
- Android数据存储的5种方法
--使用SharedPreferences存储数据 --文件存储数据 --SQLite数据库存储数据 --使用ContentProvider存储数据 --网络存储数据 Preference,File, ...
- PKUSC2017 游记 密码:blog密码
退役之前,写点破事乐呵乐呵 省选滚大粗 报了PKU和THU的SC 果然THU直接审核不通过... 于是就来到了PKU 滚粗狗就又续命几天. Day1 上午考数学 喜闻乐见啥都不会 出来一对题 ...
- [转]使用ThinkPHP框架快速开发网站(多图)
本文转自:http://blog.csdn.net/ruby97/article/details/7574851 这一周一直忙于做实验室的网站,基本功能算是完成了.比较有收获的是大概了解了ThinkP ...
- Ch03 React/JSX/Component 簡介
Facebook 本身有提供 Test Utilities,但由于不够好用,所以目前主流开发社群比较倾向使用 Airbnb 团队开发的 enzyme,其可以与市面上常见的测试工具(Mocha.Karm ...
- Moto P30(XT1943-1) 免解锁BL 免rec 保留数据 Magisk Xposed ROOT 救砖 ZUI 4.0.374
>>>重点介绍<<< 第一:本刷机包可卡刷可线刷,刷机包比较大的原因是采用同时兼容卡刷和线刷的格式,所以比较大第二:[卡刷方法]卡刷不要解压刷机包,直接传入手机后用 ...
- 六时车主 App 隐私政策
六时车主 App 隐私政策 本应用尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,本应用会按照本隐私权政策的规定使用和披露您的个人信息.但本应用将以高度的勤勉.审慎义 ...
- 开发者自建IM服务器必须要解决的几个问题!
有很多朋友的项目需要用到即时通讯,几年前鄙人的项目也是如此,当年没有选择,只能自建了IM服务器,几年下来跨了不少的坑,想想都甚是后怕.总结此文为后来还想自建IM的朋友提个醒,或许能找到更好的解决之路. ...
- 详谈java集合框架
1.为什么使用集合框架 当我们并不知道程序运行时会需要多少对象,或者需要更复杂方式存储对象——可以使用Java集合框架 2.Java集合框架包含的内容 接口:(父类)Collection接口下包含Li ...
- Oracle、Db2、SqlServer、MySQL 数据库插入当前系统时间
做易买网项目,由于对数据库插入系统时间不了解,常常遇到的问题: 1.java.sql.SQLException: ORA-01861: 文字与格式字符串不匹配.原因:由于获取系统时间类型不对,应为sy ...