CODEWITHSUNDEEP
angularjsprotractor
user249656
user249656

Reputation: 164

Parameterizing options dropdown lists in Protractor E2E tests

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>

Upvotes: 1

Views: 528

Answers (2)

Sulthan
Sulthan

Reputation: 130162

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.

Upvotes: 0

alecxe
alecxe

Reputation: 474141

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

Example usage:

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

mySelect.selectByText('US');

Upvotes: 2

Related Questions