Parameterizing options dropdown lists in Protractor E2E tests

Question

I'm trying to get my protractor E2E tests to interact with a drop down menu.

In the page that I'm testing, we have a drop down for countries. The dropdown contains 4 selectable options "?" which is blank, and then US, UK, and Canada.

I'm obviously not calling the element correctly within my PO file, as the parameterization is not working. The tests "pass", however when you watch what is being driven, the country that is selected, is the "?" one(which is default). So the test is navigating to the page, selecting the element and not actually clicking on the option that I'd like.

From what I can tell, I need to somehow get the parameterized option that is inputed from the spec file to the element however i'm not really sure if this is possible.

What am I missing/doing wrong?

Spec file:

campaignPO.clickCountryLocation('US');

PageObject file:

this.countryType = by.css('select[ng-model="country"]');

this.clickCountryLocation = function(button) {
       element(this.countryType).click(button);
};

Here is the element were working with:

<select class="form-control input-sm ng-pristine ng-invalid ng-invalid-required" 
        ng-size="11" 
        ng-model="country" 
        name="country" 
        ng-options="opt.value as opt.label for opt in countries" 
        ng-change="updateCountry()" 
        required="">
<option value="?" selected="selected" label=""></option>
<option value="0" label="US">US</option>
<option value="1" label="UK">UK</option>
<option value="2" label="Canada">Canada</option>
</select>

score 2 · Accepted Answer · edited May 23 '17 at 10:24

2

I'd use a select-option abstraction suggested here:

Select -> option abstraction

Example usage:

var SelectWrapper  = require('select-wrapper');
var mySelect = new SelectWrapper(by.name('country'));

mySelect.selectByText('US');

edited May 23 '17 at 10:24

Community

1
1

answered Mar 25 '15 at 14:34

alecxe

462,703
120
1,088
1,195

Thanks for this! The link is exactly what i'm looking for. Going to give this a shot and see how it works. – user249656 Mar 25 '15 at 14:53
1

This worked how i needed it to. Theres still some things that i need to figure out but overall the best answer! The link provided was the resources i needed. Thanks! – user249656 Mar 27 '15 at 17:00

score 0 · Answer 2 · answered Mar 25 '15 at 14:37

0

First of all, you can simplify your select locator by using

var selectEl = element(by.model('country'));

I am not sure the attribute css works very well. To select options:

var optionEl = selectEl.element(by.cssContainingText('option', 'US'));
optionEl.click();

If you are just trying to open the select without selecting a value, don't. Selects are HTML components and you don't want to test them in this way. Even working with them in javascript is cumbersome. If you want to see what values are in there, list the option elements.

answered Mar 25 '15 at 14:37

Sulthan

128,090
22
218
270

Thanks for the comment. The problem that I see with this is that its being hardcoded to the US option and we are not able to go into our spec file and say "UK" or "Canada". No doubt this is one way to get it to work, but its not making use of the parameterization and instead just being a hardcoded route. – user249656 Mar 25 '15 at 16:18

Parameterizing options dropdown lists in Protractor E2E tests

2 Answers2