用protractor测试canvas绘制(一)

黄舟

发布： 2017-02-25 13:10:59

原创

1763人浏览过

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应该也是一样的。

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

青鸟内测（手机app封装、托管系统）

注意：请在linux环境下测试或生产使用青鸟内测是一个移动应用分发系统，支持安卓苹果应用上传与下载，并且还能快捷封装网址为应用。应用内测分发：一键上传APP应用包，自动生成下载链接和二维码，方便用户内测下载。应用封装：一键即可生成app，无需写代码，可视化编辑、直接拖拽组件制作页面的高效平台。工具箱：安卓证书生成、提取UDID、Plist文件在线制作、IOS封装、APP图标在线制作APP分发：