如何在Cypress测试中点击并输入日期到日期表单控件

核心解决思路：直接设置输入框的value值 #

原生type="date"的输入框，Cypress无法模拟系统级的日期选择弹窗，正确做法是直接给输入框设置YYYY-MM-DD格式的日期值，而非点击触发弹窗。

针对你的场景，可用以下测试代码： #

1. 操作Start Date输入框：用formControlName属性定位，比冗长的DOM路径更稳定

   // 设置开始日期为2024-05-20
   cy.get('input[formControlName="startDate"]')
     .clear()
     .type('2024-05-20')
   

   若type方法不生效，可直接设置value并触发表单更新：

   cy.get('input[formControlName="startDate"]')
     .invoke('val', '2024-05-20')
     .trigger('input') // 触发input事件，通知Angular表单控件值已更新
   

2. 操作End Date输入框：同理处理结束日期

   cy.get('input[formControlName="endDate"]')
     .clear()
     .type('2024-05-25')
   

之前方法无效的原因 #

• 冗长DOM选择器不可靠：body > app-root > ... > input这种路径极易受页面结构变化影响，一旦DOM层级调整就会失效，优先用属性选择器（如formControlName）更稳定。
• 系统弹窗无法交互：原生date输入框的选择弹窗是浏览器/系统提供的，Cypress无法与这类系统级弹窗交互，必须通过直接设置值的方式操作。
• Ionic组件的拦截：Ionic的ion-item可能对内部input做了样式或事件封装，直接定位并操作input元素才是正确路径。

额外验证步骤 #

设置日期后，可验证表单控件是否正确接收值：

// 验证开始日期的值
cy.get('input[formControlName="startDate"]').should('have.value', '2024-05-20')

内容的提问来源于stack exchange，提问作者D.Hodges