Make selection using cypress in Angular if you're using material forms

Question

I have a form that looks something like this:

...
    

    &l         


        
      

Answer 1

For mat-select in Angular 7+ you have to use promises to wait for the options in the modal cdk-overlay to become available.

Here is a helper function for reuse:

function selectMaterialDropDown(formControlName, selectOption) {
  cy.get(`[formcontrolname="${formControlName}"]`).click().then(() => {
    cy.get(`.cdk-overlay-container .mat-select-panel .mat-option-text`).should('contain', selectOption);
    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);
    });
  });
}

Call function:

selectMaterialDropDown('myMatSelectControlName', 'OptionTextToSelect');