Protractor - get the text of a select menu option

Question

I am using protractor for my e2e testing of my app. However I am building an array of new values when updating a record to compare against the old values to ensure they were updated correctly.

One of the fields is a select menu and so I want to grab the text from the option to push into the array.

I am selecting the option using:

element(by.id(fieldName6)).click().then(function() {
     element(by.css('#' + fieldName6 + ' option:nth-child(2)')).click();
});

This is all working lovely. I now want to be able to grab the text, not the value, of that option to push into my array. I have tried the following:

newValues.push(browser.executeScript("$('#" + fieldName6 + " option:nth-child(3)').text()"));

which pushes Promise::17234 {[[PromiseStatus]]: "pending"}, and

newValues.push(element(by.css('#' + fieldName6)).$('option:checked').getText());

which pushes [object Object].

Pretty stuck now. Any help would be greatly appreciated.

Answer 1

Protractor and WebDriverJS are entirely based on the concept of promises. element(by.css('#' + fieldName6)).$('option:checked').getText() would return you a promise which would be resolved into an option text by the Control Flow.

You may collect promises into the newValues array, but, when you would need real values, you would have to resolve the promises inside. I would use the protractor.promise.all() for that:

protractor.promise.all(newValues).then(function (resolvedValues) {
    console.log(resolvedValues);
});

Note that if you just want to assert the values in newValues, you can use expect() directly - it knows when the promise is passed in and would resolve the promise implicitly before performing the check:

expect(newValues).toEqual(["option 1", "option 2"]);