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