How to click on option in select box in Protractor test?

Question

I am using Protractor for end to end testing in Angular application. I am trying to click on option in select box, but i have folowing error Element is not currently visible and may not be manipulated.

I have this part of html:

<select class="form-control" ng-required="true" ng-model="selectedAction.begStatus"
        ng-options="obj as obj.name for obj in allBegStatuses">
</select>

And I have this line of code in Protractor test:

element(by.xpath('//select/option[text()="Draft"]')).click();

I want to click on option with value "Draft". Do you know maybe what is the problem?

Answer 1

var option = element.all(by.options('obj as obj.name for obj in allBegStatuses'));
var selectOption = option.get(1);
selectOption.click();

Answer 2

I made a function for select(by id) and clicks an option by text compare.

this.selectOption = function (selector, item) {
        var selectList, desiredOption;
        selectList = element(by.id(selector));
        selectList.all(protractor.By.tagName('option'))
            .then(function (options) {
                options.some(function (option) {
                    option.getText().then(function (text) {
                        if (item.toLowerCase() === text.toLowerCase()) {
                            desiredOption = option;
                            return true;
                        }
                        return true;
                    });
                });
            })
            .then(function () {
                if (desiredOption) {
                    desiredOption.click();
                }
            });
    };

hopefully it works for you to

Answer 3

How about this:

element(by.xpath('//*[@id="controlId"]/option[3]')).click();

This should select the value in the drop down.

Hope it helps.

Answer 4

select by model:

element(by.select("selectedAction.begStatus"))

Answer 5

This worked for me:

    function selectOptionByText (selectBox, optionText) {
        selectBox.element(by.cssContainingText('option', optionText)).click();
    }