Protractor times out waiting for element that exists

Question

I'm starting some tests in my Angular 2 application and in the first test I'm having some problems.

I want to test the login page, so I am trying to fill email. Here is my test code:

describe('login page', function() {
    it('should login', function() {

        browser.get('http://localhost:3000/#/login');

        element(by.css('.form-control.ng-pristine.ng-valid.ng-untouched')).sendKeys('[email protected]');

    });
});

My render HTML code is:

<form class="login-form mt-lg ng-pristine ng-valid ng-touched">
   <!--template bindings={}-->
   <!--template bindings={}-->
   <div class="form-group">
     <input class="form-control ng-pristine ng-valid ng-touched" name="email" placeholder="E-mail" type="email">
   </div>
   <div class="form-group">
     <input class="form-control ng-untouched ng-pristine ng-valid" name="password" placeholder="Password" type="password">
   </div>
 <div class="clearfix">
    <div class="btn-toolbar float-xs-right m-t-1">
     <button class="btn btn-primary btn-sm" type="submit">Log in</button>
    </div>
    <div class="float-xs-left m-t-1">
      <a class="mt help-block">Forgot your password?</a>
    </div>
  </div>
</form>

The "original" HTML code is:

<form class="login-form mt-lg" (ngSubmit)="login($event)">
  <div *ngIf="error" class="alert alert-danger">{{error}}</div>
  <div *ngIf="info" class="alert alert-info">{{info}}</div>
  <div class="form-group">
    <input type="email" class="form-control" name="email" placeholder="E-mail" [(ngModel)]="user.email" #email="ngModel">
  </div>
  <div class="form-group">
    <input class="form-control" name="password" type="password" placeholder="Senha" [(ngModel)]="user.password" #password="ngModel">
  </div>
  <div class="clearfix">
    <div class="btn-toolbar float-xs-right m-t-1">
      <button [disabled]="loading" class="btn btn-primary btn-sm" type="submit">Entrar</button>
    </div>
    <div class="float-xs-left m-t-1">
      <a class="mt help-block" (click)="modal.show()">Esqueceu sua senha?</a>
    </div>
  </div>
</form>

When I execute the test the browser opens, the page fully loads but then it times out:

Failed: Timed out waiting for asynchronous Angular tasks to finish after 11 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
While waiting for element with locator - Locator: By(css selector, .form-control.ng-pristine.ng-valid.ng-untouched)

If I search for this selector in Chrome console it returns the expected element:

document.querySelector('.form-control.ng-pristine.ng-valid.ng-untouched')

The problem is when the browser opens I can see the page fully loaded and the input is there! And after 11 seconds (or so) the browser closes with the error message. I also tryed to increase timeout on configuration file:

allScriptsTimeout: 50000

But it still does not identify the element:

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

Answer 1

I think I figured it out. For some reason in Chrome console network tab there is a websocket request as "Pending" so apparently Pratractor keeps waiting this request to finish. This request has 101 HTTP status, I really don't know what it means but after a quick search I learned that it is suposed to be marked as "Pending" in Chrome console.

To solve this issue I prevent syncronization:

browser.ignoreSynchronization = true;

And defined a timeout in configuration file:

allScriptsTimeout: 50000

And it worked!

Here is how the final code was:

describe('login page', function() {
    it('should login', function() {

        browser.ignoreSynchronization = true;

        browser.get('http://localhost:3000/#/login');

        element(by.css('.form-control.ng-pristine.ng-valid.ng-untouched')).sendKeys('[email protected]');

    });
});

If someone knows a better solution or how to avoid this "websocket" request please let me know.