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:

    1. Open the URL / web page in the Chrome browser
    2. 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

  1. Click on the Console tab in the Web developer tools
  2. Paste in the console the XPath from your test in the following format:
  3. $x(“//div[contains(@class,’item–lowest’)]//a[contains(@class,’summary__date’)]”)
  4. Hovering with the mouse over the returned result will highlight the page element that the XPATH refers to.
  5. 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

How Much Traffic Can Your Website Handle?