article How to perform a click event using Javascript on browser clickpath synthetic monitors in Troubleshooting

How to perform a click event using Javascript on browser clickpath synthetic monitors

Mareeswaran — Wed, 28 Jan 2026 10:50:52 GMT

This article shows how to trigger click events with JavaScript during a synthetic browser monitor execution. It explains supported scripting methods and provides examples for selecting elements and invoking clicks.

Summary

In some scenarios, a recorded click event doesn't work during recorder playback, and this may be because the relevant element needs a combination of events to complete an action. We can verify the Event Listeners from Developer tools and try with associated events.

Solution

Steps to follow to perform the needed events for a click action on browser clickpath synthetic monitor

Go to the relevant page on Chrome browser
Right-click on the element that you want to interact with on the page-> Inspect the element, which will open the developer tools
Verify the Event Listeners(Right Side of Developer tools) and confirm if the relevant element has event listeners(Like Click, Mouseover, Pointerdown)
Right click on the element on the Web developer tools - > Copy - > Copy JS path
Paste the JS path on the below element value and add this JavaScript code into the JavaScript Event of your Browser click path monitor

function triggerevent(element) { var parameters1 = { isTrusted: true, pressure: 0.5, type: "pointerdown", bubbles: true, cancelable: true, cancelBubble: false }; var parameters2 = { isTrusted: true, bubbles: true, cancelable: true, cancelBubble: false }; var evt1 = new PointerEvent("pointerdown", parameters1); element.dispatchEvent(evt1); var evt2 = new PointerEvent("pointerup", parameters1); element.dispatchEvent(evt2); var evt3 = new MouseEvent("mouseup", parameters2); element.dispatchEvent(evt3); var evt4 = new MouseEvent("click", parameters2); element.dispatchEvent(evt4); } var element = document.querySelector("#layout-inner > dt-common-navigation").shadowRoot.querySelector("nav > nav > ul > li:nth-child(9) > a"); triggerevent(element);
Update the script to call the relevant events.

What's Next

If none of the previous steps resolved the issue, open a chat and provide a link to the monitor and this article.

What to read next:

Synthetic Troubleshooting Map

Re: How to perform click event with help of Javascript on browser click path synthetic monitor incase of recorded click event not

shalnw — Fri, 03 May 2024 07:05:16 GMT

Hi @Mareeswaran , thank you for your suggestion. I have tried replacing all the CSS locators with DOM and it works during replay but is there anyway we could set up Dynatrace to capture the DOM locators by default (instead of CSS) while recording a flow?

Re: How to perform click event with help of Javascript on browser click path synthetic monitor incase of recorded click event not

Mareeswaran — Wed, 08 May 2024 05:05:00 GMT

@shalnw Unfortunately, we don't have way to make the synthetic recorder to capture the DOM locators by default and we need to inspect & add the DOM locators manually.

Re: How to perform click event with help of Javascript on browser click path synthetic monitor incase of recorded click event not

shalnw — Wed, 08 May 2024 05:25:13 GMT

Thanks @Mareeswaran , I have added the DOM locators/ events and the screenshots to my recording. The playback click path replays the expected flow and the screenshots are correct. But when I go to Analyse executions to view results, it shows just the website's homepage. Is this inconsistency expected for Shadow DOM events?

Re: How to perform click event with help of Javascript on browser click path synthetic monitor incase of recorded click event not

Mareeswaran — Wed, 08 May 2024 05:14:47 GMT

@shalnw Yes. If the application uses the shadowDOM elements, Dynatrace Synthetic Recorder extension not supported for recording the shadowDOM elements. You can refer the community article for that How to inspect and add the shadow DOM elements into synthetic script events.

Re: How to perform a click event using Javascript on browser clickpath synthetic monitors

kenyu216 — Tue, 04 Nov 2025 19:16:23 GMT

I tried out this JS script method and currently encountering the error "Playback error: Exception was thrown by the JavaScript code: Cannot read properties of null (reading 'shadowRoot')."

I'm not sure what I am missing here.

Thank you.

Re: How to perform a click event using Javascript on browser clickpath synthetic monitors

Mareeswaran — Wed, 19 Nov 2025 08:43:09 GMT

Hi @kenyu216

I suspect that target window may be different one and that is the reason its unable to identify the selector. You can inspect the element and check if there is any iframe are available. If so, you need to use the relevant target window like ruxitWin[0].frames[0]