Protractor: How to handle heavily animated webapp

[Darkbound]

Hello. I guess that this question is not really for here but I couldnt get help anywhere else. I am trying to test an angular app that is heavily animated (pretty much everything has some kind of animation, sliding and more). Currently Protractor does not wait for the elements to appear and tries clicking on them during a transition which causes errors and my tests file. This forces me to use browser.sleep(x) but it's too much.

An example test case that I have written:

var newUsername = 'Sumuser';

welcome.continueLink.click();  
bonus.takeBonus.isDisplayed().then(function() {                
    bonus.takeBonus.click();            
});
entrance.openEntrance.click();

browser.sleep(300);
loginBasic.openNormalLogin.isDisplayed().then(function() {
    loginBasic.openNormalLogin.click();
});

browser.sleep(300);
login.usernameField.isDisplayed().then(function() {
    login.usernameField.sendKeys(username);
});

login.passwordField.sendKeys(password);
login.loginButton.click();
infoBar.avatar.click();

browser.sleep(1000);
myProfile.editProfileButton.click();

browser.sleep(1000);
username.field.clear();
username.field.sendKeys(newUsername);
editProfileButtons.saveChanges.click();

browser.sleep(1000);
myProfile.username.getText().then(function (text){
    expect(text).to.equal(newUsername);
});

});
});

As suggested I have also tried disabling the animations:

onPrepare: function() {
var disableNgAnimate = function() {
    angular.module('disableNgAnimate', []).run(['$animate', function($animate) {
        $animate.enabled(false);
    }]);
};

browser.addMockModule('disableNgAnimate', disableNgAnimate);

}

These files added to my config file had no effect at all.

I have tried using .isDisplayed, isPresent and then clicking with no effect. Either there is something fundamentally wrong with my test writing style or there is something wrong elsewhere.

Every line that is preceeded by browser.sleep(x) in my test case above is a possible test breaker.

I have spent about two weeks now looking for a solution to my problem and I could not find any.

Please help!

[drptbl]

I'm also having problems with disabling the animations and waiting for the response on my issue. Some of animations are disabled, some not really. This also happens when I move between angular apps in same test case (like, do one thing on first angular app, then gets redirected to second - animations are again turned on when redirected to second angular app).

[hankduan]

If you can't disable your animation, you should probably use some kind of wait statement (as opposed to sleep). See https://angular.github.io/protractor/#/api?view=ExpectedConditions

[Darkbound]

Wait statements are not a solution. I still can't see any benefit of using Protractor instead of Selenium (except a few selectors). I need to know if the problem is in me, in Protractor or in the Website that I am testing. Everything that i read about Protractor is cool, it should synchronize with Angular, it waits for it and so on but in my case it does not happen. I need to know what is the problem, it is driving me crazy. I've spent 2+ weeks on this.

[hankduan]

The problem very likely lies in your app. Protractor only knows how to wait for Angular elements.
In other words, if your animation implementation uses window.setTimeout, neither Protractor nor Angular will know to sync with it.

The best solution is for you to disable your animation in your app. If your animation is from Angular, see http://stackoverflow.com/questions/26584451/how-to-disable-animations-in-protractor-for-angular-js-appliction. If your animation is from a third party library, you'll need another mechanism to disable it.

If you cannot disable animations, Protractor will still wait for your animation if it is Angular compatible. That means it uses Angular's $timeout and $http and $interval, instead of raw window.setTimeout, etc.

Lastly, if you have no control of that either, you'll need to resort to wait statements unfortunately.

For all other questions, please use stack overflow. You might be able to get more community answers too that way.

[ash-lionell]

@hankduan

If you cannot disable animations, Protractor will still wait for your animation if it is Angular compatible.

The best solution is for you to disable your animation in your app. If your animation is from Angular, see ...

If Protractor waits for Angular animations by default, why are you suggesting/recommending to disable them? Or should not Protractor at least offer flavors of Expected Conditions tailor made for handling animated content, like elementPositionToBeStable, elementStyleToBeStable, etc.?

[CrispusDH]

For resolving this issue I have created own conditions' predicate and use them in .wait() statement. You should understand how to catch that your animation is finished and the do smth with specific element, It is not a Protractor specific issue or Selenium or somebody else...