CODEWITHSUNDEEP
protractor
Magnus Jensen
Magnus Jensen

Reputation: 993

Protractor choose element in dropdown

I am having issues locating an element in a drop-down list. Trying to identify it using developer tools in chrome results in the localization tool being disabled when clicking on the drop-down. The html looks like this:

<select ng-model="relation.rolle" name="relationType" required="" 
  class="uniform form-control ng-touched ng-dirty ng-valid-parse ng-invalid 
  ng-invalid-required" ng-class="::formControlClass()" ng- 
  options="relationType.name as relationType.label for relationType in 
  relationTypes">
  <option value="" class="ng-binding">Velg...</option>
  <option value="0" label="Samboer">Samboer</option>
  <option value="1" label="Ektefelle">Ektefelle</option>
  <option value="2" label="Foresatt">Foresatt</option>
</select>

any tips on how to choose i.e. "Samboer" here?

Upvotes: 0

Views: 73

Answers (2)

Bharath Kumar S
Bharath Kumar S

Reputation: 1408

Hope this should work.I use like this.

element(by.cssContainingText('option', 'Samboer')).click();

(or)

element(by.model('relation.rolle')).$('[value="Samboer"]').click();

This one you select the dropdown and choose the value of it.

Here i have chained the element locator of dropdown and then i have selected the option.

First example is more generic and second example is more specific for a dropdown.

Upvotes: 0

tehbeardedone
tehbeardedone

Reputation: 2858

The example that Bharath posted is simple and will work. You just need be sure to click on the select menu first. Otherwise, you will get an element not found error or not clickable error. The menu needs to be open first before you can click an option.

My example is a bit more complex but here is how I usually deal with dropdown menus. I've created a generic function that will work for any select menu. All you have to do is pass in the menu element and the text you are looking for. I do it this way because the app I'm working on has lots of dropdown menus. This way I don't have to create a variable for every option in the menu. A few of the menus have a lot of options and it would be painful to create a variable for each one.

public async selectDropdownOption(dropdown: ElementFinder, optionText: string): Promise<void> {
    await dropdown.click(); // open the menu

    const relevantOption = await dropdown.all(by.tagName('option'))
        .filter((element: ElementFinder) => {
            return element.getText().then((text: string) => {
                return text === optionText;
            });
        })
        .first();

    await relevantOption.click();
}

In your case I would call it like so:

const menu = element(by.name('relationType'));
selectDropdownOption(menu, 'Samboer');

Upvotes: 1

Related Questions