Cypress Tool -- how to do click action on Show and Hide button, unable to do action on this button

Question

i have a scenario like below with hide and show button when i fill some data in input box action witll show me button else button is in hide mode the below is the code , please suggest me solution how to run my automation code after entering code in input box

when button enabled mode -- with out text entering in input box

<button data-v-320fbb42= type="button" disabled="disabled" class="btn z-btn mr-1 btn-primary rounded-0 disabled" style="position: relative;"><div data-v-320fbb42= class="d-flex flex-row justify-content-center align-items-center">Save </div></button>

else when button disabled mode -- after entering proper text in input box

<button data-v-d0c5d35c= type="button" class="btn z-btn mr-1 btn-primary rounded-0" style="position: relative;"><div data-v-d0c5d3c= class=d-flex flex-row justify-content-center align-items-center> Save </div></button>

so i tried all the scenarios like below , but noting is working , cy.get('button').should('be.disabled').invoke('show').should('be.enabled').contains('Save').click()

 cy.contains('Save').click({force: true})
cy.get('button', 'Save').should('be.disabled');
 cy.contains('button', 'Save').click();

Thanks for your suggestion or help

Answer 1

Since your disable status is based on a class - I have found the next solution for validation in https://docs.cypress.io/api/commands/should.html#Value

cy.get('button', 'Save').should('have.class', 'disabled')

cy.input(inputSelector).type(text)
cy.get('button', 'Save').should('not.have.class', 'disabled')

And a solution for forcibly enabling it

$(selector).removeClass('disabled')
cy.get('button', 'Save').should('not.have.class', 'disabled')