如何使用剧作家获取垫选择元素的值？

Question

我是 Playwright 的新手，我试图获取选定的选项值，并将其更改为使用 playwright 包含 mat-select 元素的 mat-form-field 的另一个选项。

我试过

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

即 selectOptions 不适用于垫选择元素

<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

以下内容对我有用。

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

请注意，mat-options 列表并未附加到浏览器 DOM 中的 mat-select，而是拥有自己的层次结构，该层次结构添加到 Angular 应用程序外部（屏幕截图中的 <shell-root>）。

Answer 2

这最终对我来说是两个步骤：

1. 首先将其作为普通 UI 对象单击。

2. 然后单击所需的选项值。

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