How to add an XPath locator in a Browser Clickpath Monitor script

[HannahM]

Self Service Summary

Browser Clickpath Monitors support DOM and CSS locators out of the box. This covers most scenarios but for some applications an XPath locator is needed. This article will explain how to click on one.

Issue	Solution	Tasks	Alternative(s)
XPath locator is required for action	Use a JavaScript event	Add Javascript event and snippet. Update locator	Open a chat or support ticket

Steps to find the XPath locator

1. Open the relevant page in a Chrome Browser
2. Right-click on the element to be clicked in the Browser clickpath monitor
3. Select Inspect (this will open Dev Tools)
4. Right-click on the element that is highlighted
5. Choose Copy > Copy XPath
   Find XPath

Adding an XPath locator into your Monitor

You can either use the XPath locator directly as a locator or use a JavaScript event for clicking. 

Steps to add an XPath locator into an existing Click or Keystrokes event 

1. Open the Browser Clickpath Monitor> Settings > Recorded clickpath page
2. Open the relevant Click or Keystroke event you would like to update
3. In the Edit element locators section, modify the 1st locator to be DOM type and replace the Input section with 

   document.evaluate('xpath', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue

   Replacing xpath with the XPath captured previously
   
4. Save changes

Steps to add a JavaScript event to click on XPath locator

1. Open the Browser Clickpath Monitor> Settings > Recorded clickpath page
2. Click Add synthetic event
    
3. Name the event, select JavaScript from the select synthetic event drop down and pick the event you would like you new event to be added after. 
   
4. Click Add Synthetic event
5. Paste the following snippet into the black box
   

   function getElementByXpath(path) {
       return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
   }
   
   a1 = getElementByXpath('xpath');
   a1.click();​

   
   
6. Replace xpath with the XPath captured previously
7. Save changes

[ChadTurner]

Great Write up thanks @HannahM 

[daniel_severino]

I know that the post is very old but Could you tell me how to implement a condition if the by chance the object (dropdown) has not been load on the page to throw an exception, please?

[HannahM]

Could you add a javascript event and check if the resource loaded as expected?

performance.getEntriesByName("https://domain.com/fonts/bernina/BerninaSans-Web-Light.woff")[0].responseStatus

response would be 0 if it hasn't loaded.  

[daniel_severino]

Thanks a lot!

You not only solved my question but also gave me ideas for other questions.