title: How to explain using browser.sleep in protractor
body: <p>I'm a new to protractor,and I'm trying to test popover event,
  here is my code:</p>
  
  <pre><code>    describe('popover directive', function() {
          var buttons= element.all(by.tagName('button'));
  
          it('should show the popover title by clicking', function() {
              var popTitle="testTitle";               
              var popContent="testContent";                   
  
              element(by.model('title')).clear().sendKeys(popTitle);     
              element(by.model('content')).clear().sendKeys(popContent).then(function(){
                   buttons.get(0).click().then(function(){
                       browser.sleep(1000);
                       expect(element(by.className('popover-title')).getText()).toMatch(popTitle);                
                       expect(element(by.className('popover-content')).getText()).toMatch(popContent);
                   });    
               });                    
              buttons.get(0).click(); 
              browser.sleep(1000);      
              expect(element(by.css('[class="popover fade top in"]')).isPresent()).toBe(false);      
          });
      }); 
  </code></pre>
  
  <p>1.If I don't add delay time code like <code>browser.sleep()</code>, the test will fail and show a message:</p>
  
  <pre><code>NoSuchElementError: No element found using locator: By.className('popover-title')
  </code></pre>
  
  <p>Is that possible not to add delay time code ...like <code>browser.sleep()</code>? If that is impossible, how to make sense to set the sleep time well? Is that have some connection with CSS animations? <br/><br/>
  2.Using <code>browser.waitForAngular()</code> or <code>click().then(function(){...})</code> instead of <code>browser.sleep()</code> seems no work, will get the same error message.<br/><br/></p>
  
  <p>That would be great if someone can answer these questions, thanks a lot.</p>