[Vuejs]-Looping over swiper-slides excluding cloned duplicates in cypress

by

0👍

You can use the :not() pseudo-selector

cy.get('div.swiper-slide:not(.swiper-slide-duplicate)')
  .should('have.length', 23)   // to show loop is filtered, remove once confirmed
  .each($swiperSlide => {
    ...

or if you prefer to check inside the loop use .not() method

cy.get('div.swiper-slide')
  .each($swiperSlide => {
    if ($swiperSlide.not(".swiper-slide-duplicate").length) {

    } else {

    }
  })

0👍

You can use the jquery hasClass() method with negation to check that the class .swiper-slide-duplicate is not present.

cy.get('div.swiper-slide').each(($ele) => {
  if(!$ele.hasClass(".swiper-slide-duplicate")){
    //Do something when you don't have the duplicate slide
  }
  else {
    //Do something when you have the duplicate slide
  }
})

You can also reverse the check as well, first, you check the presence of the class .swiper-slide-duplicate and then in the else condition you can mention the things when you don’t have the duplicate slide.

cy.get('div.swiper-slide').each(($ele) => {
  if($ele.hasClass(".swiper-slide-duplicate")){
    //Do Something when you have the duplicate slide
  }
  else {
    //Do Something when you don't have the duplicate slide
  }
})

0👍

You can use the jQuery .attr() method to check if the class is just swiper-slide or has both swiper-slide and swiper-slide-duplicate.

cy.get('div.swiper-slide')
  .each($el => {
    if($el.attr("class") === "swiper-slide") {

    }
    else {

    }
  })

Same approach for data-swiper-slide-index

cy.get('div.swiper-slide')
  .each($el => {
    if($el.attr("class") === "swiper-slide" && $el.attr("data-swiper-slide-index") !== "0") {

    }
    else {

    }
  })

0👍

You can use a jQuery .filter() to process each type

cy.get('div.swiper-slide')
  .then($els => {

    // Process non-duplicates
    $els.filter('[class=["swiper-slide"]') // exact match to a single class
      .each($el => {

      })

    // Process duplicates
    $els.filter('[class*=["swiper-slide-duplicate"]') // *= means "contains"
      .each($el => {

      })
  })

or in Cypress commands (without jQuery)

// Process non-duplicates
cy.get('div.swiper-slide')
  .filter(':not(".swiper-slide-duplicate")')
  .each($el => {
    ...
  })

// Process duplicates
cy.get('div.swiper-slide')
  .filter('.swiper-slide-duplicate')
  .each($el => {
    ...
  })

0👍

To loop only into the original slides, use the Cypress .not() command to exclude duplicates.

cy.get('div.swiper-slide')
  .not('.swiper-slide-duplicate')
  .each($el => {
    ...
  })

Leave a comment