How to perform a right-click in a Browser Clickpath Synthetic Monitor

[HannahM]

Self Service Summary

Sometimes a simple click is not sufficient and a right-click is needed. This can be achieved through a JavaScript Event. 

Issue	Solution	Tasks	Alternative(s)
Right-click is needed	Use a JavaScript event	Find the relevant locator Update the snippet	If this does not work, you can ask on chat to check your code.

Steps to follow to perform a right-click in a Browser Clickpath Synthetic Monitor

1. Go to the relevant page in a Chrome browser

2. Right-click on the element which you want to interact with on the page and select Inspect. The element will then be shown in Developer Tools 

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

   
   

4. Paste the JS path on the below element value

   function rightClick(element){
     var evt = element.ownerDocument.createEvent('MouseEvents');
     var RIGHT_CLICK_BUTTON_CODE = 2; // the same for FF and IE
     evt.initMouseEvent('click', true, true,
         element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false,
         false, false, false, RIGHT_CLICK_BUTTON_CODE, null);
     return !element.dispatchEvent(evt);
   }
   var element = document.querySelector('button[id="testid"]'); //Replace with the element which you want to right-click.
   rightClick(element);

5. Add a new event into the monitor, where you need to right-click and paste in the updated snippet above. 

   

[ChadTurner]

Thanks for sharing!