javascript - Protractor 等待动画完成

Question

在我们的应用程序中，我们有一些问题需要回答，这些问题会更新进度条。目前，我有一个等待 HTML 属性更改的函数，它适用于大多数情况，但它对进度条有点挑剔，因为当进度条从 0-10% 等移动时，动画会持续 1-2 秒。所以失败我目前面临的问题是:Expected 11 to be within range 12, 14。

代码:

Util.prototype.waitForAttributeChange = function (el, attr, time) {
    var timeout = time || 0,
        currentAttr;

    el.getAttribute(attr).then(function (val) {
        currentAttr = val;
        return currentAttr;
    }).then(function () {
        return browser.wait(function () {
            return el.getAttribute(attr).then(function (val) {
                return val !== currentAttr;
            });
        }, timeout);
    });
};

用法:

Util.waitForAttributeChange(Page.progressBar(), 'style', 10000).then(function () {
    expect(Page.getProgressBarValue()).toBeWithinRange(12, 14);
};

问题:抓取的值不是进度条的最终结果，抓取的时候还在移动(因为我的函数是等待属性变化的，此时属性确实发生了变化)

问题:有没有其他方法可以让我等待动画，特别是等待它完成？和/或这是否可能不使用 browser.sleep()？

Answer 1

您可以使用 Expected Conditions 解决此问题.

每当我需要等待元素可见然后等待它消失后再执行下一步时，我都会使用以下方法。这对于可能会阻止与其他元素交互的临时确认模式很有帮助。

let waitTimeInSeconds = 15;
let EC = protractor.ExpectedConditions;

secondsToMillis(seconds) {
    return seconds * 1000;
}

waitToBeVisible(element: ElementFinder) {
    browser.wait(EC.visibilityOf(element), this.secondsToMillis(waitTimeInSeconds), 'The element \'' + element.locator() + '\' did not appear within ' + waitTimeInSeconds + ' seconds.');
}

waitToNotBeVisible(element: ElementFinder) {
    browser.wait(EC.not(EC.visibilityOf(element)), this.secondsToMillis(waitTimeInSeconds), 'The element \'' + element.locator() + '\' still appeared within ' + waitTimeInSeconds + ' seconds.');
}