How to simulate long hold key press on cypress?

When you hold down a key in the browser, it actually ends up being many subsequent keydown/keypress events, followed by a keyup when you finally let go of the key.

You can verify this behavior by running this code in your browser:

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

Then, hold down a key and watch your console log to see what events are emitted. In Firefox, holding down the A key gives:

So, to do this with Cypress, you just need to emulate those events:

// 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 })

I don't know why, but when trying Zach Bloomquist answer months ago, it didn't work. Just now I tried again, it works. I tried it on different machine and re-install cypress version 3.3.2. Not really sure if it has different impact.

Somehow, solution from Zach does not give close to actual time key pressed. Running his solution actually will press the key for 28 seconds in Cypress runtime.

// 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 })

I have come up with simpler solution that match almost actual duration press time when run in cypress:

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

If you see clearly this solution the same like my third alternative in the question. Before it didn't work, but now it works. What I noticed different is the browser type when Cypress run. Before it's chrome, now Electron 61. Maybe it's the cause, need to investigate further to validate.

In my case what it has worked is to explicitly set in the next events the ctrlkey. In this example it has permitted me to simulate a Ctrl+Click plus a movement of the mouse.

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}');

I don't think all the arguments are necessary, but the eventConstructor, ctrlKey, and button were important in my process.

the accepted question it's ok. But for me it works changing keycode to 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 })

Also I update the example because in my case need to press W to move forward.

Regards.