如何在Cypress中继续填写含Vue日期选择器的表单？

• 点击页面空白/其他表单区域关闭下拉
  大部分Vue日期选择器（比如Element UI、Ant Design Vue的组件）支持点击外部区域关闭下拉面板。输入日期后，直接点击表单里的其他字段或者页面空白处即可：

  cy.get('#dispatch-date').type('22-10-2022')
  // 点击表单内的其他字段，替换成你实际存在的字段选择器
  cy.get('#recipient-name').click()
  

  如果没有合适的字段，也可以强制点击页面body：

  cy.get('#dispatch-date').type('22-10-2022')
  cy.get('body').click({ force: true })
  

• 直接通过Vue实例修改绑定值
  要是能拿到日期选择器的Vue实例，可以跳过UI交互，直接修改组件绑定的日期数据：

  cy.get('#dispatch-date').then($el => {
    // 不同Vue版本可能用$el.__vue__或者Cypress.vueWrapper获取实例
    const vueComp = $el[0].__vue__
    // 替换成组件实际绑定的data字段名，比如dispatchDate
    vueComp.dispatchDate = '2022-10-22'
  })
  // 触发input事件确保表单校验生效
  cy.get('#dispatch-date').trigger('input')
  

• 调用组件内置的关闭方法
  很多Vue日期选择器组件自带关闭下拉的方法，比如Element UI的DatePicker有hidePicker方法：

  cy.get('#dispatch-date').then($el => {
    // 组件的ref命名可能不同，需要根据实际情况调整
    const pickerComp = $el[0].__vue__.$refs.picker
    pickerComp.hidePicker()
  })
  

• 临时禁用下拉弹出（仅测试场景）
  如果只是为了完成表单填写测试，可以先移除日期选择器的只读属性，强制输入后手动关闭下拉：

  cy.get('#dispatch-date').invoke('removeAttr', 'readonly')
  cy.get('#dispatch-date').type('22-10-2022', { force: true })
  // 替换成你日期选择器下拉面板的实际类名，比如.el-picker-panel
  cy.get('.el-picker-panel').click({ force: true })
  

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