Protractor - unknown error: angular is not defined when using by.model

Question

I'm working on writing some protractor tests for my Angular component and keep getting an error "unknown error: angular is not defined" when I try to use by.model to select the input element.

Its odd because if I do this it works fine and pases:

it('should have an input element for searching', () => {
    var inputElement = element(by.model('searchText');
    expect(inputElement).toBeDefined();
});

But when I try to do something like this it fails with the angular undefined error:

it('should filter the search text', () => {
     var inputElement = element(by.model('searchText');
     expect(inputElement).toBeDefined();

     inputElement.clear()
     inputElement.click();
     inputElement.sendKeys('ICBC');

     var tableLengthRow = element.all(by.css('.animate-repeat').count();
     expect(tableLength).toBe(1);
});

If I replace this line:

var inputElement = element(by.model('searchText');

with this one:

var inputElement = element.all(by.tagName('input')).get(0);

and leave the rest as I have it the test passes.

Does anyone know why the first test above works with by.model but not the second one where I am actually clicking on the element?

And then how can I define angular on the page using Webpack and npm?

Thanks

Answer 1

by.model is not supported in Angular (angular2, angular4 and on).

The recommended alternative is by.css().

As per angular/protractor's current readme:

Protractor works with AngularJS versions greater than 1.0.6/1.1.4, and is compatible with Angular applications. Note that for Angular apps, the by.binding() and by.model() locators are not supported. We recommend using by.css().

Examples of the alternative at Angular Guide - E2E Tests:

Previous code               New code         Notes
by.model('$ctrl.query')     by.css('input')  The model matcher relies on AngularJS ng-model
by.model('$ctrl.orderProp') by.css('select') The model matcher relies on AngularJS ng-model