Selecting options from Mat-select using cypress

Question

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()
        })

Did you check this [answer](https://stackoverflow.com/a/55897082/6663016)? — KiraAG, Jun 10 '19 at 05:27

score 40 · Answer 1 · edited Feb 17 '20 at 15:58

40

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();

edited Feb 17 '20 at 15:58

Max

183
1
5
18

answered Feb 17 '20 at 13:55

Bernhard Schnepf

519
4
3

score 9 · Answer 2 · answered Sep 04 '19 at 08:15

Basically what I did was to simulate the Dropdown opening and then sumulate another click for item selection:

// simulate click event on the drop down
cy.get('mat-select').first()
        .click(); // opens the drop down

// simulate click event on the drop down item (mat-option)
cy.get('.mat-option-text span')
  .contains('Your MatItem Text')
  .then(option => {
            option[0].click();  // this is jquery click() not cypress click()
        });

Why are you using jQuery click and not Cypress? – Ian Jamieson May 20 '20 at 13:23 — Ian Jamieson, May 20 '20 at 13:23

score 4 · Answer 3 · answered Apr 30 '20 at 08:02

First, click on select for openning the overlay, then click on your option based on your option text content:

cy.get('mat-select[formcontrolname="departament"]').click();
cy.get('mat-option').contains('Lima').click();

My option text was Lima(+001). When I queried .contains('Lima') I got 'AssertionError'. But when I query .contains('Lima') or .contains('001') element is found. It's seems to me that only supports alphanumeric (I didn't go in deep).

score 2 · Answer 4 · answered May 09 '22 at 15:20

Just for other people still strugling with this/similar issue, even after trying the solutions presented here.

Your problem might also be that you are using a within block. Therefore mat-select items cannot be reached after clicking on the mat-option. So either take this part out of the within block or use the {withinSubject:null} option when getting the mat-select item.

cy.get("mat-select[formControlName*='language']").click();
cy.get('mat-option', {withinSubject:null}).contains('English').click();

score 0 · Answer 5 · answered Aug 11 '22 at 11:53

 cy.get('div[class="cdk-overlay-container"]').then(($container) => {
    if ($container.find("div[class='cdk-overlay-connected-position-bounding-box']").length > 0) {
      cy.get("div[class='cdk-overlay-connected-position-bounding-box']").each(($el) => {
        $el.remove();
      });
    }
    if ($container.find("div[class^='cdk-overlay-backdrop']").length > 0) {
      cy.get("div[class^='cdk-overlay-backdrop']").each(($el) => {
        $el.remove();
      });
    }
  });

score 0 · Answer 6 · answered Nov 01 '22 at 12:36

0

I think this will work

cy.get('mat-select[formControlName=companyName]')
    .click()
    .then(() => cy.get('mat-option').contains('male').click();

answered Nov 01 '22 at 12:36

Swapna Sabu

1

score -2 · Answer 7 · answered Aug 25 '20 at 10:22

-2

First,Select for opening the overlay, then select your option based on your option text content & use should() to verify that selecting the exact option:

cy.get('mat-select').select('Male').should('have.value','male');

answered Aug 25 '20 at 10:22

GHULAM NABI

498
5
15

not working for me - message: can only be called on a – Juri Jan 19 '22 at 13:05

Selecting options from Mat-select using cypress

7 Answers7

Linked