如何使用Cypress正确按下/输入功能键触发组合快捷键

问题场景 #

在对宜家厨房规划器页面开展自动化测试时，需要依次按下左Ctrl+F1、Alt+F12组合快捷键触发页面内置调试功能，该操作手动验证可正常生效。
原有测试代码如下，执行后用例状态显示通过，但实际浏览器环境未触发目标调试功能：

cy.get('body').trigger('keydown', { ctrlKey: true, keyCode: 112, which: 112 })
cy.get('body').trigger('keydown', { altKey: true, keyCode: 123, which: 123 })

失效原因 #

• 事件触发目标错误：全局快捷键大多绑定在document/window对象上，绑定到body触发时如果页面焦点不在body上，事件无法被监听层接收
• 事件序列不完整：真实手动按键会依次触发「修饰键按下→功能键按下→功能键抬起→修饰键抬起」的完整事件流，原有代码仅触发了keydown事件，缺少keyup环节，部分页面的快捷键校验会判定为无效操作
• 修饰键位置不匹配：需求要求按下左Ctrl，原有代码仅标记了ctrlKey为true，没有指定按键位置，部分页面的快捷键仅响应左侧修饰键
• 事件参数缺失：默认trigger触发的事件不会开启冒泡，也缺少key等标准事件属性，容易被页面的事件校验逻辑过滤

正确实现方式 #

方案1：修正原生trigger参数（无需额外依赖） #

补全事件序列、修正触发目标、补充必要事件参数即可，代码如下：

// 先将焦点切到全局窗口，避免焦点在其他元素上导致事件失效
cy.window().focus();

// 触发左Ctrl+F1
const LEFT_CTRL = 17, F1 = 112;
cy.document().trigger('keydown', {
  keyCode: LEFT_CTRL, which: LEFT_CTRL,
  ctrlKey: true, location: 1, // location=1 对应键盘左侧按键
  bubbles: true, cancelable: true
});
cy.document().trigger('keydown', {
  keyCode: F1, which: F1, key: 'F1',
  ctrlKey: true, bubbles: true, cancelable: true
});
cy.document().trigger('keyup', {
  keyCode: F1, which: F1, key: 'F1',
  ctrlKey: true, bubbles: true, cancelable: true
});
cy.document().trigger('keyup', {
  keyCode: LEFT_CTRL, which: LEFT_CTRL,
  ctrlKey: false, bubbles: true, cancelable: true
});

// 等待300ms给页面响应第一个快捷键，避免两个快捷键触发冲突
cy.wait(300);

// 触发Alt+F12
const ALT = 18, F12 = 123;
cy.document().trigger('keydown', {
  keyCode: ALT, which: ALT,
  altKey: true, bubbles: true, cancelable: true
});
cy.document().trigger('keydown', {
  keyCode: F12, which: F12, key: 'F12',
  altKey: true, bubbles: true, cancelable: true
});
cy.document().trigger('keyup', {
  keyCode: F12, which: F12, key: 'F12',
  altKey: true, bubbles: true, cancelable: true
});
cy.document().trigger('keyup', {
  keyCode: ALT, which: ALT,
  altKey: false, bubbles: true, cancelable: true
});

方案2：使用真实按键插件（适配严格事件校验场景） #

如果方案1仍然失效，说明页面做了合成事件拦截，此时使用cypress-real-events插件调用CDP接口触发原生真实按键，和手动操作效果完全一致：

1. 安装依赖：npm install cypress-real-events --save-dev
2. 在项目的cypress/support/commands.js文件中添加引入语句：import 'cypress-real-events'
3. 测试代码直接调用真实按键方法：

cy.realPress(['ControlLeft', 'F1']);
cy.wait(300);
cy.realPress(['Alt', 'F12']);

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