WebElement.clear() Does Not Update Model

[guillermosnipe]

Issue #301 was closed, but the issue is still reproducible:

Calling WebElement.clear() on an input element does not appear to update the associated model.

View:

<input ng-model="foo">
<div>{{foo}}</div>

Spec:

it("should update the model", function(){
    var input = element(by.css("input"));
    input.sendKeys("bar");
    input.clear();
    expect(element(by.css("div")).getInnerHtml()).toBe(""); // Fails, because it's still "bar"
});

@wlingke provided a workaround on Jan 17, 2014 and I can confirm that it still works:

I had a similar issue with a directive I was using and sendKeys not updating the model. This solution worked for me though I am not sure if it will work for you all:

field.sendKeys(protractor.Key.chord(protractor.Key.CONTROL, "a"));
field.sendKeys(protractor.Key.BACK_SPACE);
field.clear();

[guillermosnipe]

I've also experienced this issue while testing a login component

it('should run validations', async function () {
  await password.sendKeys('a');  
  await password.sendKeys(protractor.Key.BACK_SPACE);  
  await username.click()  // this line triggers a blur event on the password field
  expect(await passwordError.getText()).toMatch('Password is required');
});

clear() makes my test to fail by updating the model in the wrong way. The code above makes the trick, this workaround was provided by @wlingke on Jan 17, 2014

[cnishina]

So getInnerHtml is not an actual API call. What version of Protractor are you using here?

[guillermosnipe]

@cnishina thanks for your reply. You're correct, I took this code snippet from the original issue, even though the .clear() method still doesn't properly update the model.

So two things, regarding .getInnerHtml() you're absolutely right. Are you aware of this issue involving the protractor-accesibility-plugin? --> angular/protractor-accessibility-plugin#35

Regarding .clear() method issue:

Hi @juliemr I can confirm, that .clear() is still not working fine. I'm testing a form and the only way of making the test to work is by doing this:

it('should run validations', async function () {
  await password.sendKeys('a');  
  await password.sendKeys(protractor.Key.BACK_SPACE);  
  await username.click()  // this line triggers a blur event on the password field
  expect(await passwordError.getText()).toMatch('Password is required');
});

clear() makes my test to fail by updating the model in the wrong way.