How to handle Spinners using Protractor

问题:

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.

回答1:

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

回答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.

回答3:

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