Cypress .trigger() 和 .type() 是否真的会触发实际的按键事件？

Question

我们有一个小型 Vue 2 应用程序来管理表单及其提交。在 Vue 应用程序中，在输入字段上有一个方法用于输入信用卡到期日期。

<input
     v-model="expDate"
     type="text"
     name="expirDate"
     placeholder="MMYY"
     @blur="checkExpDate"
     @keydown="appendSlash($event)"
/>

我们有一个 appendSlash() 方法来检查每个按键并在输入前两位数字后添加斜线：

appendSlash(event) {
      if (
        event.key === "Backspace" ||
        event.key === "Tab" ||
        (event.keyCode >= 48 && event.keyCode <= 57)
      ) {
        if (
          this.expDate.length === 2 &&
          event.key !== "/" &&
          event.key !== "Backspace"
        ) {
          this.expDate += "/";
          return false;
        }
        return true;
      } else {
        event.preventDefault();
        return false;
      }

如果我们在浏览器中手动执行此操作，则效果很好。但是，我们的 QA 人员已尝试通过以下赛普拉斯方法自动执行此操作，但从未添加斜杠。

cy.get('input').type('0925');

cy.get('input').type('09');
cy.wait(5000);
cy.get('input').type('25');

cy.get('input').trigger('keydown', { keyCode: 48 })
cy.wait(5000);
cy.get('input').trigger('keydown', { keyCode: 57 })
cy.wait(5000);

.trigger() 和 .type() 是否提供了真正的键盘事件，或者我们的 QA 只是错误地使用了 Cypress API？

（我知道有一个可用的 vue-cypress 模块，但我们还不能在我们的基础设施中使用它。）

Answer 1

是的，根据文档 here。

此外，这是您在 cypress UI 中单击 type 操作时获得的信息，并且操作输出会打印到控制台：

Answer 2

我收到了 QA 人员的回复。

他们最终使用 .clear() 和 .invoke() 解决了这个问题。

cy.xpath('//input[@name="expirDate"]').clear().invoke('val', '05/25').trigger('input');

他们说要先清除字段，然后输入数字，最后触发输入事件。成功了。

Cypress .trigger() 和 .type() 是否真的会触发实际的按键事件？

Does Cypress .trigger() and .type() actually trigger an actual keydown event?

vue.js

cypress