angularangular-materialcypressmdc

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.

enter image description here

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.

Solution

  • Taking a look at the MDC docs for Floating label

    The floating label is a text label displayed on top of the form field control

    so you would expect that a user clicks or tabs into the field before commencing to type the text.

    Method 1 - clicking the label

    Before clicking the label - the label is covering the <input> element causing the test to fail.

    enter image description here

    After clicking the label - the label has moved up and the input is avaliable.

    enter image description here

    You can simulate the same in the Cypress test,

    cy.visit('https://material.angular.io/components/form-field/overview');

cy.get('input#mat-input-5')
  .siblings('label')           // clicking on the label to make it move up
  .click()

cy.get('input#mat-input-5').type('something')
cy.get('input#mat-input-5').should('have.value', 'something')

    enter image description here

    Method 2 - tabbing into the field

    Unfortunately there is no cy.tabTo() command because tabbing is a native browser feature, but cy.focus() achieves the effect.

    cy.visit('https://material.angular.io/components/form-field/overview');

cy.get('input#mat-input-5').focus()
cy.get('input#mat-input-5').type('something')
cy.get('input#mat-input-5').should('have.value', 'something')

    enter image description here