用protractor測試canvas繪製(一)

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）！