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

[Mareeswaran]

In some cases, recorded click event doesn't work during recorder playback and it may be due to relevant element is needed combinational multiple events and we can verify the Event Listeners from Developer tools and try with associated events. Here is the sample.

Steps to follow to perform the mouseover event on browser click path synthetic monitor

1. Go to the relevant page on Chrome browser

2. Right click on the element which 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 have 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);

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