typescriptxpathcss-selectorsprotractorangularjs-e2e

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

Solution

  • 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.