分度器：画像がキャンバスに読み込まれるまで待つ

Question

分度器では、キャンバスを持つノンアングルページを開く必要があります。キャンバスには画像が挿入されます。その後、画像を操作してスクリーンショットの比較を行う必要があります。しかし、私の問題は、イメージが読み込まれるのを待つテストを取得することです。私が存在するか見えるように

browser.wait(expectedConditions.visibilityOf(element(by.tagName('canvas'), 20000); 

browser.wait(expectedConditions.presenceOf(element(by.tagName('canvas'), 20000); 

すなわち要素を待つことが予想条件を使用している場合は、canvas要素が存在し、表示されますが、画像はまだそれにロードされているので、画像のようにスクリーンショットの比較が失敗しましたそれが起こると通常半分の負荷がかかります。自分のコードにたくさんのbrowser.sleep（20000）文を挿入することで、イメージが完全に読み込まれるようにすることができますが、それはちょっと恐ろしいことです。

継続する前に画像の読み込みが完了するまで分度器を待つ方法を知っている人はいますか？またはこれを行うには、少なくとも少し良い方法ですか？

おかげ

Answer 1

あなたはカスタム期待条件を持つことによってそれを解決することができます。私は（テストしていません）あなたはキャンバスのgetImageData()方法を使用して、それがtruthyされるのを待つことができると思います。

function waitForCanvasToLoad(elm) { 
    return function() { 
     return browser.executeScript("!!arguments[0].getImageData();", elm.getWebElement()); 
    } 
} 

var canvas = element(by.tagName('canvas')); 
browser.wait(waitForCanvasToLoad(elm), 5000); 

Answer 2

あなただけの予想される長さの下にあることをエンコードされたキャンバスのを待つこともできます

var canvas = element(by.tagName('canvas')); 
browser.wait(EC.presenceOf(canvas), 6000); 

// wait for the encoded length to be over 2500 (must be adjusted depending on the canvas) 
browser.wait(() => browser.executeScript(
    (e) => e.toDataURL().length > 2500 
    , canvas.getWebElement()), 6000); 

色が黒でない場合にも設定される最後のピクセルのを待つこともできます

var canvas = element(by.tagName('canvas')); 
browser.wait(EC.presenceOf(canvas), 6000); 

// wait for the last pixel to be set (not black) 
browser.wait(() => browser.executeScript(
    (e) => [].some.call(e.getContext('2d').getImageData(e.width, e.height, 1, 1), Math.abs) 
    , canvas.getWebElement()), 6000);