https://community.dynatrace.com/t5/Troubleshooting/How-to-perform-a-keypress-in-a-Browser-Clickpath-Synthetic/ta-p/237412 <H2>Summary</H2> <DIV class="paragraph-in-scc-markdown-text ___1ngh792 ftgm304 f1iaxwol"> <DIV>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.<BR />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.</DIV> </DIV> <P>&nbsp;</P> <P><LI-TOC indent="15" liststyle="disc" maxheadinglevel="3"></LI-TOC></P> <DIV> <DIV class="paragraph-in-scc-markdown-text ___1ngh792 ftgm304 f1iaxwol">&nbsp;</DIV> <DIV class="paragraph-in-scc-markdown-text ___1ngh792 ftgm304 f1iaxwol"> <H2>Problem</H2> <DIV class="paragraph-in-scc-markdown-text ___1ngh792 ftgm304 f1iaxwol">The Dynatrace Synthetic Recorder doesn't capture keyboard‑only interactions such as:</DIV> <UL> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">Pressing Enter or Escape</LI> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">Navigating menus with arrow keys</LI> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">Triggering actions with function keys</LI> </UL> <DIV class="paragraph-in-scc-markdown-text ___1ngh792 ftgm304 f1iaxwol"> <DIV>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.</DIV> </DIV> </DIV> <DIV class="paragraph-in-scc-markdown-text ___1ngh792 ftgm304 f1iaxwol">&nbsp;</DIV> </DIV> <DIV> <H2>Troubleshooting steps</H2> <DIV class="paragraph-in-scc-markdown-text ___1ngh792 ftgm304 f1iaxwol"> <DIV> <DIV class="paragraph-in-scc-markdown-text ___1ngh792 ftgm304 f1iaxwol">Before implementing a solution, confirm the following:</DIV> <UL> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">The failing step in the Browser Clickpath Monitor requires a keyboard action rather than a mouse click.</LI> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">The keypress is: <UL> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">Global (not tied to a specific element), or</LI> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">Associated with a specific input or UI element.</LI> </UL> </LI> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">You know the key code for the required keypress (for example, Enter, Escape, F-keys, arrow keys).</LI> </UL> <DIV class="paragraph-in-scc-markdown-text ___1ngh792 ftgm304 f1iaxwol">If these conditions are true, handle the interaction using a JavaScript synthetic event instead of a recorded step.</DIV> </DIV> </DIV> <DIV class="paragraph-in-scc-markdown-text ___1ngh792 ftgm304 f1iaxwol">&nbsp;</DIV> </DIV> <H2>Resolution</H2> <DIV> <DIV>To perform a keypress in a Browser Clickpath Synthetic Monitor, add a JavaScript event that dispatches keyboard events manually:</DIV> </DIV> <DIV>&nbsp;</DIV> <OL> <LI> <DIV><STRONG>Identify the key code</STRONG> for the required keyboard action.<BR />Example: For F7, the code is 118. Find key codes <A class="fui-Link ___w5et180 f2hkw1w f3rmtva f1ewtqcl fyind8e f1k6fduh f1w7gpdv f1mo0ibp fjoy568 ff5ikls f1s184ao f1mk8lai fnbmjn9 f1o700av f13mvf36 f1cmlufx f9n3di6 f1ids18y f1tx3yz7 f1deo86v f1eh06m1 f1iescvh fhgqx19 f1olyrje f1p93eir f1nev41a" tabindex="0" href="https://www.oreilly.com/library/view/javascript-dhtml/9780596514082/apb.html" target="_blank" rel="noopener noreferrer" data-tabster="{&quot;restorer&quot;:{&quot;type&quot;:1}}">here</A>.</DIV> </LI> <LI> <DIV> <DIV><STRONG>Determine the target element</STRONG>:</DIV> </DIV> <BR /> <OL> <LI> <DIV><STRONG>Page body</STRONG>: If the keypress isn’t tied to an element, use <CODE>body</CODE></DIV> <BR /><LI-CODE lang="markup">var input = document.querySelector("body");​</LI-CODE></LI> <LI> <DIV><STRONG>Specific DOM element</STRONG>: <UL> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">Open the page in Chrome.</LI> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">Right-click the target element → <STRONG>Inspect</STRONG>.<BR /><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="HannahM_3-1708342198080.png" style="width: 400px;"><img src="https://community.dynatrace.com/t5/image/serverpage/image-id/17665iAC499758BFEFE3DB/image-size/medium?v=v2&amp;px=400" role="button" title="HannahM_3-1708342198080.png" alt="HannahM_3-1708342198080.png" /></span></LI> </UL> </DIV> <P>&nbsp;</P> <UL> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">In Developer Tools, right-click the element → <STRONG>Copy &gt; Copy JS path</STRONG>.<BR /> <P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="CopyJSPath.png" style="width: 999px;"><img src="https://community.dynatrace.com/t5/image/serverpage/image-id/17667iA9220A515F5BDB8E/image-size/large?v=v2&amp;px=999" role="button" title="CopyJSPath.png" alt="CopyJSPath.png" /></span></P> </LI> <LI> <P>Use that selector in your script</P> <LI-CODE lang="markup">var input = document.querySelector("#yourSelector");​</LI-CODE> <DIV id="tinyMceEditorMareeswaran_0" class="mceNonEditable lia-copypaste-placeholder">&nbsp;</DIV> <SPAN>&nbsp;</SPAN> <DIV id="tinyMceEditorMareeswaran_3" class="mceNonEditable lia-copypaste-placeholder">&nbsp;</DIV> </LI> </UL> </LI> </OL> </LI> <LI><STRONG>Update the JavaScript snippet</STRONG> with: <UL> <LI><STRONG>key</STRONG>: The key to press</LI> <LI><STRONG>keyCode</STRONG>: The corresponding key code</LI> <LI><STRONG>input</STRONG>: Either <CODE>"body"</CODE> or the selector<BR />Example:<BR /><LI-CODE lang="markup">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));​​</LI-CODE></LI> </UL> </LI> <LI> <DIV><STRONG>Add this script as a<A href="https://docs.dynatrace.com/docs/platform-modules/digital-experience/synthetic-monitoring/browser-monitors/configure-browser-monitors#recorded-clickpath" target="_self"> JavaScript step</A></STRONG> in your Browser Clickpath Synthetic Monitor and position it in the sequence as needed.</DIV> </LI> </OL> <P>&nbsp;</P> <H2 id="toc-hId--526228148">What's Next</H2> <DIV> <DIV> <DIV class="paragraph-in-scc-markdown-text ___1ngh792 ftgm304 f1iaxwol">If the keypress alone doesn't resolve the issue:</DIV> <UL> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">Verify if additional events (like focus or input) are required.</LI> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">For advanced interaction scenarios, check the guidance on JavaScript events in Browser Clickpath Monitors.</LI> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">If problems persist, open a support chat and provide: <UL> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">A link to the affected monitor</LI> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">Details of the simulated keypress</LI> <LI class="___ccc16d0 fje8fi8 f1ng9h0j f1bwykku f18jd3zf">Any JavaScript used</LI> </UL> </LI> </UL> </DIV> </DIV> <H3><BR />Related reading</H3> <P><span class="lia-unicode-emoji" title=":open_book:">📖</span>&nbsp;&nbsp;<A class="" href="https://community.dynatrace.com/t5/Troubleshooting/Synthetic-Troubleshooting-Map/ta-p/250426" target="_blank" rel="noopener">Synthetic Troubleshooting Map</A></P> <P><span class="lia-unicode-emoji" title=":open_book:">📖</span>&nbsp;&nbsp;<A href="https://docs.dynatrace.com/docs/observe/digital-experience/synthetic-monitoring/browser-monitors/configure-browser-monitors" target="_blank" rel="noopener noreferrer">Configure Browser Monitors</A></P> <P><span class="lia-unicode-emoji" title=":open_book:">📖</span>&nbsp;&nbsp;<A href="https://docs.dynatrace.com/docs/observe/digital-experience/synthetic-monitoring/browser-monitors/browser-clickpath-events#javascript" target="_blank" rel="noopener noreferrer">Browser Monitor JavaScript events</A></P> Mon, 27 Apr 2026 12:35:57 GMT HannahM 2026-04-27T12:35:57Z https://community.dynatrace.com/t5/Troubleshooting/How-to-perform-a-keypress-in-a-Browser-Clickpath-Synthetic/ta-p/237412 <P><LI-TOC indent="15" liststyle="disc" maxheadinglevel="2"></LI-TOC></P> <DIV class="lia-message-template-content-zone"> <P>*<EM>Use a table of contents for longer articles.&nbsp;</EM></P> <H1>Summary</H1> <P><EM>*This is a mandatory section.</EM></P> <P><EM>Short description of which part of the Dynatrace platform the article refers to and what kind of problem it will help resolve / task it will describe.</EM></P> <P>&nbsp;</P> <H1>Problem</H1> <P><EM>*This is a mandatory section.</EM></P> <P><EM>Provide a precise description of the problem / task to be described.</EM></P> <P>&nbsp;</P> <H1>Troubleshooting steps</H1> <P><EM>*This section can be omitted.</EM></P> <P>&nbsp;</P> <H1>Resolution</H1> <P><EM>*This section can be omitted for ticket‑creation articles.</EM></P> <H1>What's next</H1> <P><EM>*This is a mandatory section.</EM></P> </DIV> Mon, 27 Apr 2026 12:35:57 GMT https://community.dynatrace.com/t5/Troubleshooting/How-to-perform-a-keypress-in-a-Browser-Clickpath-Synthetic/ta-p/237412 HannahM 2026-04-27T12:35:57Z