Protractor:Waiting for an element that is present but not displayed

Question

I've written a test to check if a element is visible on screen, in my case an angular-ui-bootstrap collapsible panel, aka, the "warning". The code works, but the tests used to fail ~75% of the time.

There is a collapse animation on the display of the "warning", and I can't shutwod the animation for the tests, since it's a jquery animation. The warning is always 'present' in the DOM, just collapsed when there is no reason to show it.

At first, I've tested with this code, which is pretty easy:

expect(element('.warning').isDisplayed()).toEqual(true);

The problem came when I needed to test that the element is not displayed, e.g. : once the warning is displayed, some action cause it to collapse.

That test:

expect(element('.warning').isDisplayed()).toEqual(false);

will pass only if the animation started. It will fail when the condition is checked while the element is still displayed.

I've came up with two solutions.

The easy one using a ptor.driver.sleep(2000). Is slows my tests and is not acceptable.

The hard, ugly one, but that gives me good results:

exports.isWarningDisplayed = function (expectedVisibility) {
  return ptor.driver.wait(function () {
     if (expectedVisibility) {
       return element(by.css('.warning')).isDisplayed().then(function(visibility) {
         return visibility === expectedVisibility;
       });
      } else {
        return element.all(by.css('.warning .collapse.in')).then(function(items) {
          return items.length === 0;
       });
      }
    }, 2000).then(function() {
      return element.all(by.css('.warning .collapse.in'));
    }).then(function (items) {
      return items.length > 0;
    });
};

My problem is that it just feels awfully wrong. Have you found a better way to handle that situation? My expectation would be to have something like:

expect(element('.warning').not.isDisplayed()).toEqual(true);

...but there is no .not in protractor or webDriver AFAIK.

Answer 1

I had a similar issue - wanting to test for when an element is no longer disabled. I struggled trying to work around things without the .not test and then realized that I could just move the 'not' test into the css selector:

// we're looking for when the element doesn't have a .disabled class
var availableElement = by.css('.some-class:not(.disabled)');
browser.wait(function() {
  return ptor.isElementPresent(availableElement);
}, 30000);

expect(ptor.isElementPresent(availableElement)).toBeTruthy();

Not sure if it helps but I had a moment of clarity so thought I would share.

Answer 2

Using the elementexplorer (https://github.com/angular/protractor/blob/master/docs/debugging.md) I looked at the protractor object and found an answer that is working wonderfully for me:

var el = element(by.id('visibleElementId'));
browser.driver.wait(protractor.until.elementIsNotVisible(el));

Answer 3

expect(ptor.isElementPresent(by.css('.warning'))).toBe(false);

This is another way of checking if something is displayed on the page or not