首页 > web前端 > H5教程 > 正文

用protractor测试canvas绘制(一)

黄舟
发布: 2017-02-25 13:10:59
原创
1516 人浏览过

protractor是angular那帮人搞得一个e2e的测试框架,本质上是用的webdriver。

测试canvas,主要就是图像的比较,搜了搜,没有找到太好的nodejs库,所有还是用之前用过的resemblejs。

resemblejs用了Image和Canvas,所以是不能直接在nodejs里用的。

github上有个人搞了个node-resemble,但是用到了一个c写的node-canvas,要编这个又要用安装python和vc的运行库,听上去就很麻烦,也难怪只有2星。

让resemble直接在browser中运行不就ok了吗?

这就要用到browser的executeAsyncScript方法。

先来讲讲executeAsyncScript

这个方法就是把js代码放到browser环境中运行,也就是在浏览器的环境中运行,dom的东西也就都可以用了,Image,Canvas神马的统统不在话下。

而且是异步的,其实有个同步的executeScript,用法差不多。

api就不贴了,直接说用法。

executeAsyncScript方法,是个可变参数的方法

第一个参数必须是一个方法,也就是在浏览器中要执行的代码。

比如:

function(){
    console.log("我是一个方法");
};
登录后复制


然后后面可以写任意个参数,而在第一个参数的方法中可以使用arguments数组来依次取得这些参数

比如:

function(){
登录后复制
console.log("我是一个方法,我有三个参数")
    var p1=arguments[0];
    var p2=arguments[1];
    var p3=arguments[2];
};
登录后复制

因为是异步的,所以执行的结果需要用一个回调函数返回来,这个回调函数webdriver已经准备好了,就是arguments的最后一个参数。

所以,第一个参数的完整样子应该是

function(){
    console.log("我是一个方法,我有三个参数")
    var p1=arguments[0];
    var p2=arguments[1];
    var p3=arguments[2];
    var callback=arguments[arguments.lenght-1];
    callback("返回");
};
登录后复制

executeAsyncScript方法的返回值是个promise

所以整个函数调用起来应该是这个样子的

browser.executeAsyncScript("function(){console.log("前面写过了我就不写了")}",p1,p2,p3)
登录后复制
.then(function(result){
        console.log("结果是"+result);
    });
登录后复制

then的方法中结果callback的结果。

如果不用protractor只用webdriver应该也是一样的。

好了,写了半天没有进正题,就先这样,在下一篇再写。

 以上就是用protractor测试canvas绘制(一) 的内容,更多相关内容请关注PHP中文网(www.php.cn)!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板