用protractor测试canvas绘制(二)
来源:互联网 发布:威斯汀酒店知味餐厅 编辑:程序博客网 时间:2024/06/08 03:55
上一篇写了通过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,大公告成,可喜可贺,可喜可贺
0 0
- 用protractor测试canvas绘制(二)
- 用protractor测试canvas绘制(一)
- Web自动化测试-Protractor基础(二)
- canvas 二 canvas绘制表盘,及canvas曲线的绘制
- 绘制Canvas的使用二
- canvas之二:绘制三角形
- Protractor
- HTML5 Canvas绘制渐变(二)
- Canvas学习--绘制正五角星(二)
- Canvas学习(二):绘制特殊矩形
- 【canvas学习笔记二】绘制图形
- HTML5用canvas绘制心形线
- 用canvas 绘制一个灰太狼
- android 用canvas绘制虚线
- 用 Canvas 绘制实时时钟
- protractor自动化测试定位页面元素
- Web自动化测试-Protractor基础(一)
- canvas绘制
- UI--Android中的状态切换按钮自定义
- fragment的注意事项
- Logistic回归
- Edit Distance
- Xcode5.1离线下载安装及使用iOS5模拟器进行开发调试的方法
- 用protractor测试canvas绘制(二)
- 待解决问题
- nyoj 587 blockhouses 【简单DFS】
- Matlab之print,fprint,fscanf,disp函数
- IDL save postscript file
- openstack学习笔记----devstack安装过程中Access denied for user 'root'@'localhost' (using password: YES)解决方案
- leetcode 39 : Combination Sum
- 二进制转化为十六进制
- 黑马程序员-----网络编程