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

[HannahM]

• Summary
• Steps to find the XPath locator
• Adding an XPath locator into your Monitor
• Steps to add an XPath locator into an existing Click or Keystrokes event
• Steps to add a JavaScript event to click on XPath locator
• What's Next

 

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 select one.

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

What's Next

If none of the previous steps resolved the issue, open a chat and provide a link to the monitor you're updating and the configuration steps you have already completed.

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

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

[mborra2]

Hi team,

It looks like the design of the ticketing page has changed slightly which is causing an alert in Dynatrace. We have a synthetic script is flagging an issue with not being able to click on "XXX" but  in the new design just shows "YYY" in a circle instead.  How Can we adjust the test script for this?

Thanks,

B.Mahathi

[HannahM]

You'll need to update the script. If it's just the locator that has changed, you can find it using the steps above and then update the relevant event. If the flow of the pages has changed, it may be easier to re-record the script.