How to perform a keypress in a Browser Clickpath Synthetic Monitor

[HannahM]

Self Service Summary

For some applications, keyboard actions are needed, such as arrow up, arrow down, arrow left, arrow right, enter, escape etc. 

Issue	Solution	Tasks	Alternative(s)
Keyboard action needed	Use Keydown & keyup events	Find key codes & use snippet	create ticket if that doesn't work

Where an application needs a keyboard button to be pressed, we can use a JavaScript event to perform this.

1. Find the key code needed
   The example is using F7, which is keycode 39. Key codes can be found here: https://www.oreilly.com/library/view/javascript-dhtml/9780596514082/apb.html 
2. Confirm is a specific element is needed or if the click is anywhere on the page. 
   
   
   1. If the keypress is not related to a specific element, you can use 'body' for the input 
      

      var input = document.querySelector("body");​

   2. If the keypress is related to a specific element 

      1. Go to the relevant page on Chrome browser

      2. Right click on the element which you want to interact with on the page-> Inspect the element which will open the developer tools

         
      3. Right click on the element on the Web developer tools - > Copy - > Copy JS path

         

      4. Update the input variable with the selector you have just copied 

         var input = document.querySelector("#yourSelector");​

          
3. Update the following snippet to use your 

   var parameters1 = {isTrusted: true, altKey: false, bubbles: true, cancelBubble: false, cancelable: true, charCode: 0, code: "F7", composed: true, ctrlKey: false, defaultPrevented: true, detail: 0, eventPhase: 0, isComposing: false, key: "F7", keyCode: 118, location: 0, metaKey: false, repeat: false, returnValue: false, shiftKey: false, which: 118};
   
   var parameters2 = { isTrusted: true, altKey: false, bubbles: true, cancelBubble: false, cancelable: true, charCode: 0, code: "F7", composed: true, ctrlKey: false, defaultPrevented: false, detail: 0, eventPhase: 0, isComposing: false, key: "F7", keyCode: 118, location: 0, metaKey: false, repeat: false, returnValue: true, shiftKey: false, which: 118};
   
   var input = document.querySelector("#yourSelector");
   input.dispatchEvent(new KeyboardEvent("keydown", parameters1));
   input.dispatchEvent(new KeyboardEvent("keyup", parameters2));​

   You will need to update the following:
   key to be the key you want to press
   keyCode and which to be the keyCode you found in step 1
   input to use either "body" or the required selector as found in step 2
4. Open the monitor you would like to add this action to and Add Synthetic event of type JavaScript. You can then paste in the updated snippet and move the event to the relevant position in the clickpath.