Element Location and XPath

Tags

Automation, Element Location, Java, XPath

Every element on a webpage is part of HTML DOM and there are various ways to locate them, viz.  by Id, Name, XPath, CSS etc.

In Simple terms XPath is the address of the element on a webpage.

XPaths can be absolute or partial.

Absolute XPaths show the element location from the html tag itself. It will look like

html/body/div[1]/div[1]/div/div/div/div/div/div[2]/form/table/tbody/tr[2]/td[1]/input

It’s not a good idea to use absolute xpath as its not easy to maintain.

Partial XPath: It starts with // (which means it is somewhere in the HTML DOM)  and follows this format:

//tag[@attr=’value’]

For e.g., for an inpur field with id of “username”, th XPATH can be

//*input[@id=’username’]

If the element does not have an ‘id’ like the anchor tag, then xpath starts from the parent tag which has got an id.

For e.g. Consider the HTML code for the “forgot your password” link on facebook page.

The form tag has got id of ‘login_form’ , hence xpath starts from there as a reference point. Then table tag under it followed by tbody followed by the third tr tag (represented as tr[3] ) and so on.

Xpath for this:

//*[@id=’login_form’]/table/tbody/tr[3]/td[2]/a

where star represents any element from the root.

Another way to write an xpath without using * is by entering the component type and its tag with value.

For below element:

//input[@id= ‘searchInput’]

When the element has a text value like:

<span id=”blahblah”>Action</span>, xpath would be

//span[text()=’Action’]

Concatenating two tags to identify an element.

When you need to use two properties, use ‘and’ keyword.

For the above element, xpath would be:

//input[@id = ‘searchInput’ and @name =’search’]

Customizing XPaths

Firebug generates xpath based on id only. If some element/or its parent does not have id, Firebug will not generate an X-Path from the root of the page. In that case, you can manually create/ customize X-Path.

Consider the HTML :

The customised xpath from li tag and class attribute will be:

//*[@class = ‘rui-nav-tab rent ‘]/a/span
Testing your XPath

You might want to test the locator before using it in your script. You can do so by using $x in chrome and FF.

Just type your xpath in ConSole with $x in brackets and quotes like this:

If the xpath is: //input[@id =  ‘searchInput’ and @name = ‘search’]  , then

$x (“//input[@id =  ‘searchInput’ and @name = ‘search’]”)

and Run. It will point to the element on the screen.

starts-with

For pages where ids are dynamic like shopping sites, the ids might be dynamic. For e.g. they always start with a sequence of alphabets and end with a different series of number.

X-Path for such elements is customised as :

//img [starts-with(@id,’b’)]

(This is for ebay where there are multiple images for a search and lot of them have their id start with ‘b’. The above xpath when run with $x identifies multiple elements. Not a very good example for dynamic xpaths but proves the point!)

substring

For an input field with attribute name with a value of search (name=”search”), you can create a xpath to search by substring starting at a specific position like this:

//input [substring(@name,3)= ‘arch’]

Note that you have to enter all characters from the third characters.

Contains

If you wish to locate an element containing particular text:

//input [contains(@name,  ‘rch’)]

Above xpath will locate element which has got rch in the value of name attribute.

xpath axis is used to navigate back in the DOM.

To find siblings (by tag) of the element

//select [contains(@id,  ‘searchLanguage’)]/following-sibling::input

This will find the input type sibling of a drop down which has got id of ‘searchLanguage’

If there are multiple ‘input’ type siblings, it will list all.

If you need to see a particular sibling, say 2nd input ,

//select [contains(@id,  ‘searchLanguage’)]/following-sibling::input[2]

To find Parent of an element:

//input[@name = ‘go’]/parent::fieldset

This will find the fieldset type parent of input box with name ‘go’

You can use /.. as well to find parent element like

//input[@name = ‘go’]/..

To find parent of parent:

//input[@name = ‘go’]/../..