Summary
Since version 1.350, the Dynatrace Synthetic Recorder supports recording elements inside open shadow DOM. For these elements, the recorder automatically creates DOM locators. If a recorded step later fails, or if the recorder can't capture the element, you can inspect the element and add or update a DOM locator manually.
Problem
After recording a Browser Clickpath, one of the following occurs:
- A step fails with:
- 1502 - The html element could not be found to perform action
- Inspection of the element shows it is located inside a**#shadow-root**.
How the Synthetic Recorder handles Shadow DOM
The Synthetic Recorder can record elements located inside open shadow roots. During recording:
- For elements inside an open shadow root, the recorder creates DOM locators. CSS selectors can’t cross a shadow boundary.
- A DOM locator looks like
document.querySelector("my-button").shadowRoot.querySelector("#submit").
- The format matches the Chrome DevTools Copy JS path output.
- The recorder stores up to five DOM locators for a step.
- During playback, Dynatrace tries the locators in sequence until one successfully identifies the element.
To view the generated locators:
- Open the affected Browser monitor.
- Edit the failing step.
- Review the recorded DOM locators.
Resolution: Update or add a DOM locator
If no recorded locators match due to application changes or limitations, playback can fail with 1502.
To create a new locator:
- Open the application page in Google Chrome.
- Right-click the affected element and select Inspect.
- In Chrome DevTools, right-click the element.
- Select Copy → Copy JS path.
- Open the Browser monitor in the Synthetic app or Synthetic Classic app.
- Edit the monitor
- Select the relevant step and edit the element locators.
- Select Add locator.
- Choose DOM as the locator type.
- Paste the copied JavaScript path.
- Save the step.
Known Limitations
| Situation |
Behavior |
Recommended Action |
| Closed shadow root |
The recorder cannot access elements inside the closed root and records the host element instead. The step may interact with the wrong element. |
Manually implement an alternative approach such as an XPath locator or JavaScript event. |
| Shadow DOM element inside an iframe that is itself inside a shadow root |
Recording stops with an error (20000). |
Record the surrounding steps and add the iframe interaction manually. |
| More than 15 nested shadow roots or no usable selector can be generated |
Recording stops with an error (20000). |
Create the step manually using a DOM locator. |
FAQ
Can Dynatrace record Shadow DOM elements?
Yes. Synthetic Recorder version 350 and later can record elements inside open shadow roots and automatically generate DOM locators.
Why does my Shadow DOM step fail with error 1502?
The recorded DOM locator may no longer match the application after a UI change. Update the locator using Chrome DevTools Copy JS path.
Are closed shadow roots supported?
No. The recorder cannot inspect elements inside closed shadow roots. Alternative approaches such as JavaScript events or XPath locators may be required.
What's Next
If updating the DOM locator does not resolve the issue:
- Try implementing a JavaScript click event.
- Consider using an XPath locator where appropriate.
- Review additional Browser monitor locator options.
- If assistance is still required, open a support ticket and provide:
- The Browser monitor link
- The failing step
- The locator being used
- The troubleshooting already performed.
Related reading
📖 Synthetic Troubleshooting Map
📖 How to perform a click event using Javascript on browser clickpath synthetic monitors
📖 How to add an XPath locator in a Browser Clickpath Monitor script
📖 How to add the DOM selector on Browser click path monitors with the Dynamic iframes scenarios
📖 Synthetic Browser Monitor Error Codes
