CODEWITHSUNDEEP
typescriptxpathcss-selectorsprotractorangularjs-e2e
njosep
njosep

Reputation: 380

protractor select values from drop down implemented using mat-select

I am looking to write a protractor method that will select values from this drop down. The drop down holds 4 values, one of which is "Delta". How do I select values from this selector as this does not have any options tag I can use .

I realized that the actual options are under another tag.How do I select the Options ? The below doesn't seem to work.

element(by.cssContainingText('mat-select-panel mat-select-content .mat-option .mat-option-text', 'Fund')) .click();

enter image description here

enter image description here

Upvotes: 2

Views: 6563

Answers (3)

njosep
njosep

Reputation: 380

This is how I solved it. First I had to click the dropdown and then another click for selecting the value.

element(by.tagName('mat-toolbar')).element(by.tagName('mat-select')).click();
  
element(by.cssContainingText('mat-option .mat-option-text', 'Delta')).click();
browser.waitForAngular();

Thanks for your guidance guys. Appreciate it.

Upvotes: 8

yong
yong

Reputation: 13722

The HTML code of the options is outside the mat-select node. Don't find them within mat-select node.

// click the down arrow at right side to expand options
element(by.css('mat-select#mat-select-8 .mat-select-arrow-wrapper')).click();
// choose desired option
element(by.xpath('//mat-option[.="Delta"]')).click();

Upvotes: 2

Ben Mohorc
Ben Mohorc

Reputation: 694

by.cssContainingText is one solution. To get that element containing the text "Delta" you could do element(by.cssContainingText('span','Delta'));

Also, a similar QA (Not a dupe) might be useful to you: dropdown select by visible text

Upvotes: 0

Related Questions