Seeking assistance with validating a button click using Cypress. The goal is to ensure the button is clickable only when slides are available. If no slides are present, the button should be disabled by adding a disabled class. Any recommendations for improving this validation process?
Here is the HTML code for when the next slide is available:
<button class="arrow"><span class="screen-reader-only">Previous slide</span></button>
HTML code for when the next slide is not available and the disabled class is added:
<button class="arrow disabled"><span class="screen-reader-only">Previous slide</span></button>
The Cypress code being used for validation:
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)')
}
})