Cypress不在日历上选择日期 [英] Cypress does not select a date on calendar

问题描述

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

我正在使用此代码，但收到错误消息：‘Cannot Read Property’Includes‘of UnDefined’

  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')

在此代码中，我得到一个错误在4000ms后重试时超时：预期‘2021-07-27’包括‘2021-07-17’，因为它没有选择任何日期，所以它仍然是今天的日期。

如果是DOM，我附上2个图像，也许它可以帮助找出我的代码有什么问题。

推荐答案

查看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 {中单击的日期容器，因为您始终需要选择日期。

---

备注

感谢@SyedMuhammadAwais在日期选择代码中发现错误。

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

因此，如果FutureDay=6且显示上个月的26日，则将选择此禁用日期，且测试失败。

解决方案是使用精确文本匹配，这可以通过如下所示的正则表达式来完成

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

这篇关于Cypress不在日历上选择日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！