Necesito escribir pruebas de automatización en Cypress para carrusel con imágenes.
Tengo algo como esto:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>El carrusel cambia automáticamente. La imagen activa obtiene la clase "slider_wrapper__activeSlide__2LNke", y la otra imagen tiene la clase "slider_wrapper__nextSlide__1Vnk4". Me gustaría verificar si el carrusel se muestra en la página y si la imagen activa tiene la clase correcta.
Intento con .should ('include') pero no funciona :(
Puede usar .find() para consultar elementos debajo de un elemento producido.
cy.get('.carousel-item.active') // get the active div .find('img') // get the img element underneath the above div .should('be.visible') // check that the element is visible .and('have.class', 'slider_wrapper__activeSlide__2LNke'); // check for the active image class. Si necesita verificar cada uno de los elementos del carrusel, deberá usar hasClass de JQuery.
cy.get('.carousel-item') // retrieve all elements with carousel-item class .each(($item) => { // iterate through all elements cy.wrap($item) // wrap the yielded element .find('img') // find the img .should('have.class', $item.hasClass('active') ? 'slider_wrapper__activeSlide__2LNke' : 'slider_wrapper__nextSlide__1Vnk4'); // ^ ternary to determine which class we are checking forEl carrusel cambia automáticamente. Para probar ese aspecto, use cy.clock() para "congelar" el movimiento, luego cy.tick(3000) para pasar a la siguiente imagen (suponiendo un retraso de 3 segundos).
cy.clock() cy.get('div#carouselExampleControls') .find('div.carousel-item.active') .invoke('index') .should('eq', 0) // first image is active cy.tick(3000) cy.get('div#carouselExampleControls') .find('div.carousel-item.active') .invoke('index') .should('eq', 1) // second image is active Trate de no usar clases con sufijos como __2LNke , podrían ser generados por el marco y cambiar en la próxima compilación.
Si desea verificar entonces, use la parte de prefijo slider_wrapper__activeSlide y slider_wrapper__nextSlide
cy.get('[class*="slider_wrapper__nextSlide"]') // partial matching, more robust