Protractor - Find an element with css selector

Question

I'm running protractor e2e tests on an angular page and I wan't to check some dropdown boxes for their selected options. I got the following html code generated from angular:

<select class="ng-pristine ng-valid ng-touched" id="idxyz" ng-model="model" ng-options="xxx">
    <option selected="selected" value="object:null"></option>
    <option label="Steuerung 1" value="number:1">Steuerung 1</option>
    <option selected="selected" label="Programme" value="number:2">Programme</option>
    <option label="Steuerung 2" value="number:3">Steuerung 2</option>
</select>

And this is the protractor code that I use to get the selected option.

expect(element(by.css("select[ng-model='model'] option[selected='selected']")).getAttribute("value")).toBe("Programme");

As you might have noticed - there are two options with selected='selected'.

This is only the case when running the tests with protractor. When doing the same things by hand, only the truly selected option has the attribute selected='selected'.

Can anyone explain why this happens? The css selector should only return one option element because only one can be selected. But since there are two with the selected attribute - protractor gives me the following warning:

WARNING - more than one element found for locator By.cssSelector("select[ng-model='model'] option[selected='selected']") - the first result will be used

The first result is the empty option which is actually not selected.

Setup to run the tests:

angular: 1.4.4
grunt: 0.4.5
protractor: 2.5.1
grunt-protractor-runner: 2.1.0

I have never worked with protractor but CSS will return more than element because as you yourself has indicated there are two elements which match it. You may have to check the part of your code which is wrongly(?) updating two elements with selected='selected'. I am pretty sure this is not because of CSS. — Harry
What if you click the select element and then get the selected option in your test? — alecxe
Where is your code that selects the option? I would assume there is something odd going on in there to end up with two selected options. — codemonkey
May be this can give you a clue why is this happening: stackoverflow.com/questions/23643712/… — alecxe
I'll check on the null/default binding @alecxe. But the problem seems to be within protractor since I cannot reproduce this without it. — Dominik Mohr

alecxe alecxe · Accepted Answer · 2015-11-30T16:15:50

To workaround the problem, you my additionally check the value to start with number:

select[ng-model=model] option[selected=selected][value^=number]

Or, we may check the value not equal to object:null:

select[ng-model=model] option:not([value="object:null"])[selected=selected]

Note that to make dealing with select-option easier, consider using a custom wrapper, see:

Select -> option abstraction

Protractor - Find an element with css selector

1 Answers