Cypress 没有 select 日历上的日期

Question

我想使用 cypress 测试日历，但无法 select 我需要的日期或任何日期，理想的是动态代码，我可以在其中输入天数，它会 select 正确的数字。

我正在使用此代码，但收到一条错误消息，显示 '无法读取未定义的属性 'includes''

  let date = new Date()
  date.setDate(date.getDate() + 5)
  let futureDay = date.getDate()
  console.log(futureDay)
  let futureMonth = date.toLocaleString('default', { month: 'long' })
  cy.get('.flatpickr-current-month')
    .invoke('attr', 'flatpickr-monthDropdown-month')
    .then(dateAttribute => {
      if (!dateAttribute.includes(futureMonth)) {
        cy.get('.flatpickr-next-month').click()
      } else {
        cy.get('.dayContainer')
          .contains(futureDay)
          .click()
      }
    })

如有必要，我可以在元素中添加独特的属性（我尝试过但仍然没有用）。我很好地尝试了一个更简单的代码：

  cy.get('#inception_date').click()
  cy.get('.flatpickr-days > .dayContainer',)
    .contains('17')
    .click({force: true})
  cy.get('#inception_date')
    .invoke('prop', 'value')
    .should('contain', '2021-07-17')

并且在这段代码中，我收到错误 4000 毫秒后重试超时：预期“2021-07-27”包含“2021-07-17”，因为它的确如此不是 select 任何日期，它仍然是今天的日期。

如果 DOM，我附上了 2 张图片，也许它可以帮助找出我的代码中的问题所在。

Answer 1

查看 flatPickrJS 的示例，您想要

let date = new Date()                        // July 28 
date.setDate(date.getDate() + 5)             // Aug 2
let futureDay = date.getDate()               // get 2 (integer)
let futureMonth = date.getMonth()            // gets 6 (integer) for July

cy.get('.flatpickr-current-month select')    // <select> is nested inside
  .invoke('val')                             // this is the currently selected month
  .then(dateAttribute => {                   // this is "6" for July (months are 0-based)

    if (+dateAttribute !== futureMonth) {    // +dateAttribute converts string to integer
      cy.get('.flatpickr-next-month').click()  // change month to Aug
    }

    cy.get('.dayContainer')                    // selects Aug 2
      .contains(new RegExp(`^${futureDay}$`))  // which is July 28
      .click()                                 // plus 5 days
  })

cy.get('input.flatpickr')
  .invoke('val')
  .should('eq', '2021-08-02')                  // passes

更改摘要

获取数字 futureMonth 而不是字符串月份名称。
使用 .invoke('val') 从 <select> 获取当前月份的值。
将当前月份与未来月份进行比较，如果不相同，请单击下个月按钮。
从 } else { 中取出日期容器点击，因为您总是需要 select 日期。

注意

感谢@SyedMuhammadAwais 在当天发现了一个错误 selection 代码。

使用 .contains(futureDay) 进行部分匹配，但日历有时会显示上个月的某些天数，但它们被禁用（不可点击）。

因此，如果 futureDay === 6 并且显示上个月的 26 日，则此禁用日将被 select 编辑并无法通过测试。

解决方案是使用精确的文本匹配，这可以用这样的正则表达式来完成

.contains(new RegExp(`^${futureDay}$`))

Answer 2

这是正确的代码，对@Steve Zodiac 的代码进行了一些修改

date.setDate(date.getDate() + 8)
let futureDay = date.getDate()
let futureMonth = date.getMonth()
cy.log(futureDay)               // get 6 (integer)
cy.log(futureMonth)            // gets 7 (integer) for August
cy.get('input[placeholder="Day"]').click({force:true})
cy.wait(5000)
cy.get('.flatpickr-current-month > select > option').eq(0)    
  .invoke('val')                             // this is the currently 
   selected month
  .then(dateAttribute => {                   // this is "6" for July 
                                               (months are 0-based)
    if (+dateAttribute !== futureMonth) {    // +dateAttribute converts string to integer
      cy.get('.flatpickr-next-month').click({force: true}
    }

    cy.get('.dayContainer')                    // selects Aug 6
      .contains(new RegExp(futureDay, "g"))
      .click({force:true})                                 // plus 8 days
  })

Cypress 没有 select 日历上的日期

Cypress does not select a date on calendar

json

flatpickr

cypress