Cypress mat-select select command failing

user_19486031 0
Viewed 33

Trying to test a select control with Cypress. I found the .select(option) command which seems pretty straight-forward, but cannot get it to work

This is my form:

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

This is my test:

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

but it throws the error "cy.select() can only be called on a <select>"

material-ui cypress
1 Answers

Angular mat-select isn't a normal <select> element, you can't use the .select() command.

Use .click() instead

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

This is the runtime 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>
user_169977070
Related