17

Working on webpage test automation with Cypress atm. Ran into a problem.

  • I need to simulate a pressing of the ESCAPE key from a user.

Cypress has its own type() method, but it is required to chain off a DOM element, e.g. it has to be implemented this way:

cy.get(element).type('{esc}');

I want to simulate a simple key press of ESCAPE without involving any DOM element. Does anyone know how to do it?

I have tried

cy.get('body').type('{esc}');

which does not work.

Update:

I tried

cy.get('body').trigger('keydown', { keyCode: 27, which: 27 });//27 is the keycode for the escape key

Did not work either. I guess there is a mis-alignment between my expectation and Cypress specification.

  • What I want to do is a simple key press from keyboard while Cypress has its type() to type into an element, they could be two different things.
Improve this question

4 Answers 4

Reset to default
9

Found an answer:

  cy.get('body').trigger('keydown', { keyCode: 27});
  cy.wait(500);
  cy.get('body').trigger('keyup', { keyCode: 27});

The amount of time cy.wait() waits is arbitrary. It depends on the application under test; but 200 mS seems to be working for me too.

Improve this answer
5
  • 1
    As of april 2022 this no longer works. I think a jQuery solution would be more appropriate as explained by Gleb himself in a Youtube video.
    – thednp
    Commented Apr 14, 2022 at 15:44
  • @thednp Do you have a link to that YouTube video? Or some more detail to help me search for it?
    – Matthew Walker
    Commented Jul 13, 2022 at 22:12
  • @MatthewWalker I can't remember the exact video, you might look for Gleb Bahmutov's channel on YT and search through his videos. You can also have a look at my color-picker Cypress tests on github, I managed to get it to work eventually, despite me saying it doesn't. The problem is always related to sync/async assertions, you might want to see what you do (ACTION and CONTEXT => assertion) before triggering events, assertions & actions can overlap, so you can also set separate it() for event assertions. Good luck.
    – thednp
    Commented Jul 14, 2022 at 5:04
  • I think the event has always some focus - it's just here you have to tell the focus explicitly... if you do not want any specific element focused, just use body or whatever. The call is, as some already answered, cy.get(target).type(..., );, however, what I was really looking for was how to keep the key pressed, you do so using { release: false } as options param.
    – Jiří
    Commented Oct 4, 2022 at 14:33
  • 1
    AFAICT this should now be cy.get('body').trigger('keydown', { eventConstructor: "KeyboardEvent", keyCode: 27 }), note the new field eventConstructor.
    – Kagami Sascha Rosylight
    Commented Feb 25, 2023 at 11:05
7

The recommended command is:

cy.get('#someId').type('{esc}');

I'm using this to disclose pop-ups and where it makes sense to use ESCape as a User.

Cypress version: 8.3.0

Improve this answer
4

I was able to simulate native keypresses by utilizing the following repo: https://github.com/dmtrKovalenko/cypress-real-events

With the included cy.realPress('Escape') command it should work like a charm for you.

Improve this answer
3
  • Unfortunately, in my application not all key codes are working - Home, End, ArrowUp, ArrowDown are not working. Only cy.realPress('Tab') and cy.realPress('Enter') triggered tab and Enter
    – Viktor Ilienko
    Commented May 4, 2023 at 9:57
  • I found alternative key values with the same keycode here e.g. {downarrow} for ArrowDown. Maybe try these otherwise I would suggest to open an issue on the github page to raise more awareness. Also check the version you are using :)
    – PhilipAllStar
    Commented May 4, 2023 at 11:47
  • It's a good idea to report a but on the github page - with alternative keycodes {downarrow} or {pagedown}, it is not working also - not goes down
    – Viktor Ilienko
    Commented May 4, 2023 at 11:53
0

The only real way to simulate a proper key event is to use this plugin:

https://github.com/dmtrKovalenko/cypress-real-events

And then you can only use that with Chrome. Other events will have 'isTrusted:false' which means several keyboard events won't be testable in Cypress the way they would be if manually tested.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.