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

来源：https://stackoverflow.com/questions/20811579/how-to-handle-spinners-using-protractor

标签

angularjs

selenium-webdriver

protractor