I want to check whether a button is active (can be clicked ) or not active (exist but not clickable).

I try the following assertions but it is seems it is wrong. because the first assertion is always true and the second assertion is always false regardless the button is clickable or not.

cy.get('#switchdiv').should('not.be.disabled')   //clickable
cy.get('#switchdiv').should('be.disabled')       //not clickable

the html code for button in each case:

<button role="button" aria-disabled="false" class="styles__CTAButton-eowIhA dBjjkp switchover"></button>


<button disabled="" role="button" aria-disabled="true" class="styles__CTAButton-eowIhA dBjjkp switchover"></button>

any help . thank you

I want to check whether a button is active (can be clicked ) or not active (exist but not clickable).

I try the following assertions but it is seems it is wrong. because the first assertion is always true and the second assertion is always false regardless the button is clickable or not.

cy.get('#switchdiv').should('not.be.disabled')   //clickable
cy.get('#switchdiv').should('be.disabled')       //not clickable

the html code for button in each case:

<button role="button" aria-disabled="false" class="styles__CTAButton-eowIhA dBjjkp switchover"></button>


<button disabled="" role="button" aria-disabled="true" class="styles__CTAButton-eowIhA dBjjkp switchover"></button>

any help . thank you

• javascript
• cypress

• Please share the html of the button in enabled and disabled state. – Alapan Das Commented Dec 20, 2021 at 14:50
• @AlapanDas I share it now – Deyaa Commented Dec 20, 2021 at 15:32
• Could you share the exact button tags you're working with? The ones shared in your code don't appear to have an 'id' attribute and therefore its relation with the testing code is ambiguous. – Warisul Commented Dec 20, 2021 at 15:53
• @Waris I edit the code – Deyaa Commented Dec 20, 2021 at 15:59

2 Answers 2

If Alapan's answer is not working, you could potentially try and use the aria-disabled value.

cy.get('#Button')
  .invoke('attr', 'aria-disabled')
  .then((ariaDisabled) => {
    // Probably helpful to also cy.log() the value
    cy.log(`ariaDisabled is ${ariaDisabled}`);
    if (ariaDisabled !== "true") {
      cy.log('Button exists and is disabled!')
      return
    }
    cy.log('Button exists and is enabled!')
    cy.get('#Button').click();
  });

You can do something like this:

cy.get('#Button').then(($btn) => {
  if ($btn.is(':disabled')) {
    cy.log('Button exists and is disabled!')
    return
  } else {
    cy.log('Button exists and is enabled!')
    cy.wrap($btn).click()
  }
})