如何阻止Cypress type()触发指针/鼠标事件？

核心思路 #

要避免额外事件干扰，需精准触发纯键盘事件，并确保后续鼠标操作携带修饰键状态，不要依赖cy.type（它会默认关联光标/输入框行为）。

具体实现步骤 #

1. 按住Alt键：仅触发keydown事件，指定修饰键参数，禁用自动释放：

cy.get(selector)
  .trigger('keydown', {
    key: 'Alt',
    keyCode: 18, // 兼容部分旧事件监听逻辑
    which: 18,
    altKey: true, // 标记当前Alt键处于按下状态
    release: false, // 阻止Cypress自动触发keyup
    force: true // 确保事件能触发，即使元素未聚焦
  });

2. 绘制多边形：触发鼠标点击/移动事件时，携带altKey: true，模拟按住Alt键时的操作：

// 示例：依次点击三个顶点完成多边形绘制
cy.get(canvasSelector)
  .trigger('mousedown', { clientX: 100, clientY: 100, altKey: true, force: true })
  .trigger('mouseup', { clientX: 100, clientY: 100, altKey: true, force: true })
  .trigger('mousedown', { clientX: 200, clientY: 100, altKey: true, force: true })
  .trigger('mouseup', { clientX: 200, clientY: 100, altKey: true, force: true })
  .trigger('mousedown', { clientX: 150, clientY: 200, altKey: true, force: true })
  .trigger('mouseup', { clientX: 150, clientY: 200, altKey: true, force: true });

3. 松开Alt键：触发keyup事件清除修饰键状态：

cy.get(selector)
  .trigger('keyup', {
    key: 'Alt',
    keyCode: 18,
    which: 18,
    altKey: false,
    force: true
  });

关键注意点 #

• 不要使用keypress事件：Alt属于修饰键，大部分浏览器不会为其触发keypress，多余的事件会导致干扰。
• 所有鼠标事件必须携带altKey: true：确保应用识别到操作是在Alt按住的状态下进行的，避免误判为普通点击。
• 禁用cy.type：它会默认将按键与输入框绑定，甚至触发光标移动，完全不适用于这种全局热键+鼠标操作的场景。
• 若操作对象是画布（Canvas），确保事件绑定在画布元素上：画布的事件监听通常直接绑定在自身，而非父元素。

内容的提问来源于stack exchange，提问作者Jiří