Testing spinners using protractor on popup window

2
votes

In my Angular app, I am writing the automation test suites of the application using Protractor, and I faced with problem how to test spinners, to wait for the spinner to disappear from the screen. I have tried to create some reusable function for handling spinners, and look like it works fine, but when spinner is located on popup window I received error: "... Failed: stale element reference: element is not attached to the page document...", as I understand protractor couldn't find specified element, because after closing popup window, spinner removed from DOM with popup. In my function I have tried to use this protractor methods: browser.wait(EC.invisibilityOf($('#abc')), 5000); browser.wait(spinner.isDisplayed(),5000); As I understand the reason is that browser.wait runing in the loop inside condition until it comes true or timeout occurs, but I don't know haw to fix it. Please help ...

My lust function with additional checking for presents: this.selector - parent element (button)

waitBtnSpinner() {
    let spinner = this.selector.element(by.css('.btn-spinner'));
    spinner.isPresent().then((isPresent) => {
      if(isPresent) {
        spinner.isDisplayed().then((isDisplayed) => {
          return browser.wait(this.EC.invisibilityOf(spinner), 10000);
        })
      } else {
        return isPresent;
      }
    });
  };
2
javascriptangularjsseleniumprotractore2e-testing

2 Answers

0
votes

A more reliable way would be to wait for a single selector to return zero visible spinners. And to provide the proper messaging in case of failure, I would implement a "Condition" :

var By = webdriver.By;
var EC = webdriver.until;

// define a condition that is true when the locator doesn't match any element
EC.noElement = function (locator, message) {
  return new EC.Condition(message + ' ' + locator, function(driver) {
    return driver.findElements(locator).then(function(elements) {
      return elements.length === 0;
    });
  });
};

// define a condition that is true when there is no visible spinner
EC.noSpinner = EC.noElement(By.css('.spinner[ng-sow]'), 'for no visible spinner');


// usage to wait for no visible spinner
driver.wait(EC.noSpinner, 10000);

Note that you need to update the Css locator ".spinner[ng-sow]" with a locator matching a visible spinner in your page.

0
votes

Try this one.

element.all(by.model('model of the Spinner')).each(function (eachElement, index)
{
      eachElement.click();
      browser.driver.sleep(500);
      element(by.css('Unique Selector of the Spinner value')).click();
      browser.driver.sleep(500);
});

Hope this helps. :)