Simulating hotkeys in Intern (3) functional tests

Question

I'm trying to test some hotkeys on my site. Typing Ctrl+5 in a field should do something. I'm doing:

command.get(...)
    ...
    .findByCssSelector('input')
    .click()
    .pressKeys([keys.CONTROL, '5'])
    .pressKeys(keys.NULL)
    .end()

Seems to be giving me weird results in IE. In my keydown handler I'm logging the event and getting this:

{altKey: false, bubbles: true, button: undefined, buttons: undefined, cancelable: true, changedTouches: undefined, char: "", charCode: 0, clientX: undefined, clientY: undefined, ctrlKey: false, currentTarget: HTMLInputElement {...}, data: undefined, delegateTarget: HTMLInputElement {...}, detail: 0, eventPhase: 2, handleObj: Object {...}, isSimulated: false, jQuery311042854121322469546: true, key: "Control", keyCode: 17 ...}
{altKey: false, bubbles: true, button: undefined, buttons: undefined, cancelable: true, changedTouches: undefined, char: "", charCode: 0, clientX: undefined, clientY: undefined, ctrlKey: false, currentTarget: HTMLInputElement {...}, data: undefined, delegateTarget: HTMLInputElement {...}, detail: 0, eventPhase: 2, handleObj: Object {...}, isSimulated: false, jQuery311042854121322469546: true, key: "5", keyCode: 53 ...}

Notice ctrlKey is false so it's not performing my hotkey. This is what I'm getting when typing Ctrl + 5 manually:

{altKey: false, bubbles: true, button: undefined, buttons: undefined, cancelable: true, changedTouches: undefined, char: "", charCode: 0, clientX: undefined, clientY: undefined, ctrlKey: true, currentTarget: HTMLInputElement {...}, data: undefined, delegateTarget: HTMLInputElement {...}, detail: 0, eventPhase: 2, handleObj: Object {...}, isSimulated: false, jQuery311042854121322469546: true, key: "Control", keyCode: 17 ...}
{altKey: false, bubbles: true, button: undefined, buttons: undefined, cancelable: true, changedTouches: undefined, char: "", charCode: 0, clientX: undefined, clientY: undefined, ctrlKey: true, currentTarget: HTMLInputElement {...}, data: undefined, delegateTarget: HTMLInputElement {...}, detail: 0, eventPhase: 2, handleObj: Object {...}, isSimulated: false, jQuery311042854121322469546: true, key: "5", keyCode: 53 ...}

What am I missing?

Answer 1

You have a few things that I would suggest here.

The first relates to your use of CTRL in your pressKeys method. Have a look at the Leadfoot documentation:

https://theintern.io/leadfoot/module-leadfoot_keys.html

The CTRL key is referenced by using keys.CONTROL.

Another suggestion that I would have (based on my own experience with using Intern) is that you should include all key presses in a single array. Right now you have two lines as follows:

.pressKeys([keys.CTRL, '5'])
.pressKeys(keys.NULL)

I found that what would happen is that you needed all of these to be contained in a single array such as:

.pressKeys([keys.CONTROL, '5', keys.NULL])

It should be noted that some people have individual pressKeys events and it seems to work for them. For me, when I wanted to do keyboard shortcuts like this, I could never get that to work.

In addition to this, another suggested array of key presses is as follows - this will press both keys you want and then release them again too:

.pressKeys([keys.CONTROL, '5', '5', keys.CONTROL)

Update 1:

One thing you should look out for (and it's something that recently affected me which is why I said I'd suggest it here while it's fresh in my mind) is to ensure your capabilities are set to ensure that keyboard events are supported. There are a few ways to do this.

Firstly, you can set a global capabilities setting as follows:

"capabilities": {
  ...
  "fixSessionCapabilities": true
}

This will resolve a lot of the problems automatically with an environment before any tests are run. However I have found that using this setting as true globally can cause other unwanted behaviours with your environments so another alternative to that is to set what you need on an individual environment as required.

For example, your keyboard events don't seem to be working so you can ask your configuration to try to correct this when IE tests are run as follows:

"environments": [
  ...
  {
    "browserName": "internet explorer",
    "brokenSendKeys": true
  }
]

If you want to view and try out any other potential settings like this then you can find them all in the Globals section of the Leadfoot documentation as follows:

https://theintern.io/leadfoot/global.html