如何在Cypress中从DevExtreme日历组件选择锁定字段的日期时间

日期选择操作 #

• 找到锁定输入框旁的日历触发按钮（从HTML结构里可定位到带dx-calendar-button类的元素），点击打开日历面板
• 通过面板顶部的年月切换控件，定位到你需要的年月范围
• 直接点击面板上的目标日期，锁定的输入框会自动同步选中的日期值

时间选择操作 #

• 点击时间控件的触发按钮（对应HTML结构里的dx-time-editor-button类元素），打开时间选择面板
• 在时间面板中，可通过点击时/分/秒的上下箭头调整数值，或者直接点击目标时间数值完成选择
• 确认选择后，锁定的输入框会自动更新时间值

自动化测试场景参考代码 #

如果是用前端自动化测试工具操作，可通过DOM元素定位模拟交互，以Cypress为例：

// 触发日历面板打开
cy.get('.dx-date-box').find('.dx-calendar-button').click()
// 选择目标日期
cy.get('.dx-calendar').contains('15').click()
// 触发时间面板打开
cy.get('.dx-date-box').find('.dx-time-editor-button').click()
// 选择目标小时
cy.get('.dx-time-editor .dx-scrollable').contains('14').click()

注意事项 #

• 确认组件仅设置了readOnly属性锁定输入框，而非disabled状态（禁用状态下组件交互功能会被完全关闭，需先启用才能操作）
• 若组件自定义了样式，需根据实际HTML结构调整元素定位的选择器

内容的提问来源于stack exchange，提问作者Muhammad Bilal