title: Protractor sendKeys fails when using angular-http-auth to display login window
body: <p>I am using angular-http-auth and the example from <a href="http://witoldsz.github.io/angular-http-auth/" rel="nofollow">http://witoldsz.github.io/angular-http-auth/</a> to display my login form.</p>
  
  <p>Here is the index.html page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="rdx"&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="css/styles.css"&gt;
  &lt;/head&gt;
  
  &lt;body class="auth"&gt;
  
    &lt;div id="login-holder" style="display:none"&gt;
      &lt;div id="loginbox"&gt;
        &lt;div id="login-inner" ng-controller="UserController"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-sm-6 col-sm-offset-2"&gt;
              &lt;div class="page-header"&gt;&lt;h1&gt;Please Sign In&lt;/h1&gt;&lt;/div&gt;
              &lt;div ng-if="message" class="panel panel-danger"&gt;
                &lt;div class="panel-heading"&gt;Error&lt;/div&gt;
                &lt;div class="panel-body"&gt;{{message}}&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;form name="form" ng-submit="submit()"&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="control-label"&gt;Username&lt;/label&gt;
                  &lt;input class="form-control" ng-model="user.username" type="text" name="username" placeholder="Username" /&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="control-label"&gt;Password&lt;/label&gt;
                  &lt;input class="form-control" ng-model="user.password" type="password" name="password" placeholder="Password" /&gt;
                &lt;/div&gt;
                &lt;input id="login-button" class="btn btn-primary" type="submit" value="Login" /&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="content"&gt;
      &lt;nav class="navbar navbar-inverse" role="navigation"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a class="navbar-brand" href="#"&gt;AngularRDX&lt;/a&gt;
      &lt;/div&gt;
      &lt;ul class="nav navbar-nav"&gt;
        &lt;li ng-class="{ active: $state.includes('cases') }"&gt;&lt;a ui-sref="cases.list"&gt;Cases&lt;/a&gt;&lt;/li&gt;
        &lt;li ng-class="{ active: $state.current.name == 'about' }"&gt;&lt;a ui-sref="about"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;p ng-if="user.name" class="navbar-text navbar-right"&gt;Signed in as {{user.name}}&lt;/p&gt;
      &lt;/nav&gt;
  
      &lt;div class="container"&gt;
  
        &lt;div ui-view&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script src="angular/angular.js"&gt;&lt;/script&gt;
    &lt;script src="angular-ui-router/release/angular-ui-router.js"&gt;&lt;/script&gt;
    &lt;script src="angular-animate/angular-animate.js"&gt;&lt;/script&gt;
    &lt;script src="angular-http-auth/src/http-auth-interceptor.js"&gt;&lt;/script&gt;
    &lt;script src="jquery/dist/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It's handled in a directive like this:</p>
  
  <pre><code>angular.module('rdx.auth') 
  .directive('auth', function() {
    return {
      restrict: 'C',
      link: function(scope, elem, attrs) {
  
          var login = $('#login-holder');
          var main = $('#content');
  
          scope.$on('event:auth-loginRequired', function() {
            login.slideDown('slow', function() {
            main.hide();
          });
          scope.$on('event:auth-loginConfirmed', function() {
            main.show();
            login.slideUp();
          });
      }
    }
  });
  </code></pre>
  
  <p>In my Protactor test I trigger the login event by clicking on a menu item that makes a http request that is protected.  The server responds with a 401 and angular-http-auth broadcasts the event <code>event:auth-loginRequired</code> handled above. </p>
  
  <pre><code>it('should require a login and then display the list of cases', function() {
    browser.get('/'); 
    var usernameInput = element(by.model('user.username'));
    var passwordInput = element(by.model('user.password'));
  
    element(by.css('.navbar ul li')).click();
    expect(element(by.model('user.username')).isPresent()).toBe(true);
    //browser.sleep(500);
    usernameInput.sendKeys('admin');
    passwordInput.sendKeys('doit');
    element(by.id('login-button')).click();
  
    expect(element(by.css('.page-header')).isPresent()).toBe(true);
    var elems = element(by.repeater('c in cases').column('{{c.name}}'));
    expect(elems.getText()).toEqual('bob');
  });
  </code></pre>
  
  <p>Test fails: </p>
  
  <pre><code>==== async task ====
  WebElement.sendKeys([object Object])
  ==== async task ====
  Asynchronous test function: it("should require a login and then display the list of cases")
  Error
      at null.&lt;anonymous&gt; (/Users/csturm/dev/node/angularjs/rdx/test/e2e/cases.js:23:21)
  </code></pre>
  
  <p>Line 23 is: <code>usernameInput.sendKeys('admin');</code></p>
  
  <p>This test will work if I uncomment the <code>browser.sleep(500)</code> .. I believe this is because the jquery <code>slideDown</code> in the directive has completed by then.  </p>
  
  <p>Is there another way I can do this without the sleep?  Can I use angular animate instead or somehow block the test until the <code>event:auth-loginRequired</code> is handled?  </p>