Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Selecting options from Mat-select using cypress

I have Mat-select dropdown as follows

<mat-form-field>
   <mat-label>Gender</mat-label>
      <mat-select id="gender" required formControlName="gender">
         <mat-option id="Male" value="male"> Male </mat-option>
         <mat-option value="female"> Female </mat-option>
      </mat-select>
 </mat-form-field>

I'm trying to use Cypress to select male or female from the field.

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

With the above code I get the following error:

CypressError: cy.select() can only be called on a <select>. Your subject is a: <mat-select>

I need some help in fixing this, thank you.

The code that worked for me.

cy.get('#gender').click().then(() => {
            cy.get('#male').click()
        })
like image 588
PremKumar Avatar asked Jun 10 '19 05:06

PremKumar


People also ask

How can I get mat-select value?

To add elements to Select option, we need to use <mat-option> element and to bind value with <mat-option> , use value property of it. To set and get a value for <mat-select> , use value , ngModel , formControl and formControlName property.


1 Answers

Opens up the mat-option dialog for the mat-select & selects the field that contains "Apple Inc."

cy.get('mat-select[formControlName=companyName]').click().get('mat-option').contains('Apple Inc.').click();
like image 110
Bernhard Schnepf Avatar answered Sep 17 '22 14:09

Bernhard Schnepf