Cypress测试中Ctrl+Z无法触发输入框撤销行为的问题排查

问题分析 #

你遇到的核心问题是：Cypress的.type('{ctrl+z}')仅能触发keydown事件监听器，但无法触发浏览器原生的撤销（undo）行为。这是因为Cypress的按键模拟仅生成事件对象，不会触发浏览器内部的编辑命令逻辑，而复制、撤销这类操作属于浏览器原生行为，不在Cypress事件模拟的覆盖范围内。

你的需求是确认全局Ctrl+Z监听器未阻止默认撤销行为，可以通过以下两种方式实现测试：

方法1：直接触发浏览器原生撤销命令 #

既然.type()无法触发原生撤销，我们可以直接调用浏览器的document.execCommand('undo')来模拟撤销操作，以此验证输入框的默认撤销行为是否正常：

cy.get('input')
  .type('abc')
  .should('have.value', 'abc')
  .then($input => {
    // 执行浏览器原生撤销命令
    document.execCommand('undo');
    // 验证输入框值被清空
    cy.wrap($input).should('have.value', '');
  });

方法2：验证全局监听器未阻止默认行为 #

要确认全局keydown监听器没有阻止默认撤销，我们可以注册监听器后，触发Ctrl+Z事件，同时检查两个点：

1. 监听器是否被正确调用
2. 输入框的默认撤销行为是否仍能执行

// 模拟全局Ctrl+Z监听器
cy.window().then(win => {
  let listenerTriggered = false;
  win.addEventListener('keydown', e => {
    if (e.ctrlKey && e.key === 'z') {
      listenerTriggered = true;
      // 这里模拟你的全局监听器逻辑，若存在e.preventDefault()则会阻止撤销
    }
  });

  cy.get('input')
    .type('abc')
    .should('have.value', 'abc')
    // 触发Ctrl+Z事件
    .type('{ctrl+z}')
    // 确认监听器被调用
    .then(() => {
      expect(listenerTriggered).to.be.true;
    })
    // 确认默认撤销行为未被阻止（值被清空）
    .should('have.value', '');
});

如果你的全局监听器调用了e.preventDefault()，上述测试中输入框的值不会变为空，就能直接检测出默认行为被阻止的问题。

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