量角器：等待在Canvas上加载图像

Question

在Protractor中，我需要打开一个带有画布的非角度页面，该画布将填充图像。 然后我需要操纵图像并进行屏幕截图比较。 但是，我的问题是让测试等待图像加载。 如果我使用预期条件等待元素即

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()方法并等待它真实（未经测试）：

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