material-ui - Cypress mat-select 选择命令失败

Question

尝试使用 Cypress 测试选择控件。我找到了.select(option)命令看起来很简单，但无法让它工作

这是我的表格:

<form>
  <mat-form-field appearance="fill">
    <mat-label>Food ingredients</mat-label>
    <mat-select [(ngModel)]="selectedValue" name="food">
      <mat-option *ngFor="let food of foods" [value]="food.value">
        {{food.viewValue}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</form>

这是我的测试:

cy.get('mat-select').click()
  .select('Cauliflower')

但它抛出错误“cy.select()只能在 <select> 上调用”

Answer 1

Angular mat-select 不正常 <select>元素，您不能使用 .select()命令。

使用.click()相反

cy.get('mat-select').click()
cy.contains('mat-option', 'Cauliflower').click()   

这是运行时 HTML

<div class="mat-select-panel-wrap">
  <div role="listbox">
    <mat-option role="option">
      <span class="mat-option-text"> Cabbage </span>
    </mat-option>
    <mat-option role="option">
      <span class="mat-option-text"> Cauliflower </span>
    </mat-option>
    <mat-option role="option">
      <span class="mat-option-text"> Capsicum </span>
    </mat-option>
  </div>
</div>