分度器：キャンバス要素を使って作業する - ng-if/ng-show

Question

私は分度器と角度のJSページで新しくなっています。

end2endのテストでは、キャンバスに少なくとも1つの画像 （このキャンバスにいくつかの画像を埋め込むwebsocket.ioがあります）が届いているかどうかを検証する必要があります。

今のところ、キャンバスがその画像を受信した場合にのみ検証する必要があります。

私のhtmlページ：

<div class="terminal-screenshots" ng-class="{ online: isConnected() && vm.hasImage }"> 
 
     <canvas ng-show="isConnected() && vm.hasImage" style="width: 100%;" id="remoteTerminalCanvas"></canvas> 
 
     <span ng-if="!isConnected() || !vm.hasImage"> 
 
      {{ vm.display.message | translate }} 
 
     </span> 
 
</div> 
 
\t

これは私が期待している：

expect(element(by.id('remoteTerminalCanvas')).isDisplayed()).toBe(true); 

をしかし、最初の画像がキャンバスに表示する前に、それはtrueを返します。

Answer 1

@finspinが指摘したように、あなたのcanvas要素は常に見えるかもしれませんが、同時に高さが0であるかもしれません。あなたはbrowser.wait()とgetSize()を経由して、ゼロ以上であることをheight値を待つことができます。

var canvas = element(by.id('remoteTerminalCanvas')); 
browser.wait(function() { 
    return canvas.getSize().then(function (size) { 
     return size.height > 0; 
    }); 
}, 5000); 

別のオプションは、hasImageはbrowser.wait()とevaluate()を経由して真になるのを待つことです。

var canvas = element(by.id('remoteTerminalCanvas')); 
browser.wait(function() { 
    return canvas.evaluate("vm.hasImage").then(function (hasImage) { 
     return hasImage; 
    }); 
}, 5000);