Protractor Wait for Animation to Complete

Question

In our application, we have some questions to answer that will update a progress bar. Currently, I have a function that waits for HTML Attribute changes which works for most things, but it's a little finicky for the progress bar since the animation occurs over 1-2 seconds as the bar moves from 0 - 10% etc. So the failure I'm currently facing is things like: Expected 11 to be within range 12, 14.

Code:

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

Usage:

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

Problem: The value grabbed is not the end result of the progress bar, it's still moving when it's grabbing it (because my function waits for Attribute changes, and the attribute did change at this point)

Question: Is there another way I can wait for an animation, specifically waiting for it to be completed? And/or is this possible without using browser.sleep()?

How about [disabling all angular animations](http://stackoverflow.com/questions/26584451/how-to-disable-animations-in-protractor-for-angular-js-application)? — alecxe, Jun 06 '16 at 12:36
Yea I saw that post -- but wasn't sure if I wanted to do it. Is there any downside to disabling them? Would it introduce any unexpected behavior? — Gunderson, Jun 06 '16 at 12:39
I personally don't remember having any problems after disabling animations. On the contrary, I remember removing extra `browser.wait()`s calls. Try it out and see if it helps. Thanks. — alecxe, Jun 06 '16 at 13:01

score 2 · Answer 1 · answered Sep 05 '17 at 18:24

You might be able to solve this problem by using Expected Conditions.

I use the below methods whenever I need to wait for an element to be visible then wait for it to go away before executing the next step. This is helpful for temporary confirmation modals that may block interaction with other elements.

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.');
}

Protractor Wait for Animation to Complete

1 Answers1