Protractor: clear on input element not updating model

[kenborge]

It does not seem like using clear on a input element updates the ngmodel(and triggers validation). The input field is empty in the page but the model hasn't changed value.

<input [(ngModel)]="model">
<h1>{{model}}</h1>

it('', () => {
    element(by.css('input')).clear()
    expect(element(by.css('h1')).getText()).toEqual('');
  });

Expected 'app works!' to equal ''.

• Node Version: 6.10.0
• Protractor Version: 5.1.1
• Angular Version: 2.4.9
• Browser(s): Chrome

[seanmay]

I believe this is an issue with Angular, more than Protractor.
If you were to imperatively set values on HTML elements, outside of angular, via the console or other means, my expectation is that would equally have no effect on your model.

If you were to have an Angular-integrated "clear" button which you clicked, or you were to replace the text in a user-like fashion, my expectation would be that your case would then work.

Equally, I believe you could use clear if there was no model binding on the element, whatsoever, and you had a "read input" button, which grabbed the element inside of angular and read in the value at that time, to propagate through your system. That might be a sub-optimal way to structure your app, however.

If I am missing something, please feel free to reopen this issue, or make feature requests, as applicable.

[kenborge]

I see your point that the underlying reason the model isn't updated is the way angular 2 works, and that it doesn't trigger by the way clear is implemented.
However seeing as protractor is a e2e framework for angular applications shouldn't that make it a protractor issue if parts of its api doesn't work anymore with core angular 2 mechanics(ngModel)

[seanmay]

You could make a case for it, as a feature, but then assuming you are calling .clear() on text inputs, and assuming that you can clear it to '', how do you support .clear() on dates, numbers, ranges, colours, et cetera, without introducing some concept of null or undefined or incompatible (or incorrect) assumptions that a program might not have had before, which comes from Protractor making business logic decisions based on your app?

I agree that it's problematic to have people assume that the full range of all WebDriver APIs is going to implicitly do the right thing in Angular.

I feel like the eventual solution to that is to provide a subset of the APIs, rather than advertising Protractor as Angular-wrapped WebDriver and leaking abstractions which don't map 1:1 into the Angular view model.

In this case, it would be to remove clear, and force people to set the value through regular UI input interaction methods, rather than to try to intuit what the application really wants there.

Then there are the backwards-compatibility concerns, to ensure that AngularJS and Angular continue to behave appropriately. There is more we can do to ensure that AngularJS and Angular applications each get the APIs they should expect, but that's a very big and breaking undertaking.

[x1c0]

So basically protractor does not work with template driven forms where we make use of ngModel.

Does anyone knows if it works using reactive forms?

Thank you!

[BorntraegerMarc]

@x1c0 no, protractor's .clear doesn't work with reactive forms