How to perform a keypress in a Browser Clickpath Synthetic Monitor

[HannahM]

Summary

Some applications require keyboard actions, such as arrow up, arrow down, arrow left, arrow right, enter, escape, etc. The Dynatrace Synthetic Recorder does not record these, and they need to be manually added using a JavaScript event.

Resolution

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 if the keypress is related to a specific element. 
   
   
   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 a Chrome browser.

      2. Right-click on the element you want to interact with on the page and select Inspect. Developer tools will then open with the relevant element selected.

         
      3. Right-click on the element in the Web Developer Tools, and select Copy, then 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 with the information you have just gathered
   
   1. key to be the key you want to press
      keyCode, and which is the keyCode you found in step 1
      input to use either "body" or the required selector as found in step 2
      
      

      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));​

4. Open the monitor to which you want to add this action, and add a Synthetic event of type JavaScript. You can then paste in the updated snippet and move the event to the relevant position in the clickpath.

What's Next

If none of the previous steps resolved the issue, open a chat and provide a link to the monitor you're updating and the configuration steps you have already completed.

You can find further troubleshooting tips for Synthetic in the Synthetic Troubleshooting Map