Locating web elements using XPath

XPath can be used to locate web elements on a web site. We should construct unique XPaths, meaning only one element can be found on the page using the XPath we have constructed. In Firefox and Chrome, we can right click on the element on the screen and select “Inspect Element”. This will open the browser’s developer tools window on the Inspector-tab. There we can see the HTML of the page, with the part corresponding to the element as highlighted. We can construct a unique XPath based on that snippet.

If the website has unique ids for the web elements, they are often a good choise for constructing the XPath. For example, consider the following element:

<button id="loginButton" class="LoginDropdownButton">Login</button>

We could construct the XPath using id, class and/or text. If the id seems to be unique, it would be a good choise. But sometimes elements do not have ids defined, or they are dynamic, in which case other attributes or a mixture of them can be used.

XPath Examples

Basic XPath syntax to find an element of type input with id lastName:

//input[@id=”lastName”]

Numeric selector : If several web elements corresponding to the criteria are found on the page, you can select the first one by adding [1] at the end. Similarly, by adding [2] we would select the second one, and so on.

(//input[@id=”lastName”])[1]

Following sibling : Select the following sibling of type div of an element of type div containing the text First name:

//div[contains(text(), “First name”)]/following-sibling::div

Contains text : find element of type a which contains text my name in its text part:

//a[contains(text(), “my name”)]

Contains – several search criteria : find an element of type a which has href which contains myLink and text which contains my name:

//a[contains(@href, “myLink”)][contains(text(), “my name”)]

Any type and partial id : find element of any type (*) whose id contains thisId:

//*[contains(@id, “thisId”)]

Trying out an XPath on the browser

Before using the xpath in our code, we can try it out on the browser. In Firefox and Chrome, this can be done by typing F12 and selecting the Console-tab. Then we can try the path with the following syntax:

$x(‘path’)

After clicking Enter, we should get an array as a response. We want to find the element on the page exactly once, which means we should have an array with one element. We can hover on the array, and the element will be highlighted on the page. If the array has no elements, it means something went wrong with the XPath, as no corresponding elements are found. If the array has several elements, we can try to add more details to the description. If that is not possible, we can use the numeric selector as described above.

Defining locators

We can use XPath to define locators in Selenium page objects:

public static final String LAST_NAME = "//input[@id=\"lastName\"]";

Leave a Reply

Your email address will not be published. Required fields are marked *