Question

我想模拟长按Backquote键而不选择某些dom元素，我们如何使用cypress来实现呢？我的网络应用程序具有一项功能，当按下此键时会触发该功能。

我在下面尝试了几种代码，但没有任何效果。

// 1st
cy.get('#sidepanel').trigger('keydown', { keycode: 192, release: false })

// 2nd
cy.get('body').type('`', { release: false })

// 3rd
cy.get('body').trigger('keydown', { keycode: 192, release: false })
cy.wait(15000)
cy.get('body').trigger('keyup', { keycode: 192, release: false })

我希望它将模拟backqoute的长按并按住键，但是看起来backqoute的键入仅发生一次而不是按住。

Answer 1

我不知道为什么，但是几个月前尝试Zach Bloomquist回答时，它没有用。刚才我再次尝试过，它有效。我在另一台计算机上尝试过，然后重新安装cypress 3.3.2版。不确定是否会产生不同的影响。

以某种方式，Zach的解决方案无法提供接近实际按下时间的键。实际上，运行他的解决方案将在Cypress运行时按下按键28秒钟。

// expect: holding down for 5 seconds
// actual: cypress will hold the keys for 28 seconds
for (var i = 0; i < 100; i++) {
  cy.get('body').trigger('keydown', { keycode: 192, release: false })
  cy.get('body').trigger('keypress', { keycode: 192, release: false })
  cy.wait(50)
}
cy.get('body').trigger('keyup', { keycode: 192, release: false })

我想出了一个更简单的解决方案，该解决方案在cypress中运行时几乎可以匹配实际持续时间：

cy.get('body').trigger('keydown', { keyCode: 192 })
cy.wait(duration)
cy.get('body').trigger('keyup', { keyCode: 192 })

如果您清楚地看到此解决方案，则与问题中的第三个备选方案相同。以前没有用，但是现在可以用。我注意到不同的是赛普拉斯运行时的浏览器类型。在镀铬之前，现在是Electron61。也许是原因，需要进一步调查以进行验证。

Answer 2

在浏览器中按住某个键时，实际上会导致随后的许多keydown / keypress事件，最后释放键时会出现keyup事件。

您可以通过在浏览器中运行以下代码来验证此行为：

['keydown','keypress','keyup'].map(e => {
  document.addEventListener(e, (p) => console.log(e, p))
})

然后，按住一个键并查看控制台日志以查看发出了什么事件。在Firefox中，按住A键可得到：

因此，要使用赛普拉斯进行此操作，您只需要模拟这些事件即可：

// holding down for 5 seconds
for (var i = 0; i < 100; i++) {
  cy.get('body').trigger('keydown', { keycode: 192, release: false })
  cy.get('body').trigger('keypress', { keycode: 192, release: false })
  cy.wait(50)
}
cy.get('body').trigger('keyup', { keycode: 192, release: false })

Answer 3

就我而言，它的作用是在下一个事件中显式设置 ctrlkey。在这个例子中，它允许我模拟 Ctrl+点击加上鼠标的移动。

cy.get(target).focus();
cy.get(target).type('{ctrl}', { release: false });
cy.get(target).trigger('mousedown', point.x, point.y, { eventConstructor: 'MouseEvent', button: 0, ctrlKey: true, force: true })
point.x += -200;
point.y += 100;
cy.get(target).trigger('mousemove', point.x, point.y, { eventConstructor: 'MouseEvent', ctrlKey: true, force: true });
cy.wait(250);
point.x += -20;
point.y += 100;
cy.get(target).trigger('mousemove', point.x, point.y, { eventConstructor: 'MouseEvent', ctrlKey: true, force: true });
cy.get(target).trigger('mouseup', point.x, point.y, { eventConstructor: 'MouseEvent', ctrlKey: true, button: 0, force: true });
cy.get(target).trigger('mouseover', point.x, point.y, { eventConstructor: 'MouseEvent', ctrlKey: true, button: 0, force: true });
cy.get(target).type('{ctrl}');

我认为不需要所有参数，但 eventConstructor、ctrlKey 和按钮在我的过程中很重要。

Answer 4

接受的问题没关系。但对我来说，它可以将 keycode 更改为 keyCode

// expect: holding down for 5 seconds
// actual: cypress will hold the keys for 28 seconds
for (var i = 0; i < 100; i++) {
  cy.get('body').trigger('keydown', { keyCode: 87, release: false })
  cy.get('body').trigger('keypress', { keyCode: 87, release: false })
  cy.wait(50)
}
cy.get('body').trigger('keyup', { keyCode: 87, release: false })

我还更新了示例，因为在我的情况下需要按 W 向前移动。

问候。

如何模拟赛普拉斯上的长按按键？

4 个答案: