Logo Questions Linux Laravel Mysql Ubuntu Git Menu

Setting an Angular model using Protractor

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"/>

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?
like image 816
Valentin Waeselynck Avatar asked Dec 26 '22 10:12

Valentin Waeselynck

2 Answers

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) {
like image 110
alecxe Avatar answered Dec 28 '22 05:12


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.

like image 22
Lajos Veres Avatar answered Dec 28 '22 07:12

Lajos Veres