Vue项目中Cypress 11.0操作日期输入框.type()报错问题

以下是几种可行的解决方案，可根据你的日期组件类型选择：

方案1：直接设置value并触发输入/变更事件 #

部分自定义日期组件不会响应模拟键盘输入，可直接修改输入框的value属性，再触发Vue组件监听的事件来同步数据：

cy.get(':nth-child(3) > .form-control')
  .invoke('val', '1999-02-01')
  .trigger('input') // 若组件监听change事件，替换为.trigger('change')

方案2：清空后再执行输入操作 #

如果输入框存在默认值或残留内容，先清空再输入可能解决问题：

cy.get(':nth-child(3) > .form-control')
  .click()
  .clear({ force: true })
  .type('1999-02-01', { force: true })

方案3：模拟日期选择器交互（针对带弹窗的组件） #

若使用的是带弹窗选择器的UI库日期组件（如Element UI、Ant Design Vue），可直接操作选择器元素：

// 点击输入框唤起日期选择器
cy.get(':nth-child(3) > .form-control').click()
// 选择年份（需根据组件实际选择器类名调整）
cy.get('.el-date-picker__header-year').click()
cy.get('.el-year-table td').contains('1999').click()
// 选择月份
cy.get('.el-date-picker__header-month').click()
cy.get('.el-month-table td').contains('2月').click()
// 选择日期
cy.get('.el-date-table td').contains('1').click()

方案4：直接操作Vue组件实例 #

如果能获取到日期组件的Vue实例，可直接通过实例更新绑定数据：

cy.get(':nth-child(3) > .form-control').then($input => {
  // 获取Vue实例（Vue 2用$input.__vue__，Vue 3可能需调整）
  const vueComp = $input.__vue__
  // 触发组件的input事件更新绑定值
  vueComp.$emit('input', '1999-02-01')
})

可能的失效原因 #

• Vue组件更新后，日期输入框的事件监听逻辑发生变化
• Cypress 11.0对.type()方法的行为做了调整
• 第三方UI库的日期组件对模拟输入有特殊处理逻辑

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