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?

You should use the options locator. EG: `element.all(by.options('obj as obj.name for obj in allBegStatuses'))`; [This link](http://stackoverflow.com/questions/33412256/protractor-unable-to-select-dropdown-option/33422130#33422130) can show you how to apply a filter in the option list. — flaviomeira10, Nov 02 '15 at 17:31

score 4 · Answer 1 · answered Feb 10 '15 at 07:03

4

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

answered Feb 10 '15 at 07:03

Nagarjuna Reddy

4,083
14
41
85

score 1 · Answer 2 · answered Feb 10 '15 at 11:52

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

score 1 · Answer 3 · answered Mar 05 '15 at 09:31

1

How about this:

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

This should select the value in the drop down.

Hope it helps.

answered Mar 05 '15 at 09:31

Sandy

11,332
27
76
122

1

What if 'Draft' becomes `option[4]`? – Dmitri Zaitsev Apr 27 '15 at 02:16
out of ALL the verbose, cumbersome answers on the web THIS is the solution! Thank you – Coldstar Aug 24 '15 at 12:57

score 0 · Answer 4 · answered May 20 '14 at 08:39

0

select by model:

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

answered May 20 '14 at 08:39

Stepan Suvorov

25,118
26
108
176

I can do that, but how can I put specific value of option to be clicked? Because I want to click option with value = "Draft" only. – Dejan Jankovic May 20 '14 at 08:54
probably this would help then http://stackoverflow.com/questions/19599450/how-to-select-option-in-drop-down-protractorjs-e2e-tests – Stepan Suvorov May 20 '14 at 08:57
Thank you for the link, but I've already tried solutions from this page, and those did not work for me. Dont know is there a possibility for having multiple conditions in one expression, for example to have: element by model, and by xpath in one expression? – Dejan Jankovic May 20 '14 at 09:22

score 0 · Answer 5 · answered Feb 18 '15 at 08:39

0

This worked for me:

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

answered Feb 18 '15 at 08:39

user1910484

21
2

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

5 Answers5

Linked