How to handle Spinners using Protractor

Question

In my AngularJS application, for any page to load, there are two things which are loading First the content of the page and secondly some back-end resources. While back-end resources are loading, a spinner comes in the front and user is not able to do anything on the page contents.

Now while I am writing the automation test suites of the application using Protractor, I am not able to find a technique, to wait for the spinner to disappear from the screen before starting the test.

Please help me in this.

Answer 1

For those dealing with non-angular apps:

    browser.wait(
      EC.invisibilityOf(element(by.css(selector))),
      5000,
      `Timed out waiting for ${selector} to not be visible.`
    )

https://www.protractortest.org/#/api?view=ProtractorExpectedConditions.prototype.invisibilityOf

Answer 2

If you are waiting for something to happen you can use browsser.wait()

For example, if the spinner has the class name "spinner"

browser.wait(function() {
  // return a boolean here. Wait for spinner to be gone.
  return !browser.isElementPresent(by.css(".spinner"));
}, 20000);

The 20000 is the timeout in milliseconds.

Your test will wait until the condition is met.

Answer 3

IsDisplayed as you mentioned in Andres D's comment should be the right one to use for your situation. However, it returns a promise so you cant just use

return !$('.spinner').isDisplayed()

since that will just always return false.

Try the below and see if it works.

browser.wait(function() {
  return $('.spinner').isDisplayed().then(function(result){return !result});
}, 20000);