CODEWITHSUNDEEP
htmlcssangularjscss-selectorsprotractor
Dominik
Dominik

Reputation: 829

Protractor - Find an element with css selector

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:

Upvotes: 1

Views: 5997

Answers (1)

alecxe
alecxe

Reputation: 473873

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:

Upvotes: 1

Related Questions