angularJS Protractor e2e Testing TypeError: Object [object Object] has no method 'input'

Question

I have an app with two pages...the first page is the landing page where there is a login button...once the user click this login button they are redirected to login.html....where there are two inputs. One for user name and one for password.

The relevant code looks like this:

index.html

<a ui-sref="login" class="fa fa-sign-in" href="/login">&nbsp;Login</a>

and

login.html

<input type="text" id="username" name="username" placeholder="Username" ng-model="user.username" required="" autocomplete="off" class="ng-pristine ng-invalid ng-invalid-required">

<input type="password" name="password" placeholder="Password" ng-model="user.password" required="" autocomplete="off" class="ng-pristine ng-invalid ng-invalid-required">

In my test I first click the login button and check that I have correctly redirected to the new page. This test passes, but then I get an error when I try to type into these input boxes, as if the boxes didn't exist. I tried to do browser sleep but that didnt work either.

// in test/e2e/main.spec.js
describe('E2E: main page', function(){

'use strict';

var ptor;


// keep track of the protractor instance
beforeEach(function(){
    browser.get('http://127.0.0.1:9000/');
    ptor = protractor.getInstance();
});

it('it should load the login page once the login button is clicked', function(){

    var link = element(by.css('.fa.fa-sign-in'))

    link.click();


    browser.sleep(4000);

    expect(ptor.getCurrentUrl()).toMatch(/\/login/);

    element(by.input('user.username')).sendKeys('test');
    element(by.input('user.password')).sendKeys('test');

});


});

Any advice?

UPDATE:

Using by.model instead of by.input works but the book I was reading said the first one should work too..strange.

Answer 1

The by.input() locator has been depreciated and you should use by.model() however you could define your own if you really need to, something like:

by.addLocator('input', function(model, opt_parentElement) {
  using = using || document;
  var prefixes = ['ng-', 'ng_', 'data-ng-', 'x-ng-', 'ng\\:'];
  for (var p = 0; p < prefixes.length; ++p) {
      var selector = 'input[' + prefixes[p] + 'model="' + model + '"]';
      var inputs = using.querySelectorAll(selector);
      if (inputs.length) {
          return inputs;
      }
   }
});

// To use the locator
element(by.input('username')).sendKeys('test');