DEV Community: Masihur Rahman Maruf

Locator Strategy: CSS Selector

Masihur Rahman Maruf — Thu, 10 Oct 2019 13:14:41 +0000

Preface:

In my previous blog I discussed about XPath. In this blog I will try to focus on some most important concepts in CSS Selector. I will strongly recommend to read the Locator Strategy: XPath before reading this blog.

CSS Selector should be preferred when we don’t have any suitable Id or name. Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. For more information visit W3C Recommendations.
Syntax:

Direct Child:

In CSS, “>” is used to define the direct child relationship between the elements. For example:

html>body

Body tag is the direct child of html tag.

Descendent(sub-child):

If an element is the any child or grand child of the current element, but not a direct child in CSS it is defined by whitespace.

div img

That means, img tag is a descendant of div tag, but not a direct child.

Finding Element using Id and Class attributes:

For Id attribute in an element CSS has a special symbol “#”. Unlike XPath you can find element directly using Id.

#products

This will find the element that has id ‘products’.

Like Id you can identify element using class name. For that you need to use “.”.

.setter

You can use above selector to find element that has class name setter.

Finding elements using other attributes:

CSS support finding elements using attribute other then Id and class. Have a look on the following example:

img[title='English']

Finding an image element using attribute title.

Finding elements using multiple attributes:

You can find element using multiple attributes.

img[title='English'][alt='United States']

Use of Wildcards:

CSS supports use of wildcard characters like “^”, “$” and “*”.

You can use “^” with attribute name to simulate ‘starts-with’. Let’s see an example:

img[title^='En']

This will find any image tag that has an attribute named ‘title’ with value starts with ‘En’.

Let’s see the use of “$”.

img[title$='sh']

It simulates ‘ends-with’. Will find an image tag that ends with value ‘sh’.

“*” is used to find any specific pattern in the value of attributes.

img[id*='n_U']

Here it will search for image tag with a pattern ‘n_U’.

Conclusion:

In this blog, I focused on the basic usage of CSS Selectors. Next time I will explain some of the advanced topics of CSS Selectors. Till then practice…

Locator Strategy: XPath

Masihur Rahman Maruf — Thu, 10 Oct 2019 13:09:23 +0000

Preface:

One of the most challenging task in automating Web application using Selenium WebDriver is finding Web element. Selenium WebDriver supports a number of locator strategies-

Id
CSS
XPATH
Class Name
Name
Tag Name
Links Text
Partial Links Text

Among all the locator strategies Id is the best locator, as a standard, Id is unique in a web page. But in real life nothing is perfect. In real life scenario you will hardly get Id in every element. Here comes the need for the rest of the locator strategies.

Keeping this in mind I am going to write a series of blogs regarding locator strategies. In this blog I will try to focus on XPath Basics.

XPath:

XPath, the XML path language, is a query language for selecting nodes from an XML document. The XPath language is based on a tree representation(hierarchical) of the XML document, and provides the ability to navigate around the tree, selecting nodes by a variety of criteria. XPath has been adopted by a number of XML processing libraries and tools, many of which also offer CSS Selectors, another W3C standard, as a simpler alternative to XPath.

Locating elements with XPath works very well with a lot of flexibility. However, this is the least preferable locator strategy due its slow performance. One of the important differences between XPath and CSS is, with XPath we can search elements backward or forward in the DOM hierarchy while CSS works only in a forward direction. This means that with XPath we can locate a parent element using a child element. Remember XPath is a case sensitive language.

All the major browsers support XPath as HTML pages are represented as XHTML documents in DOM and used by Selenium WebDriver for locating elements. There are a number of tools you can use to find out XPath. For Firefox browser Firebug and XPath Checker Add-on and for Chrome XPath Helper and Toggle XPather.
XPath Expression:

XPath expression generally defines a pattern in order to select a set of nodes. XPath uses path expression to select nodes or list of nodes from an XML/html document. This path can be of two type:

Absolute Path
Relative Path

Absolute path means to specify every single node to select a node inside a hierarchical document. It always starts from root node. Here is an example:

/html/body/div[2]/div/div[4]/div/ul/li[3]/a/span

It is relatively faster then Relative path. But the XPath expression may be very lengthy. More over each of those nested relationships will need to be present 100% of the time, or the locator will not work. For these reasons use of Relative XPath expressions are encouraged.

In Relative XPath expression you can start from the node of your choice. The above absolute path can be written in the following relative path:

//div[@id='navigation']/ul/li[3]/a/span

In this blog, my prime focus will be to demonstrate the Relative XPath.
Expression: “/” & “//”
You may notice from above two example that I sometime used “/” and sometimes “//”. This is a very important point to understand. A single slash ‘/’ anywhere in XPath signifies to look for the element immediately inside its parent element. A double slash ‘//’ signifies to look for any child or any grand-child (descendant) element inside the parent element. In the following two example it will be more clear.

.//div[@id='products']/a/img

Look carefully in the above example, here I am trying to find an image tag from html document, which is the child of tag ‘a’. And tag a is the child of div tag. The same image tag can be found by:

.//div[@id='products']//img

Here I am trying to find an image tag which is the descendant of tag div.

Expression: “.” & “..”

You may have noticed that in every example I have used “.”. This is used to specify current node in XPath.
“..” is used to move one step up in the document tree, that is it will find the parent of current node. An example will make it more clear:

.//div[@id='products']/..

This expression will find the parent node of the current node.

Expression: “@”

“@” is used to select attribute in the document tree.
In the above example I specify attribute id with “@” and the value products inside ‘ ’.

Expression: “*”

XPath support wildcard like “*”. Sometimes it is of much use to find a Relative path. Let’s see an example:

.//*[text()='Home']

This wildcard can be used in place of attribute too.

.//a[@*='Home']

In this case I am trying to find an element which has an attribute with value ‘home’. In this case I don’t care about the attribute name. You will not use it very often. But its good keep it as an option.
Here in this section I am going to illustrate to most handy trick of XPath. Most of the times you will face issues when the locator’s properties are dynamically generated. And now a days petty much all the web application follows this strategy. Here comes the real challenge to deal with all the issue. Following section will give you concept about how to deal with such situations.

Read the following section carefully and try to understand and implement these tricks.

Expression using keyword “contains”:

“contains()” is a function that take two arguments, attribute name and attribute value. Let’s see an example:

.//div[contains(@id, 'search')]

Here I am finding a div tag which contains an attribute named ‘id’, in which the value contains ‘search’. It doesn’t need to be exactly the ‘search’ but the pattern needs to match. Function ‘contains()’ match attribute name with value by matching pattern.
Here is another use of function ‘contains()’:

.//span[contains(text(), 'Hot')]

This expression finds a span tag which contains ‘Hot’ as text in it.
Expression using keyword “text()”:
In previous example you saw, I used function ‘text()’. Let’s have a deeper look into function ‘text()’. It will find out a specific tag which has specific text in it. Here is an example:

.//span[text()= 'Home']

As I said this expression will find a span tag with text ‘Home’.

Expression using keyword “starts-with()”:

Like function ‘contains()’, ‘starts-with()’ also take two arguments, attribute name and attribute value. Let’s look it in an example:

.//div[starts-with(@class, 'width')]

Here I am trying to find a div tag where there is an attribute ‘class’ that starts with pattern ‘width’. This function also find element by matching pattern.
Another example:

.//span[starts-with(text(), 'Gift')]

As you saw earlier in ‘contains()’ function I used ‘text()’ function to find text inside that tag. That can be also done with function ‘starts-with()’ .

Conclusion:

In this blog, I focused on a number of the tricks and techniques that you will use daily as a Test Automation Engineer. There is no end of learning. You can learn more about XPath. Next time I will try to focus on some advance topic in XPath. Till then Practice…