cypress - each iterate over a list and select second appearance from list

Question

I have a list of elements with the following numbers - actually it's a date picker:

[26,27,28,29,30,31,1,2,3,4,5,6,7,8,9,10,........27,28,29,30,31,1,2,3,4] //days of month

I need to select two dates like 6 and 27 as a date range. The problem is, there are duplicated numbers in the list and when the iteration starts, the first 27 selected, not the second one. It ruins my test because first date 27th is from previous month. Current month starts @ 1, so I need to select the date after 1.

//Current behavior: My test clicks on 6 and in the new iteration, clicks on the first 27.

I need to do the iteration to check the numbers and skip the first occurrence and click on the second one.

How I can solve this issue with each? I tried like this, but eq() doesn't work.

let dayVar = 27
.find('.datepicker-row > a').children('span').each(($el, index, list) => {
if($el.text() > 25 && index < 10) {
             cy.wrap($el).should('contain.text', dayVar).eq(1).click()
         } else {
             cy.wrap($el).should('contain.text', dayVar).eq(0).click()
         }
})

Many thanks!

Answer 1

Since there are two "27" on the picker, chose the 2nd one with 'eq(1)`

let dayVar = '27'   // use test here not number

cy.get('.datepicker-row > a span')
  .filter((index, $el) => $el.text() === dayVar)  
  .eq(1)
  .click(); 

Or more generally if may be one OR two of the target date

let dayVar = '27'
cy.get('.datepicker-row > a span')
  .filter((index, $el) => $el.text() === dayVar)  
  .last()                                 // works for one or two "27"
  .click()

But be wary of low-number dates and next month

let dayVar = '27'

if (dayVar > 15) {
  cy.get('.datepicker-row > a span')
    .filter((index, $el) => $el.text() === dayVar)  
    .last()
    .click()
} else {
  cy.get('.datepicker-row > a span')
    .filter((index, $el) => $el.text() === dayVar)  
    .first()
    .click()
}

Answer 2

You can remove the duplicates from the array using this:

let dates = let dates = [
  26, 27, 28, 29, 30, 31, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10....27, 28, 29, 30, 31, 1,
  2, 3, 4
]
let uniqueDates = [...new Set(dates)]
//uniqueDates are the array for unique dates

You can do something like this. First, push all the dates inside an array as numbers. Then remove the duplicates. And then iterate over the array and perform actions.

let dates = []
cy.get('selector')
  .find('.datepicker-row > a')
  .children('span')
  .each(($el) => {
    dates.push(+$ele.text().trim())
  })
let uniqueDates = [...new Set(dates)]
cy.wrap(uniqueDates).each((num, index) => {
  if (num > 25 && index < 10) {
    cy.contains('.datepicker-row > a', num.toString()).eq(1).click()
  } else {
    cy.contains('.datepicker-row > a', num.toString()).eq(0).click()
  }
})