1. 程式人生 > >用protractor測試canvas繪製(一)

用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繪製()

protractor是angular那幫人搞得一個e2e的測試框架,本質上是用的webdriver。 測試canvas,主要就是影象的比較,搜了搜,沒有找到太好的nodejs庫,所有還是用之前用過的resemblejs。 resemblejs用了Image和Canvas,所

protractor測試canvas繪製(二)

上一篇寫了通過webdriver在瀏覽器環境下非同步呼叫js程式碼。 今天進入正題。 其實有了executeAsyncScript,一切就呼之欲出了。 直接上程式碼: var compareImage=function(){ return function(){

android 開發 View _12_ Canvas 繪製張圖片(部落格中演示Canvas畫驗證碼圖片)

package net.yt.yuncare.widgets; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import and

測試canvas繪製旋轉文字的效能

  canvas 繪製各種動畫效果時,我們經常會使用畫布旋轉,使繪製上去的元素有旋轉的效果。   最近在專案中碰到了很嚴重的效能問題,經常排查發現是因為繪製批量文字時使用了畫布旋轉,且每行文字的旋轉角度是不一樣的,每次繪製前都會去動態的改變畫布上下文context的旋轉角度值,導致CPU佔用太多。   而

arcgis api for js入門開發系列二十 HTML5 canvas繪製地圖 瓦片載入平移縮放

  終於開始可以寫程式碼了,手都開始癢了。這裡的程式碼僅僅是在chrome檢測過,我可以肯定的是IE10以下瀏覽器是行不通,我一直在考慮,是不是使用IE禁止看我的篇部落格,就是這群使用IE的人,給我加了很多工作量。     一個地圖的基本動作,無非就是載入資料,

IOS PushMeBaby(是測試ANPs的開源Mac項目)

cnblogs color ont log span 開源 接下來 font 註釋 ● PushMeBaby是一款用來測試ANPs的開源Mac項目 ● 它充當了服務器的作用,用法非常簡單 ● 它負責將內容提交給蘋果的APNs服務器,蘋果的APNs服務器再將內容推送給用戶

自己定義View時,到Paint Canvas的一些溫故,簡單的幀動畫(動畫 ,"掏糞男孩Gif"順便再提提onWindowFocusChanged)

eat android 內容 rri generated 簡單的 fadein spl onclick 轉載請註明出處:王亟亟的大牛之路 之前在繪畫的過程中提到了靜態的旋轉啊,縮放啊,平移等一些效果。那麽自己定義的View當然也有動態的效果也就是我們的

如何創作純 CSS 繪製支栩栩如生的鉛筆

效果預覽 線上演示 按下右側的“點選預覽”按鈕可以在當前頁面預覽,點選連結可以全屏預覽。 https://codepen.io/comehope/pen/PaZYBw 可互動視訊教程 此視訊是可以互動的,你可以隨時暫停視訊,編輯視訊中的程式碼。 請用 chrome, safari, e

微信小程式 canvas繪製的圖插入到分享中

用canvas繪製圖 createNewImg: function () { var that = this; var ctx = wx.createCanvasContext('mycanvas'); ctx.setFillStyle("#F4F4F4"); // context.set

Android 自定義控制元件 () ,柱狀圖 ,Canvas 繪製 柱狀圖 ,支援觸控操作

專案中,經常會用到統計圖表,個性化展示資料,增加趣味性,之前也用過百度Echarts來展示,效果很不錯,包括一些互動操作,不得不說,echarts幫我我們實現了絕大多數的需求,體積小不說,實現方式也很簡單,後來想了想,為什麼不用安卓Canvas繪製呢,畢竟是安卓開發攻城獅,下

word2vec 測試騰訊新聞語料 ()

有的效果還可以,有的不行,可能是資料太少了的原因。   效果比較好的詞: 1. Enter word or sentence (EXIT to break): 足球 Word: 足球  Position in vocabulary: 2249              

C語言繪製條標準的餘弦曲線

#include<stdio.h> #include<math.h> int main() { double y; int x,m; for(y=1;y>=-1;y-=0.1) { m=acos(y)*10; for(x=1;x&

HTML5製作坦克大戰遊戲+Canvas繪製基礎圖形——學習筆記

1.離線儲存:1)儲存到本地,可以離線瀏覽網頁  2)不用cookie(安全性不太高,來回互動的資料量比較大) 2.語音識別 3.影象識別 4.HTML5遊戲 5.CSS3的強大之處:動畫和各種選擇

Geogebra繪製種五角星形曲線

實際上類似的曲線可以做很多,參考Benice的部落格(或者此處上一篇部落格轉發的少量圖片),但是這個五角星形狀的曲線比較簡單。 我從來只是把網路上BBS或部落格之類的寫的東西當作一種消遣而不是研究,所以,不能指望對文字內容從語法上嚴格推敲,除非很有興趣也不太可能過問對我來

黑盒測試例設計集錦(

等價類劃分法 1.定義 是把所有可能的輸入資料,程式的輸入域劃分成若干部分(子集),然後從每一個子集中選取少數具有代表性的資料作為測試用例。該方法是一種重要的,常用的黑盒測試用例設計方法。 2.劃分等價類 等價類是指某個輸入域的子集合。在該子集合中,各個輸入資料對於揭露程式

12、Canvas繪製背景時鐘

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>

Android:檢視繪製() ------基本的繪圖操作Paint和Canvas

大家都知道Android的UI很強大,各種系統控制元件和自定義控制元件,實現了很多絢麗的效果。而這些都離不開我們這篇文章講到的Paint和Canvas。 Android提供了Canvas(畫布)和Paint(畫筆)用來實現檢視的繪製工作。 之所以把P

svg的折線(polyline)繪製顆五角星

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

canvas繪製的折線圖 +解析

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

wordcloud----canvas 繪製標籤雲/詞雲web版wordle(

大家來看這篇文章,想必都瞭解過wordle。但是wordle難以運用於自己專案的web展示。 於是我著手自己寫了一個,這裡給大家介紹一下方法。相信大家也能迅速的構建一個wordCloud, 該專案在gitHub地址:https://github.com/Leannechn/