Cypress - Element covered by another element after angular MDC Upgrade

I recently upgraded my angular to version 16 and with it the material also was updated. Material 16 introduced MDC and because of it my existing E2E test cases are failing.



I'm trying to type in a form field which has an input element. It was working until now with this command cy.get("#add-charger-name").type(chargerData.chargerName);. It is now being covered by the floating label.

I can make it work if I use cy.get("#add-charger-name").type(chargerData.chargerName, {force: true});. I don't want to use force assuming there is a cleaner approach.

Continue reading...