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 work. 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: Make selection using cypress in Angular if you're using material forms select dropdownlist item using cypress How to select an option with Angular Material 2 and Protractor? Cypress: Test if element does not exist
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.
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
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();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.