I am new to Cypress and trying to loop the swiper slides excluding cloned duplicates. I am using the index of .each() in cypress but this is not working. Below is my code
if (index != 0 && index >= 22) {
//do something
} else {
//do something
}
Below is the example snapshot of my html code:
Can anyone please suggest the logic to loop only into the original slides?
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 {
}
})
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
}
})
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 {
}
})
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 => {
...
})
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 => {
...
})