javascript - Protractor 3.1.1 + Angular2: Could not find testability for element - Stack Overflow

admin管理员组

文章数量:1402807

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 ponent 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 plete 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: /, 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.

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 ponent 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 plete 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.

• javascript
• angular
• protractor

Share Improve this question Follow edited Apr 27, 2016 at 17:32 Machtyn 3,28088 gold badges4444 silver badges6969 bronze badges asked Feb 23, 2016 at 21:11 Joe AlmoreJoe Almore 4,3291010 gold badges5555 silver badges8282 bronze badges 5

• same problem, I guess I'll use by.id() or by.css() for the moment... – foch Commented Feb 25, 2016 at 10:51
• 1 You just saved me a lot of hassle buddy! – Fintan Kearney Commented Apr 11, 2016 at 0:31
• fixed it for me too! you should post the update as answer so others can easily find what the solution is. – OJ7 Commented Jun 17, 2016 at 21:00
• Your update solved it for me. Please, arrange it as the answer, so that people could credit you. – mark Commented Aug 25, 2016 at 1:01
• Thanks for the UPDATE. – Tao Zhang Commented Nov 4, 2016 at 18:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

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

With Protractor and Angular, add rootElement: 'my-app-root' in your protractor.conf.js where my-app-root is the element name (CSS selector). Configuration documentation available here.

本文标签： javascriptProtractor 311Angular2 Could not find testability for elementStack Overflow