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.

Answer 1

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()

Answer 2

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

Do this:

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

Answer 3

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

cy.contains('Save').should('be.visible').click()

Answer 4

From your description a couple of things come to mind.

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

cy.contains('button', 'Save').click()

---

Check the button is enabled (may be disabled because the form fields are invalid).

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

---

Check that the event listener is attached, see When Can The Test Click

const selector = 'button:contains(Save)';

cy.CDP('Runtime.evaluate', {
  expression: 'frames[0].document.querySelector("' + selector + '")',
})
.its('result.objectId')
.then((objectId) => {
  cy.CDP('DOMDebugger.getEventListeners', {
    objectId,
    depth: -1,
    pierce: true,
  }).should((v) => {
    expect(v.listeners).to.have.length.greaterThan(0)
  })
})

cy.get(selector).click()

Answer 5

All of the above answers were correct.

Additionally, you also want to check the colour change after clicking on the Save button. So you should have to check the CSS file and check the colour. I'm assuming here the button has some property color and you have to just use that HEX code for the colour. I used Charcoal colour as I don't know which grey shade your app used.

cy.contains('Save')
  .should('be.visible')
  .click({ force: true })
  .should('have.css', 'color', 'rgb(54, 69, 79)')