Protractor 3.1.1 + Angular2: Could not find testability for element

Question

I am running a simple HelloWorld sample with Protractor 3.1.1 and Angular2, but this thing keeps telling me Could not find testability for element . I googled the Internet for some information about the error, but no luck, it seems to be a new sort of exception that not so many have faced.

This is the component I'm using:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>' +
    '<h2>{{myName}}</h2>' +
    '<input id="someId" [(ngModel)]="myName"/>'
})
export class AppComponent {
    myName = 'Joe';
}

This is the Protractor config file:

exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: [
    'e2e/*.js'
  ],
  baseUrl: 'http://localhost:3000'
};

And this is the Protractor scenario I am running:

describe('angularjs homepage', function() {
    it('should say my name', function() {
        browser.get('/index.html');
        var greeting = element(by.id('someId'));
        expect(greeting.getAttribute('value')).toEqual('Joe');
    });
});

The webpage loads normally with the template HTML rendered, but Protractor thinks the resulting webpage is not an Angular webpage, now, why is that? And obviously, if I inspect the resulting webpage, it is only the resulting HTML of the processed Angular code, am I doing something wrong?

This is the complete error:

Error: Failed: Error while waiting for Protractor to sync with the page: "Could not find testability for element."

If I run a simple test as the Protractor Tutorial says, using this demo page: http://juliemr.github.io/protractor-demo/ , it works as expected, so something has my Angular2 code that the Protractor is not working with it, but I already ran out of ideas, any one knows what is happening?

UPDATE 23-02-2016

After some research I found that to use Protractor with Angular2, there must be an additional configuration line in the config file:

useAllAngular2AppRoots: true

such that conf.js now looks like:

exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: [
    'e2e/*.js'
  ],
  baseUrl: 'http://localhost:3000',
  useAllAngular2AppRoots: true
};

or include the app root explicitly with:

rootElement: 'my-app'

After this update all calls to find an element by.id() work OK, but if you pretend to use any of the locators by.model() or by.binding() , it will simply fail with the message UnknownError: unknown error: angular is not defined . No idea why.

Answer 1

Apparently there is a bug in that commit. Check this! .

But for now you can run your tests using browser.executeScript('window.name = "NG_ENABLE_DEBUG_INFO!"');