Not able to click save button in cypress

Question

I am working on a UI automation project. I have to fill details in a form and click on 'Save' button. Once save button is clicked in manual flow, it turns grey and disabled. And after that a pop-up emerges to confirmation.

But when I run automation script to hit 'Save' button, script hits the button but it doesn't turn grey and still enabled. And I don't see any confirmation pop-up.

I tried lots of solutions for clicking 'Save' button, some of them are listed below but nothing works

     cy.contains('Save').click()
     cy.contains('Save').click({force:true})
     cy.contains('Save').focus().type("{enter}")
     cy.get('button span.MuiButton-label').contains('Save').click({force:true})

     cy.get('span.MuiButton-label').contains('Save'). then($btn => {
        cy.wrap($btn).scrollIntoView().click({force:true});
     })

I am also attaching html for 'Save' button

I would be really thankful, if you please help me in finding solution for it.

Sarkar · Answer

What I can see from the image is the button contains some span and other empty elements if you can give the button an id this way you job would be much simpler

cy.get('#form-btn').click()

if not then treaverse from the main-content to the form then to the button

cy.get('#main-content').get('form').get('button').click()

Sonny49 · Answer

Add data-cy="save" to your button and

Do this:

cy.get("[data-cy=save").click()

Alapan Das · Answer

You can directly use the button text and click on it.

cy.contains('Save').should('be.visible').click({force: true})

Fody · Answer

If you have shadow DOM in the HTML, turn on includeShadowDom either in global config or in the test config.

Target the button in the cy.contains(). cy.contains('Save') will target the label, but that may not be clickable:

it('fills form', {includeShadowDom: true}, () => {

  // fill form fields

  cy.contains('button', 'Save').should('be.enabled').click()

})

Not able to click save button in cypress

4 Answers