Dropdown dynamic elements are a common feature in modern web applications, offering dynamic and interactive user experiences. However, their dynamic nature can make locating them a challenge for automation testing. In this blog, I focuses on two common types of dropdowns: those that appear on click and those that appear on hover.
How to find XPaths in Clickable Dropdowns
Clickable dropdowns that appear when you click dropdown button.
Steps to locate a basic dropdown:
- Interact with the dropdown: Navigate to the your webpage and click on the dropdown to expand it.
- Use DevTools to inspect the HTML: Right-click on a visible dropdown item and choose "Inspect" to open DevTools. This will highlight the HTML structure of the dropdown. Right-click the element again in DevTools, then select Copy > Copy Xpath to get its XPath.
Example:
1. Navigate to https://formstone.it/components/dropdown/
2. Click the "Select A State" button to open dropdown
3. Right click on dropdown and click "Inspect". DevTools will opened and highlighted the element dropdown on "Element tab"
4. Right-click the highlighted element in DevTools. Select Copy and choose option element you want.
Example I have XPath for this element
//*[@id="demo_label-dropdown"]/div/div[2]/button[3]
How to find XPaths in Hover Dropdowns
Dropdowns that appear on hover are harder to inspect because they disappear when you try to access them in DevTools. This happens due to JavaScript behaviors or dynamic rendering. Here are two solutions to handle it.
Solution 1: Use DevTools Debugger:
Example:
1.Hover over the dropdown to make it appear
2.Press CRL +Shift (or Cmd + Shift on Mac) then press F8 to pause the browser in the debugger mode
3. Change to Element tab and continue as step 3 in clickable dropdown to get element.
Beside that, if you press button not work you can use next solution to find XPath for hover dropdown.
Solution 2: Use setTimeout() for Debugging:
Another trick is to trigger a delay using JavaScript to give yourself time open dropdown and debug after.
Example:
1. Navigate to https://orangedigital.co/
2.Open DevTools (F12) and change to console tab.
3.Copy statement below and pass this into command and press Enter
setTimeout(() => {debugger;},3000)
This delays the debugger after 3 seconds – enough for you to open the dropdown manually before the page pause.
4. Change to Element tab and continue as step 3 in clickable dropdown to get element.
You will see different on HTML structure when you change to debug mode
Before: the dropdown has display: none;
After using debugger: It changes to display: block; And is visible in the UI.
Conclusion
With these techniques, locating XPath for even the most becomes manageable. Whether you're dealing with static clicks or hover-based element, mastering DevTools and timing strategies will help you automate efficiently.
Thanks for reading. Hope it help!