Key takeaways
- Chrome DevTools can copy an XPath, but the generated one is usually position-based and brittle.
- Rewrite it around an id or a stable attribute before putting it in a test.
- If no stable hook exists, adding one to the page is cheaper than maintaining the locator.
Is Your Infrastructure Ready for Global Traffic Spikes?
Unexpected load surges can disrupt your services. With LoadFocus’s cutting-edge Load Testing solutions, simulate real-world traffic from multiple global locations in a single test. Our advanced engine dynamically upscales and downscales virtual users in real time, delivering comprehensive reports that empower you to identify and resolve performance bottlenecks before they affect your users.
Enroll Now for the new Online Course: How to Find XPath for Web Elements in Chrome and Firefox Browsers.
A lot of times while developing a test or when debugging a test you want to check to what element the XPath used in your test refers to. You will find this useful since you don’t need to install any other plugin or widget, you can use just built-in browser functionality.
For example, let’s imagine we have the following code in our UI Selenium test:
@FindBy(xpath = "//div[contains(@class,'item--lowest')]//a[contains(@class,'summary__date')]")
public WebElement summaryDateElement;
To identify to which element this refers to just do the following:
Think your website can handle a traffic spike?
Fair enough, but why leave it to chance? Uncover your website’s true limits with LoadFocus’s cloud-based Load Testing for Web Apps, Websites, and APIs. Avoid the risk of costly downtimes and missed opportunities—find out before your users do!
-
- Open the URL / web page in the Chrome browser
- Open the Web developer tools by pressing:
- Cmd + Alt + I (on Mac)
- or by clicking View -> Developer -> Developer tools
- or by Right-Click and Inspect Element
See more details
[emaillocker]
- Click on the Console tab in the Web developer tools
- Paste in the console the XPath from your test in the following format:
- $x(“//div[contains(@class,’item–lowest’)]//a[contains(@class,’summary__date’)]”)
- Hovering with the mouse over the returned result will highlight the page element that the XPATH refers to.
- Details about locating elements with Selenium WebDriver can be found in our previous blog post.
That is it. You will see in the console what the XPath returns.
Find best screenshot comparison tools
[/emaillocker]
LoadFocus is an all-in-one Cloud Testing Platform for Websites and APIs for Load Testing, Apache JMeter Load Testing, Page Speed Monitoring and API Monitoring!
Frequently Asked Questions
How do I test an XPath in Chrome without a plugin?
Open DevTools, go to the Console and evaluate $x(“your-xpath”). It returns the matching nodes, and hovering over a result highlights the element on the page, so you can see immediately whether the locator points where you think it does.
Should I use the XPath that Chrome copies for me?
Rarely as is. Copy as XPath produces a position based path such as a chain of div indexes, which breaks as soon as anyone inserts an element. Rewrite it around an id or a stable attribute before it goes into a test.
What if the element has no stable attribute?
Adding one to the application is usually cheaper than maintaining a brittle locator. A single data-testid costs the developer a minute and saves the test from every future layout change.