title: Protractor:Waiting for an element that is present but not displayed
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>At first, I've tested with this code, which is pretty easy:</p>
  
  <pre><code>expect(element('.warning').isDisplayed()).toEqual(true);
  </code></pre>
  
  <p>The problem came when I needed to test that the element is <em>not</em> displayed, e.g. : once the warning is displayed, some action cause it to collapse. </p>
  
  <p>That test:</p>
  
  <pre><code>expect(element('.warning').isDisplayed()).toEqual(false);
  </code></pre>
  
  <p>will pass only if the animation started. It will fail when the condition is checked while the element is still displayed.</p>
  
  <p>I've came up with two solutions.</p>
  
  <p>The easy one using a <code>ptor.driver.sleep(2000)</code>. Is slows my tests and is not acceptable.</p>
  
  <p>The hard, ugly one, but that gives me good results:</p>
  
  <pre><code>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 &gt; 0;
      });
  };
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>expect(element('.warning').not.isDisplayed()).toEqual(true);
  </code></pre>
  
  <p>...but there is no <code>.not</code> in protractor or webDriver AFAIK.</p>