I am trying to validate a button click using Cypress. I should be able to click on a button when there are slides available. If there are no slides the button should not be clickable and gets disabled by adding a disabled class to the button. Can anyone please suggest a better solution to validate this scenario?
Below is the HTML code when next slide is available:
<button class="arrow"><span class="screen-reader-only">Previous slide</span></button>
HTML code when next slide is not available and disabled class gets added:
<button class="arrow disabled"><span class="screen-reader-only">Previous slide</span></button>
Cypress code that I am trying to validate:
it('Validate the button is clickable',()=> {
cy.get('.arrow')
.then(($btn) => {
if($btn.is(":disabled")){
$btn.should('have.class','disabled')
.and('have.css','background-color','rgb(62, 64, 69)')
cy.log('Arrow is disabled and not clickable')
} else {
cy.wrap($btn).click()
expect($btn).to.have.css('background-color','rgb(172, 42, 0)')
}
})
You can also use .hasClass('disabled') as there is a class disabled added. Also since there would multiple arrow buttons use an each instead of a then.
it('Validate the button is clickable', () => {
cy.get('.arrow')
.should('be.visible')
.each(($btn) => {
if ($btn.hasClass('disabled')) {
cy.wrap($btn)
.should('have.class', 'disabled')
.and('have.css', 'background-color', 'rgb(62, 64, 69)')
cy.log('Arrow is disabled and not clickable')
} else {
expect($btn).to.have.css('background-color', 'rgb(172, 42, 0)')
cy.wrap($btn).click()
}
})
})