范围选择器的日期问题

Question

我有这个递归代码来在范围选择器中选择日期：

    recurse(
        () => cy.get('.mantine-DatePicker-yearsListCell').invoke('text'),
        (n) => {
          if (!n.includes(year)) { //if year not found click on first button
            cy.get('.mantine-DatePicker-calendarHeaderControlIcon').first().click();
          }
          else
            if  (!n.includes(year).length < 0) {// if year not found after clicking on first button after recurce click on last btn
              cy.get('.mantine-DatePicker-calendarHeaderControlIcon').last().click();
            }
            cy.get('.mantine-DatePicker-yearsListCell').contains(year).click(); //year is found click on it
        },
      {
        limit: 12,
      }
      );

问题是，当我添加 2021-07-01 - 2023-05-01 作为范围时它起作用，但如果我添加 2019-07-01 - 2023-05-01 作为范围则不起作用。当范围为 2019-07-01 - 2023-05-01 时，尝试添加第二个日期时，它仍然执行第一个日期而不是最后一个日期，但它应该最后执行，因为 2023 年是在 2019 年之后

基本上，如果在单击第一个时找不到年份，则应该单击最后一个。

更新：我现在明白为什么它适用于 2021-07-01 - 2023-05-01，因为在年份选择器上该日期是可见的。如果我需要在 2021 年之前，它不会先单击 btn。

请帮忙..一定有什么我不明白的地方。

Answer 1

问题似乎是代码

if (!n.includes(year))

不会告诉您是否需要在年份选择面板中向后或向前前进（即无助于决定是否需要

.first().click()

或

.last().click()

）。

当您选择

cy.get('.mantine-DatePicker-yearsListCell').invoke('text')

时，您会得到一个包含当前选择面板上所有日期的字符串。

因此

if (!n.includes(year))

会告诉您所需的年份不在该页面上，但要找到要走的方向，您可以比较当前显示的年份列表（单个文本而不是单个文本）。

类似：

(yearsCurrentlyShowing) => {   // pass in a list of individual years from the panel

  // first make the texts into numbers since target year is a number
  const currentYears = yearsCurrentlyShowing.map(y => parseInt(y))

  // case 1 - target year is on this panel
  if (currentYears.includes(year)) {
    return true
  }

  // case 2 - target year is before years on the panel
  if (year < currentYears[0]) {
    // go backwards
    cy.get('.mantine-DatePicker-calendarHeaderControlIcon').first().click()
    return false
  }

  // case 3 - target year is after years on the panel
  if (year > currentYears[currentYears.length-1]) {
    // go forwards
    cy.get('.mantine-DatePicker-calendarHeaderControlIcon').last().click()
    return false
  }
}

要获取当前面板上各个年份的列表，您需要对第一个参数进行不同的查询

recurse()

() => cy.get('.mantine-DatePicker-yearsListCell')
        .then(years => years.get().map(year => year.innerText.trim())

---