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

[Mareeswaran]

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

1. Go to the relevant page on Chrome browser

2. Right-click on the element that you want to interact with on the page-> Inspect the element, which will open the developer tools

3.  Verify the Event Listeners(Right Side of Developer tools) and confirm if the relevant element has event listeners(Like Click, Mouseover, Pointerdown)

4. Right click on the element on the Web developer tools - > Copy - > Copy JS path

   

5. 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);

6. 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. 

You can find further troubleshooting tips for Synthetic in the Synthetic Troubleshooting Map

[shalnw]

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? 

[Mareeswaran]

@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.

[shalnw]

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? 

[Mareeswaran]

@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.