javascript - Protractor :使用 Canvas 元素 - ng-if/ng-show

Question

我是 Protractor 和 Angular JS 页面的新手。

对于我的端到端测试，我需要验证我的 Canvas 是否已收到至少一张图像(有一个 websocket.io 可以填充此 Canvas 中的一些图像)。

现在我应该验证 canvas 是否开始接收到该图像。

我的 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>
	  

这是我的期望:

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

但它会在第一张图片出现在 Canvas 中之前返回 true。

Answer 1

正如@finspin 指出的那样，您的canvas 元素可能始终可见，但同时高度为0。您可以通过 browser.wait() 等待 height 值大于零和 getSize() :

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);