How to get value of mat-select element using playwright?

Question

I am new to Playwright ,i was trying to get selected option value and changing it to another option for a mat-form-field contained mat-select element using playwright.

I tried

await page.selectOption('select#colors', { label: 'Blue' });

i.e. selectOptions didn't work on mat select element

<mat-form-field>
  <mat-select id="selectColor" [formControl]="colcorselect" (click)="$event.stopPropagation()">
    <mat-option *ngFor="let filter of savedColorOptions" [value]="filter (click)="savedFilterChange($event, filter)">
      {{filter}}
    </mat-option>
  </mat-select>
</mat-form-field>

Answer 1

The following worked for me.

await page.locator('mat-select').click();
await page.locator(`mat-option:has-text("${desiredValue}")`).click();

Note that the mat-options list is not attached to the mat-select in the browser DOM but is instead has it's own hierarchy that's added outside of the Angular application (<shell-root> in the screenshot).

Answer 2

This is what eventually worked for me as two steps:

1. First click on it as normal UI object.

2. Then click on the desired option value.

   let cmb_box_locator='mat-select[id="myCombo"]'
    await page.click(cmb_box_locator)
    await page.click('//span[@class="mat-option-text"][contains(.,"'+desiredValue+'")]')