Cypress的trigger()与type()是否会触发真实的keydown事件？

1. 事件属性缺失：你代码的appendSlash方法同时依赖event.key和event.keyCode两个属性做判断。你之前用trigger仅传递keyCode参数时，Cypress生成的事件对象中event.key为undefined，会直接命中最外层的else分支，执行event.preventDefault()，逻辑完全不生效。
2. v-model同步问题：v-model的双向绑定依赖input事件触发更新。仅调用trigger('keydown')不会触发input事件，绑定的expDate值不会变化，长度永远为0，自然无法触发加斜杠的判断逻辑。
3. type方法的默认行为冲突：你业务逻辑中满足加斜杠条件时会return false，会阻止浏览器默认的字符输入行为。Cypress默认的type输入速度极快，前两位输入后expDate还没完成更新就输入了第三位，也会导致逻辑无法触发。

方案1：调整测试代码（无需修改业务逻辑，推荐） #

使用trigger的正确写法 #

需同时传递key属性，且每次触发keydown后手动触发input事件同步v-model的值：

cy.get('input[name="expirDate"]').focus().as('expInput')
// 输入0
cy.get('@expInput').trigger('keydown', { key: '0', keyCode: 48 })
cy.get('@expInput').trigger('input', { target: { value: '0' } })
// 输入9
cy.get('@expInput').trigger('keydown', { key: '9', keyCode: 57 })
cy.get('@expInput').trigger('input', { target: { value: '09' } })
// 输入2，此时触发自动加斜杠
cy.get('@expInput').trigger('keydown', { key: '2', keyCode: 50 })
cy.get('@expInput').should('have.value', '09/')
cy.get('@expInput').trigger('input', { target: { value: '09/2' } })
// 输入5
cy.get('@expInput').trigger('keydown', { key: '5', keyCode: 53 })
cy.get('@expInput').trigger('input', { target: { value: '09/25' } })
cy.get('@expInput').should('have.value', '09/25')

使用type的正确写法 #

给每次输入加延迟，确保v-model更新完成后再输入下一个字符：

cy.get('input[name="expirDate"]').as('expInput')
// 输入前两位，加100ms延迟确保状态同步
cy.get('@expInput').type('09', { delay: 100 })
cy.get('@expInput').should('have.value', '09')
// 输入第三位
cy.get('@expInput').type('2', { delay: 100 })
cy.get('@expInput').should('have.value', '09/2')
// 输入最后一位
cy.get('@expInput').type('5', { delay: 100 })
cy.get('@expInput').should('have.value', '09/25')

方案2：优化业务逻辑（可选） #

如果希望减少测试的特殊处理，可以调整appendSlash的判断逻辑，兼容event.key不存在的场景，同时优化状态同步时机，不过该改动需要回归验证前端交互逻辑。

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