Protractor: Waiting for text to be mutable

Question

I am trying to replace text in an input field. Given the original text foo , I am trying to replace it with bar .

In most cases, this works as expected, but intermittently I am seeing an issue where the result can be foobar , fooar , foor or even foo . This seems to imply that when my sendkeys() begins to execute, the text is sometimes in an immutable state, and then becomes mutable part way through the execution of sendkeys() .

I've tried using clear() to clear the input prior to sendkeys() but the behaviour doesn't change, clear() simply fails to remove the original text in some cases. I've also tried waiting for the original text to appear in the input as well as waiting for the input to become clickable and then clicking in it prior to calling sendkeys() . Again, these don't change the original behaviour.

Here is my input :

<input qva-select="" qv-enter="toggleEditMode()" type="text" maxlength="255" class="lui-input details-input ng-pristine ng-valid ng-not-empty ng-valid-maxlength ng-touched" ng-model="appModel.qTitle"> == $0

Original Protractor code was simply:

titleInput: this.element(this.by.model('appModel.qTitle'))

titleInput.sendKeys('bar')

And here's what I have now with a bunch of wait conditions and other attempted fixes:

browser.wait(EC.textToBePresentInElementValue(titleInput, 'foo'), 60000)
browser.wait(EC.elementToBeClickable(titleInput), 60000)
titleInput.click()
titleInput.sendKeys(protractor.Key.CONTROL, 'a', protractor.Key.NULL, 'bar', protractor.Key.ENTER)

Is there any other way I can be sure the text is mutable before trying to replace it?

Answer 1

I think you can make things more reliable by having a custom wait that will issue a .clear() method call repeatedly and stop only when the input becomes empty or a timeout is reached:

var titleInput = this.element(this.by.model('appModel.qTitle'));

browser.wait(function () {
    titleInput.clear();
    return titleInput.getAttribute('value').then(function (inputValue) {
        return !inputValue;
    });
}, 5000);

Answer 2

Thanks for the input everyone! This is definitely a timing issue with the Angular application itself and not just me incorrectly using Protractor.