Estoy tratando de validar un clic de botón usando Cypress. Debería poder hacer clic en un botón cuando haya diapositivas disponibles. Si no hay diapositivas, no se debe hacer clic en el botón y se deshabilita agregando una clase deshabilitada al botón. ¿Alguien puede sugerir una mejor solución para validar este escenario?
A continuación se muestra el código HTML cuando la próxima diapositiva esté disponible:
<button class="arrow"><span class="screen-reader-only">Previous slide</span></button>Código HTML cuando la siguiente diapositiva no está disponible y se agrega una clase deshabilitada:
<button class="arrow disabled"><span class="screen-reader-only">Previous slide</span></button>Código Cypress que estoy tratando de validar:
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)') } })También puede usar .hasClass('disabled') ya que se agregó una clase deshabilitada. Además, dado que habría varios botones de flecha, use each en lugar de 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() } }) })