Setting an Angular model using Protractor

Question

I'm trying to emulate a user story on my website with Protractor.

The user has to type in an input that uses auto-completion. In real life, the user has to type some text in the input, then select the right proposition with either her mouse or more naturally her downarrow key.

The problem is that I can't seem to simulate that with Protractor. element.sendKeys just does not allow you to do that. I have tried in a dozen different manners and it yields unpredictable results at best.

So I would like to manipulate the ng-model behing my input directly. Is there a way to access the scope of an element from Protractor and call functions/set properties on it?

Here is a simplified version of my problem :

View :

<div ng-controller="MyController"> 
  <input id="my-input" ng-model="myModel"/>
</div>

Controller :

 myModule.controller('MyController', ['$scope', function($scope){
   $scope.myModel = "";
   //[...]
 }]);

e2e Protractor test :

describe("setting myModel to a fixture value", function(){
  it("should set myModel to 'a test value'", function(){
    var myInput = element('my-input');
    // Now what?
  });
});

Answer 1

You can use .evaluate() to set your model value directly:

var elm = element(by.model("obj.field"));
elm.evaluate("obj.field = 'test';");

To get the model value:

elm.evaluate("obj.field").then(function (value) {
    console.log(value);
});

Answer 2

In this answer: How to select option in drop down protractorjs e2e tests

They use this: .sendKeys(protractor.Key.ARROW_DOWN); for sending DOWN arrows.

It worth a try.