How to check a button is disabled using Cypress

Question

<button _ngcontent-c21="" color="primary" mat-button="" class="mat-button 
mat-primary" ng-reflect-disabled="true" ng-reflect-color="primary" 
disabled=""><span class="mat-button-wrapper">

The above contains and element that can enable or disable the button depending on the user rights. I'm trying to create a test to verify whether the button is active/disabled depending on the logged in user. I'm trying to use

"expect($input).not.to.be.disabled"

but I'm not sure how to get this to work with my 'get' element (see below)

"cy.get('button.mat-button.mat-primary').eq(8)"

Answer 1

Well this was embarrassingly simple

cy.get('button.mat-button.mat-primary').eq(8).should('not.be.disabled')
cy.get('button.mat-button.mat-primary').eq(8).should('be.disabled')

and this will allow me to check if buttons are disabled or not. Didn't even need to use the "expect" route.

Answer 2

The Cypress documentation shows examples how you can use should() to verify elements are enabled/disabled: https://docs.cypress.io/api/commands/should.html#Assert-the-checkbox-is-disabled

cy.get(':button').should('be.disabled')

Answer 3

Your question mentioned both active and visible and they are separate as in:

• visible / not-visible
• active / not-active (disabled but visible)

These two different pieces of state should be considered as in:

cy.get('.mySelector').should('be.visible').click();
cy.get('.mySelector').should('be.disabled');
cy.get('.mySelector').should('not.be.disabled');

Answer 4

I recently found this code working in my case where I wanted to check if the element was enabled for next actions:

this.button().then(($btn) => {
  if ($btn.is("enabled")) {
    //do something
  } else {
    //do something else
  }
})

// in cypress terms
    cy.get(':button').then((x) => {
      if (x.is("enabled")) {
        //do something if enabled
      } else {
        //do something else
      }
    });