cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Mareeswaran
Dynatrace Helper
Dynatrace Helper

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 toolsInspect.jpg

  3.  Verify the Event Listeners(Right Side of Developer tools) and confirm if the relevant element have event listeners(Like Click, Mouseover, Pointerdown)Event Listeners.jpg
  4. Right click on the element on the Web developer tools - > Copy - > Copy JS path

    Copy JS Path.jpg
  5. Paste the JS path on the below element value and add this JavaScript code into the JavaScript Event of your Browser click path monitorAdd JS event.jpg

 

 

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

 

 

 

Version history
Last update:
‎01 May 2024 11:40 AM
Updated by:
Comments
shalnw
Visitor

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
Dynatrace Helper
Dynatrace Helper

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

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
Dynatrace Helper
Dynatrace Helper

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