How to handle Spinners using Protractor

how to handle element not found in protractor
protractor expectedconditions
protractor testing
protractor check if element is not visible
protractor wait for element to disappear
how to avoid browser sleep in protractor
wait until element is visible protractor
protractor api

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.


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

Handling spinners in Protractor · Issue #410 · angular/protractor , Also please note that my spinner element remain in the body tag only. I tried waiting with following. browser.wait(function() { // return a boolean  Wait for spinner to be gone. return !browser.isElementPresent(by.css(".spinner"));}, 20000); but it did not work as spinner always remains on the page, it just hides when all loading of resources are done. Also applying sleep is not a suitable option as time for which spinner will remain on the page is govern by the resources which will load


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.

How to handle Spinners using Protractor - angularjs - html, 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  Protractor Browser Commands- Refresh the current page in Protractor. This refresh function is used for making full reload of the current page. This method assumes that the current application is angular application and it waits for angular to load before executing the next command. It’s not recommended to use if the page is not angular.


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

‍ 🛢️ How to handle spinners using a protractor, IsDisplayed , as you mentioned in Andres D's comment, should be right for your situation. However, it returns a promise, so you cannot use. return !$('.spinner'). Creating First Protractor Test Case by using sample AngularJS application. Protractor needs the following two files to run. Configuration file; Spec file; Configuration file. The configuration file tells Protractor how to set up the Selenium Server, which tests to run, how to set up the browsers, and which test framework to use.


How to handle Spinners using Protractor, 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  In one of earlier post, we have how to handle multiple windows or popups in selenium, this post will explain how to handle popups or new windows in protractor using typescript. Protractor gives a method getAllWindowHandles() which returns all the windows currently browser is holding. and then we can access each window by using index, for e.g


How to handle Page and Element load times - HowTo, We tend to use thread / browser.sleep( ) / time.sleep() when the Automation needs to wait until the spinner goes off, but that doesn't mean the a look at the package content here for Java, here for TypeScript (Protractor),  This video will explain how to handle angular tables or ng-repeater elements using protractor tool. and also know how to use the xpath to fetch rows and columns to get text or perform action on


Correct Strategy for Element to be not present in DOM, Given(/^User waits for some time for spinner to disappear$/, async ()=>{ await was able to overcome this using visibilityOf which is defined by Protractor API as. In this tutorial, we would be learning about Multiple browser windows/tabs, How to handle multiple browser windows and tabs in protractor with browser.getWindowHandles(), also how to handle if there are only two windows and more than two windows