1

I am trying to set a mat-option value with a Cypress test in Angular 9. I have tried all of the following workarounds below and none of them works. I am using Angular Material and the mat-select component with dynamic ngFor mat-options. The selector works fine but I can't set it or get the click to work correctly on the mat-select.

Example mat-select I am using

<div fxLayout="row" fxLayoutAlign="space-between">
  <mat-form-field>
    <mat-label>Begin Year</mat-label>
    <mat-select formControlName="beginYear" data-cy="beginYear-select">
      <mat-option *ngFor="let year of beginYearOptions" [value]="year">
        {{ year }}
      </mat-option>
    </mat-select>
  </mat-form-field>

failed attempts to get the click set

cy.get('[data-cy=beginYear-select]')
  .contains(yearValue.toString())
  .click();

or

cy.get('mat-select')
  .first()
  .click({ force: true })
  .get('mat-option')
  .contains(yearValue.toString())
  .click()

or

cy.get('mat-select[formcontrolname="beginYear"]')
  .first()
  .click()
  .get('mat-option')
  .contains(yearValue.toString())
  .click();

or

cy.get('mat-select[formcontrolname="beginYear"]').then(() => {
  cy.get('mat-option')
    .contains(endYear.toString())
    .click();
})

or

Cypress.Commands.add('selectMaterialDropDown', (formControlName, selectOption) => {
  cy.get(`[formcontrolname="${formControlName}"]`).click().then(() => {
    cy.get(`.cdk-overlay-container .mat-select-panel .mat-option-text`).should('contain', selectOption);
    console.log('PASSED!!!')
    cy.get(`.cdk-overlay-container .mat-select-panel .mat-option-text:contains("${selectOption}")`).first().click().then(() => {
      // After click, mat-select should contain the text of the selected option
      cy.get(`[formcontrolname="${formControlName}"]`).contains(selectOption);
    });
  });
});

None of these worked and basically threw an error saying mat-option can't be found. Most of the time the mat-select popup did not even appear after the click event. I have also tried adding wait calls to see if it was an async issue but the same thing happened. Any help would be greatly appreciated. I have attached some references below that I have also tried. I am confused why the popup does not appear consistently from mat-select on a click event and if it does it can't find any options.

REFERENCES:

Audwin Oyong
  • 2,247
  • 3
  • 15
  • 32
user2385520
  • 103
  • 1
  • 12

4 Answers4

2

Had a similar issue and had to get around it like this:

cy.get('[data-cy=beginYear-select]')
  .click()
  .get('mat-option')
  .contains('2021')
  .click();
cy.get('body').click();
Muck
  • 68
  • 1
  • 9
0

Try this:

cy.get('mat-select[data-cy="beginYear-select"]')
  .contains(yearValue.toString())
  .click();

If it doesn't work try to remove "-" in the identifier: beginYearSelect

Audwin Oyong
  • 2,247
  • 3
  • 15
  • 32
rgvigueras
  • 1
0

Material Select has all options in CDK overlay, therefore:

//open select
cy.get('mat-select').click();

//locale options and click on option
cy.root().closest('.cdk-overlay-container').within(() => {
          cy.get('selector-for-mat-option').click();
        });

that cy.root() is helpful in case you have your commands within something like cy.get('form').within(() => { //all form commands here }) because it will help you to escape back to root of DOM to locale CDK overlay.

George Knap
  • 843
  • 9
  • 30
  • Finding cdk not really necessary, since only one can be present at any time. `cy.get('mat-option')` still seems best way. – Boafo Feb 25 '23 at 20:43
-1

I think you need to pass '#' before mat-select to properly select it by it's id. Every mat-select is like a input, so in most cases it will be something like "mat-select-1", "mat-select-2"... and so on. I made it work by first clicking my mat-select than clicking an option from that select.

cy.get('#mat-select-1').click()
cy.get('#mat-option-2').click()

Althrough I just didn't make it work with select() from cypress, this was a workaround.

rafael
  • 69
  • 2
  • 10