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

user_12420473 0
Viewed 935

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>
playwright angular-material selector
2 Answers

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

DOM structure

user_81492310

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+'")]')
user_18314560
Related