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

Mareeswaran — Mon, 08 Jun 2026 10:40:37 GMT

Summary

When a recorded click fails in a Dynatrace Synthetic Browser Monitor, you can use a JavaScript event to manually dispatch the required pointer and mouse events (pointerdown, pointerup, mouseup, click) so the application processes the interaction correctly.

This approach is commonly required for modern web applications that rely on multiple event listeners or advanced front‑end frameworks.

Problem

In some scenarios, a recorded click event in a Browser Clickpath Synthetic Monitor does not work during execution or playback.

This usually happens because the target application doesn't respond to a simple .click() action, but instead expects a combination of pointer and mouse events to be fired in a specific order.

When JavaScript Click Events Are Required

You typically need a JavaScript click event when:

The recorded click works during recording but fails during monitor execution
The application relies on custom JavaScript event listeners
The element reacts to pointer events, not just click events
The application uses modern UI frameworks or Shadow DOM

In these cases, dispatching the required events manually ensures the application behaves as if a real user performed the action.

How to Identify Required Events (Chrome DevTools)

Before writing any JavaScript, verify which events the application expects.

Step 1 – Inspect the element

Open the application in Google Chrome
Right‑click the element you want to interact with
Select Inspect to open Chrome DevTools, which will open the developer tools

Step 2 – Check event listeners

In DevTools, select the element
Open the Event Listeners tab
Identify which events are registered (for example: click, pointerdown, pointerup, mouseover)

These are the events you’ll need to dispatch manually.

JavaScript Example: Triggering Pointer and Mouse Events

The following example demonstrates how to dispatch multiple events to reliably simulate a real user click.

Step 3 – Copy the JavaScript selector

In Chrome DevTools:

Right‑click the element in the DOM tree
Select Copy → Copy JS path

Step 4 – Add a JavaScript Event to the Browser Clickpath

Paste the following code into a JavaScript event in your Browser Clickpath Synthetic Monitor, and replace the selector with your own.

Example Using Shadow DOM

⚠️ Note:
The example above accesses the element via shadowRoot. This is required only if your application uses Shadow DOM.

If your application doesn't use Shadow DOM, remove the .shadowRoot portion and use a standard querySelector() instead.

Common Pitfalls and Troubleshooting

If the click still does not work:

Verify that the correct element is being selected
Confirm the required event types in DevTools
Ensure the element is visible and not covered by overlays
Check whether the application requires trusted events

When to Use Trusted Events Instead

Some applications check whether an action was triggered by a real user using the isTrusted property.

In these cases, JavaScript‑dispatched events may still fail. If this happens, consider enabling Trusted Events in your Browser Clickpath configuration and using native click steps instead.

See for details.

Frequently Asked Questions

Why doesn’t .click() work in Synthetic Browser Monitors?
Some applications listen for multiple pointer or mouse events, not just a click.

When should I use JavaScript events instead of recorded clicks?
When recorded clicks fail during execution but work during recording.

Is this approach supported by Dynatrace?
Yes. Browser Clickpath Synthetic Monitors support JavaScript events for advanced interaction scenarios.

Should I always prefer Trusted Events?
Use Trusted Events when the application explicitly checks for real user interactions; otherwise, JavaScript events are often sufficient.

What's Next

If the issue persists after trying JavaScript and trusted events, open a support chat or ticket and provide:

A link to the affected monitor
The selector and JavaScript used
A reference to this article

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]

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

Summary

Problem

When JavaScript Click Events Are Required

How to Identify Required Events (Chrome DevTools)

Step 1 – Inspect the element

Step 2 – Check event listeners

JavaScript Example: Triggering Pointer and Mouse Events

Step 3 – Copy the JavaScript selector

Step 4 – Add a JavaScript Event to the Browser Clickpath

Example Using Shadow DOM

Common Pitfalls and Troubleshooting

When to Use Trusted Events Instead

Frequently Asked Questions

What's Next

Related reading

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

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

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

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

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

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