Loop that will select all elements in a dropdownlist

Question

I went in and created id tags for each dropdown. I tried creating a loop to select each manufacturer in the drop down without having to write 300+ lines of code since there are many options in some of the dropdowns. I tried and couldn't figure out a way. The second drop down for example is "source_manufacturer".

This is what i tried:

var expected = ['COMFORT-AIRE', 'Daewoo', 'GE'];
var els = element.all(by.id('source_manufacturer'));
for (var i = 0; i < expected.length; ++i) {
expect(els.get(i).getText()).toEqual(expected[i]);
}

Here is the html code:

<select id="source_manufacturer" ng-class="{'btn btn-default' :   !$root.isMobile.iOS()}" class="form-control ng-valid btn btn-default ng-not-empty ng-touched ng-dirty ng-valid-parse" ng-model="manufacturer" ng-options="m.name for m in manufacturers">

`<option selected="selected" value="object:439" label="COMFORT-AIRE">COMFORT-AIRE</option>  
....
<option value="object:443" label="Whirlpool">Whirlpool</option></select>`

This is the error message: Failed: Index out of bound. Trying to access element at index: 1, but there are only 1 elements that match locator By(css selector, *[id="source_manufacturer"]). I want to test if each one can be selected and that it actually changes.

The expected shows every element in the list instead of a single one.

This is how i would go about clicking each individual element in the list:

    element(by.id('source_manufacturer')).click().
    element(by.cssContainingText('option', 'GE')).click();

You'd get better responses if you put your code into a JSfiddle. But without actually seeing anything in action, it looks like you are getting by id, which by definition must be unique and thus would only yield a single element. You'll need to iterate over the child nodes. — Steve, Aug 01 '16 at 20:28
https://jsfiddle.net/5owyt0tt/ by id selects the drop down which is unique true. There must be a way to select each option in the dropdown. — jmd1002, Aug 01 '16 at 20:40
I'm not sure what you mean by "select each option", but if you mean you want all options selected, you must first make this a multiple select element by adding the "multiple" attribute to the select tag. Second, this code would select all of them (I'm assuming you're using jQuery since this question has the jQuery tag) $('#source_manufacturer option').each(function () { $(this).attr('selected', true); }); But that said, you'd be better off just setting the selected attribute when you create the form. Perhaps I'm missing what you're trying to do entirely. — Steve, Aug 01 '16 at 20:57
This question should not have the jQuery tag. It's a Protractor-specific question with a Protractor-specific solution. — Gunderson, Aug 01 '16 at 21:09

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

First of all, you should make sure you really have multiple select elements with source_manufacturer id. Then, you should be using each() instead of a regular for loop. And, I would use an elegant abstraction over the select-option structure suggested here:

var expected = ['COMFORT-AIRE', 'Daewoo', 'GE']
var selects = element.all(by.id('source_manufacturer'));
selects.each(function (select, index) {
    var selectWrapper = SelectWrapper(select);
    selectWrapper.selectByPartialText(expected[index]);

    expect(selectWrapper.getSelectedOptions().first().getText()).toEqual(expected[index]);
});

edited May 23 '17 at 11:51

Community

1
1

answered Aug 02 '16 at 03:05

alecxe

462,703
120
1,088
1,195

I created the select-wrapper.js structure and tried to implement what you suggested. I get the following error: "Failed: Cannot read property 'selectByPartialText' of undefined" – jmd1002 Aug 02 '16 at 14:37
@jmd1002 please check if you've imported and instantiated it correctly. Thanks. – alecxe Aug 02 '16 at 15:26

Loop that will select all elements in a dropdownlist

1 Answers1