How to perform a keypress in a Browser Clickpath Synthetic Monitor

[HannahM]

Summary

Browser Clickpath Synthetic Monitors in Dynatrace validate end-user journeys by recording clicks and keystrokes. However, some web applications depend on keyboard inputs (such as Enter, Escape, arrow keys, or function keys) that the Dynatrace Synthetic Recorder doesn’t capture.
This article explains how to simulate keypress actions in a Browser Clickpath Synthetic Monitor using JavaScript synthetic events, enabling reliable monitoring of applications that rely on keyboard input.

• Summary
• Problem
• Troubleshooting steps
• Resolution
• What's Next
• Related reading

Problem

The Dynatrace Synthetic Recorder doesn't capture keyboard‑only interactions such as:

• Pressing Enter or Escape
• Navigating menus with arrow keys
• Triggering actions with function keys

As a result, Browser Clickpath Synthetic Monitors may fail or behave unexpectedly when replaying user journeys that require these keypresses, even though the application works correctly for real users.

Troubleshooting steps

Before implementing a solution, confirm the following:

• The failing step in the Browser Clickpath Monitor requires a keyboard action rather than a mouse click.
• The keypress is:
  • Global (not tied to a specific element), or
  • Associated with a specific input or UI element.
• You know the key code for the required keypress (for example, Enter, Escape, F-keys, arrow keys).

If these conditions are true, handle the interaction using a JavaScript synthetic event instead of a recorded step.

Resolution

To perform a keypress in a Browser Clickpath Synthetic Monitor, add a JavaScript event that dispatches keyboard events manually:

1. Identify the key code for the required keyboard action.
   Example: For F7, the code is 118. Find key codes here.
2. Determine the target element:
   
   
   1. Page body: If the keypress isn’t tied to an element, use body
      
      

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

   2. Specific DOM element:

      • Open the page in Chrome.
      • Right-click the target element → Inspect.
        
      • In Developer Tools, right-click the element → Copy > Copy JS path.
        

        

      • Use that selector in your script

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

         
3. Update the JavaScript snippet with:
   • key: The key to press
   • keyCode: The corresponding key code
   • input: Either "body" or the selector
     Example:
     

     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. Add this script as a JavaScript step in your Browser Clickpath Synthetic Monitor and position it in the sequence as needed.

What's Next

If the keypress alone doesn't resolve the issue:

• Verify if additional events (like focus or input) are required.
• For advanced interaction scenarios, check the guidance on JavaScript events in Browser Clickpath Monitors.
• If problems persist, open a support chat and provide:
  • A link to the affected monitor
  • Details of the simulated keypress
  • Any JavaScript used

Related reading

📖  Synthetic Troubleshooting Map

📖  Configure Browser Monitors

📖  Browser Monitor JavaScript events