In the Previous Tutorial, we learned the following –
- Introduction to the mighty XPath to locate elements on the page.
- Writing XPath query that starts searching the XML from root node by using single forward-slash ‘/’.
- Using double forward-slash ‘//’ at the start of the XPath query so that it could search the matching element anywhere in the XML.
- Look for immediate child element by using single forward-slash ‘/’.
- Jump to any of the matching child elements, grandchild or so on, by using double forward-slash ‘//’.
In this tutorial, we’ll learn different XPath functions.
Writing full attribute value in XPath
Let us learn by going through some other example.
- Let us launch Google Chrome and navigate to http://www.imdb.com/
- How about inspecting image IMDbPro?
Following is the source code snippet that Chrome developer tools would have displayed:
<img src="http://i.media-imdb.com/images/SF4a741137cf9a260e127fef64455ebfbc/navbar/imdbpro_logo_nb.png"
alt="IMDbPro Menu" style="background-color: transparent;">
</img>As we can see the element has img tag that has the following attributes – src, alt, style.
If we use src attribute this is how our XPath query would look like:
//img[@src='http://i.media-imdb.com/images/SF4a741137cf9a260e127fef64455ebfbc/navbar/imdbpro_logo_nb.png']
Hey, Isn’t the XPath query looking so long?
Yes, that is one of the reasons for constructing a partial XPath query. Also as the ‘src’ attribute contains a URL in its value, there are chances that it may change in later releases.
XPath Functions
Suppose we opened the login page of a website xyz.com. Its Login button’s id attribute has the value of 987submit123. We refresh the page and the id attribute’s value changes to 321submit987 and so on.
In other words, a part of the attribute’s value is static while the rest is dynamic.
In these scenarios, we would go for a partial XPath query.
contains()
Let us try to construct such an XPath query to locate the ‘IMDbPro’ object shown in the above steps. Here is the source code snippet of that element –
<img src="http://i.media-imdb.com/images/SF4a741137cf9a260e127fef64455ebfbc/navbar/imdbpro_logo_nb.png" alt="IMDbPro Menu" style="background-color: transparent;"> </img>
We can use XPath’s contains() function so that we can pass a part of the value for the src attribute:
//img[contains(@src,'imdbpro')]This XPath would query for the img tag element ANYWHERE (//) in the document, that has src attribute. And yes, it doesn’t care what its exact value is. It just makes sure that the value contains imdbpro. Here contains() is an XPath function that checks if the attribute CONTAINS the value.
starts-with()
Let us try to locate the same element but by using a different XPath function – starts-with():
//img[starts-with(@alt,’IMDbPro’)]This xpath query is hunting for img tag element ANYWHERE in the document, that has an alt property. It will only identify that object if its alt property value STARTS WITH IMDbPro.
text()
Let me show me a way to locate an element using its displayed text.
Let us Inspect the text ‘Opening This Week’ in the same IMDB page
This is how the source code snippet should look like:
<h3 style="background-color: transparent;">
Opening This Week
</h3>We can use XPath function text() to construct a query:along with using ‘*’. Try this XPath –
//h3[text()=’Opening This Week’]Wildcard (*)
If we do not know the tag or we suspect the tag is dynamic we can use wildcard character *. The above xpath can also be written like this:
//*[text()=’Opening This Week’]It is saying – Hey catch ANY(*) element anywhere in the document. It must be displaying the following text – ‘Opening This Week’. Note that * says that the tag name can be ANYTHING it does not care. We use ‘*’ when we suspect the tag name can change or we don’t know the tag name.
Using two XPath functions ‘contains()’ and ‘text()’ together
//h3[contains(text(),’This Week’)] This XPath query is looking for and h3 tag element anywhere in the document that CONTAINS following TEXT – This Week
Did you miss using @ before text().
We did not use @ after [. In all previous XPaths, we have used @ at this position. This is because we use ‘@’ before properties(or attributes) – like id, class, name, alt, src. text() is a XPath function. It is not object property. If you look closely at the source code you would not find text(), like you find id, class, name etc.
Indexing in XPath
What if the page has five elements with identical properties and we need to locate the second one?
I explained it in the previous XPath Basics tutorial with this example –
//table/tbody/tr/td[2]/div/input[@id='gbqfq']It is called XPath indexing. The index starts with 1. So td[2] will match the second td element.
Summary
In this tutorial, we learned to construct Partial XPath to locate Objects. We also learned following XPath functions – contains(), starts-with() and text(). We used * in place of tag name where we were not sure about the exact tag name. We revisited XPath indexing.
Assignments
- Assignment#1 – Construct Partial XPath (use function ‘starts-with()’ for ‘class’ attribute) to locate IMDb logo. Try highlighting using Selenium IDE.
- Assignment#2 – It is not actually one assignment. LOL. Go to the footer of the page and try to construct XPaths to locate ALL links. You can use any method of your choice. Try highlighting using Selenium IDE.
Post your magical XPaths in comments. I would request you not to post your XPath as a working solution until you tried on Selenium IDE and it highlighted the target Object. Otherwise, it will confuse others.
If you have any issues constructing XPath for assignments or any other objects, please feel free to ask for help. But make sure to post what all combinations you have tried.
In the Next Tutorial, we will explore one more method of locating elements, i.e the magical CSS locators.