Protractor clear() not working

Question

I have two tests:

  it('should filter the phone list as user types into the search box', function() {

    var results = ptor.findElements(protractor.By.repeater('phone in phones').column('phone.name'));
    results.then(function(arr) {
            expect(arr.length).toEqual(3);
    });

    var queryInput = ptor.findElement(protractor.By.input('query'));

    queryInput.sendKeys('nexus');

    results = ptor.findElements(protractor.By.repeater('phone in phones').column('phone.name'));
    results.then(function(arr) {
        expect(arr.length).toEqual(1);
    });

    queryInput.clear();
    queryInput.sendKeys('motorola');

    results = ptor.findElements(protractor.By.repeater('phone in phones').column('phone.name'));
    results.then(function(arr) {
        expect(arr.length).toEqual(2);
    });

});

it('should display the current filter value within an element with id "status"',
    function() {
        //expect(element('#status').text()).toMatch(/Current filter: \s*$/);
        var queryInput = ptor.findElement(protractor.By.input('query'));
        queryInput.clear();

        expect(ptor.findElement(protractor.By.id('status')).getText()).toMatch('Current Filter:');

        //input('query').enter('nexus');

        //queryInput.clear();
        //queryInput.sendKeys('nexus');

        //expect(element('#status').text()).toMatch(/Current filter: nexus\s*$/);
        //expect(ptor.findElement(protractor.By.id('status')).getText()).toMatch('^\Current Filter:.');

        //alternative version of the last assertion that tests just the value of the binding
        //using('#status').expect(binding('query')).toBe('nexus');
    });

the first test, search box, works great. the second test, status, does not pass because the last value entered in queryInput is carried over to the second test, and the queryInput.clear() does not work. However, in the second test, if i make a call queryInput.sendKeys("something"), "something" will display. If I take out the clear() in the second test, I'll see "motorolasomething". So, while it seems the clear() is working, my test is not passing if I just have clear() in the second test, when i run the second test, I will see "motorola", even when clear() is called prior to the second test.

I'm wondering why the clear() is not clearing in the second test when I do not have a sendKeys() after it.

Answer 1

You can combine promisses into a chain:

queryInput.clear().sendKeys('nexus');

Answer 2

The Documentation of clear() says the following:

[ !webdriver.promise.Promise ] clear( )

Schedules a command to clear the {@code value} of this element. This command has no effect if the underlying DOM element is neither a text INPUT element nor a TEXTAREA element.

Returns: A promise that will be resolved when the element has been cleared.

so in order to get clear to do what you want, you have to work with the promise that it returns! to do so you have to use then()

here is how it works:

queryInput.clear().then(function() {
    queryInput.sendKeys('motorola');
})

so clear() returns you a promise to clear the input and then() tells the promise what to do as soon as the input is cleared.