Protractor .sendKeys() not working on inputs with ngModel

Question

I haven't been able to find anything on this topic, so I figured I would ask.

I'm currently writing E2E tests on my Angular 5 application. E2E is being performed by Protractor as configured in a default Angular CLI generator project. I need the ability to change the value of a text input field from within my E2E tests.

My current code.

...
it('should submit report.',() => {
    page.setField("100");
...

The above references this class and method

import { browser, by, element } from 'protractor';

export class Page {

setField(text: string): Page {
    let field = element(by.id('myField'));
    field.sendKeys(text);
    return this;
}    
...

and my html.

<input id="myField" decimal="16" dataLoadedEvent="{{formatData}}" [(ngModel)]="rm.dataField" class="form-control input-sm">

It's very simple. Obviously I have generalized it for consumption... But hopefully it still gets the point across.

Things to note:

• If I remove the following from the html input field, .sendKeys() works

  decimal="16" dataLoadedEvent="{{formatData}}" [(ngModel)]="rm.dataField"
  

• If I just remove

  decimal="16" dataLoadedEvent="{{formatData}}" 
  

  sendKeys() still doesn't work. This means that the issue is with the [(ngModel)] binding that occurs on the field. Not with my custom decimal format directive.

So, my question is, what do I need to do to make .sendKeys() work with fields that are bound using [(ngModel)]?

Any help would be appreciated.

Answer 1

I was able to resolve this issue by doing the following:

field.clear().then(() => {
    field.sendKeys(text);
});

I had seen this solution while googling, but I was afraid of introducing extra async processes into the E2E tests (as often protractor does not react kindly to that). However, once I implemented the above, my fields started updating.

Hopefully this helps someone.

Answer 2

I also faced the same issue. I resolved as below.

element(by.css('[name="firstName"]')).sendKeys('Protector User');