我想使用 cypress 测试日历,但无法选择我需要的日期或任何日期,理想的是动态代码,我可以在其中输入天数,它会选择正确的数字。>
我正在使用此代码,但收到错误消息,说'无法读取未定义的属性'包含'
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')
在这段代码中,我收到一个错误 Timed out retrying after 4000ms: expected '2021-07-27' to include '2021-07-17' 因为它没有选择任何日期,它仍然是今天的日期。
答案 0 :(得分:0)
看看 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 而不是字符串月份名称。
使用 <select>
从 .invoke('val')
中获取当前月份的值。
将当前月份与 futureMonth 进行比较,如果不同,则单击下个月按钮。
从 } else {
中取出日期容器点击,因为您总是需要选择日期。
注意
感谢@SyedMuhammadAwais 在日选择代码中发现错误。
使用 .contains(futureDay)
进行部分匹配,但日历有时会显示上个月的某些天数,但它们被禁用(不可点击)。
因此,如果 futureDay === 6 并且显示上个月的 26 日,则将选择此禁用的日期并通过测试。
解决方案是使用精确的文本匹配,这可以通过像这样的正则表达式来完成
.contains(new RegExp(`^${futureDay}$`))
答案 1 :(得分:0)
这是正确的代码,@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
})