Mastering XPath and CSS Selector for Selenium

By using text() method we can find the elements its visible text. If you do not have any proper attributes to find the element, then you can use text() methods to identify the element.

By using contains() method we can find the elements with partial text. If you do not have any proper attributes to find the element, then you can use contains() methods to identify the element.

This video will explain how to use starts-with method in XPath. It can be used when starting text of the innerHTML is static.

This video will explain how to find the elements with attributes which are having spaces in it. When you use this method, it will ignore the spaces and gives the Xpath to find the element.

• Sometimes we may have to handle the elements with XPath index but the index may give more than one element, which are under different parents. In this situation, index may not help.

• So, we have to use Group Index in these kind of scenarios. Group Index put all matches into a list and gives indexes them. So, here we will NOT have any duplicate matches.

• We have to use parentheses to make an XPath into group xpath after it index the xpath.

This video will explain what is XPath Axes and what is the use of XPath axes when there is no unique attributes to a particular element to find.

This video will explain how to find the parent element with respect to the child element.

This video will explain how to find the child element with respect to its parent element.

Descendant specifies all the children and grandchildren elements XPath

Following specifies all elements that come after the current element which includes elements of other div elements as well.

Following-sibling specifies the following siblings of the current element. Siblings are the same level as the current element and share its parent.

Preceding specifies all the elements that come before the current element (i.e. before it's opening tag).

Preceding-Sibling specifies the preceding siblings of the current element. Siblings are the same level as the current element and share its parent.

•     CSS Selector is a combination of an element attribute and attribute value which identifies the web element with in a web page.

•     The composite of an element attribute and attribute value is known as Selector Pattern.

• It is the Direct way of finding the element.

• Absolute CSS Selector starts with the root/context node (i.e. html) as html is the starting tag of any web application.

• Writing Absolute CSS Selector is very easy.

• Apart from the advantages, there are few disadvantages also.

• You can not recollect or remember for which element you have written this CSS Selector.

This CSS Selector may break once an extra element is added in between or an element is removed in between.

• Finding elements with their own attributes.

• Chances of failing is very very less.

• Will find by taking an element's attributes like:

• Id

• Value

• Class Name

• Placeholder

• Name etc..

• Relative CSS Selector starts with any of the element which we want.

• Relative CSS Selector will not starts with the root node.

• Writing Relative CSS Selector is bit time consuming.

• The chances of failing Relative CSS Selector is very less i.e. the way we construct the CSS Selector.

• It will not be long as Absolute CSS Selector.

This video will explain how to find an element using its ID. If you have an Id to any element it is very easy to find as we need to prefix # symbol to that id. So, it will become css selector.

This video will explain how to find an element using its Class. If you have unique Class to any element it is very easy to find as we need to prefix .(dot) symbol to that class. So, it will become css selector.

This video will explain how to use multiple classes to find an element. Some times single class may not suffice to find an element uniquely. So, we can use multiple classes to find that element uniquely.

This video will explain how to find an element using class and any one of the element attributes. Some times single property may not suffice to find an element uniquely. So, we can using multiple properties combinations  to find the element uniquely.

This video will explain how to find child elements. Some times elements may not contain any attributes then we can depends on its parent locators to find the child elements uniquely.

This video will explain how to find descendant elements. Some times elements may not contain proper attributes to find them uniquely. Then we can depends its grand parents to find those elements.

This video will explain what is the difference between nth-child method nth-of-type method in CSS Selector.

This video will explain how to find child elements using nth-child method in CSS Selector.

This video will explain how to find child elements using nth-of-type method in CSS Selector.

This video will explain how to find the first child element easily. As to find the first element no need to use nth-child method.

This video will explain how to find the last child element easily. As to find the last element no need to use nth-child method.

This video will explain how to use ^(caret) symbol to find the elements in CSS Selector. When any attribute value's end part is dynamic then we can use the starting point static value to find that element uniquely.

This video will explain how to use $(dollor) symbol to find the elements in CSS Selector. When any attribute value's staring part is dynamic then we can use the ending point static value to find that element uniquely.

This video will explain how to use *(star) symbol to find the elements in CSS Selector. When an element attribute's partial value is unique then we can use star symbol to find that element uniquely.

This video will explain how to find the immediate sibling of any particular element. For this we need to use +(plus) symbol to find the next sibling uniquely.

This video will explain how to find the following sibling of any particular element. For this we need to use ~(tilde) symbol to find the following sibling uniquely.

This video will explain how to ignore case sensitivity of any element attribute value.If the element attribute value is in capital letters, small letters or camel case, but if you want to ignore these thing you need to use i symbol in the css selector.

XPath:

1.  It is slower than CSS Selector.
2. XPath engines are different for each browser. So, may fail.
3. XPath can traverse in both directions(i.e. Forward and Reverse).
4. Can find the elements with the text.
5. Can not find element with suffix (i.e. ends-with)

CSS Selector:

1. It is faster than XPath.
2. This is same across all browsers.
3. CSS can traverse only single direction (i.e. Forward).
4. Can not find the elements with the text.
5. Can find the element with suffix (i.e. ends-with using $ symbol)

Absolute XPath:

1. It starts with root element (i.e. html).
2. Writing/Constructing is very easy.
3. It identifies the element very fast.
4. Chances of failing is very high.
5. It will be very long (depends on the element location).
6. Can not identify/remember for which element we have written.
7. It starts with single forward slash (i.e. /)

Relative XPath

1. It will not starts with root element.
2. Writing/Constructing is bit time consuming.
3. It is not that fast.
4. Chances of failing is very low.
5. It is not that long.
6. Some what we can identify/remember for which element we have written.
7. It starts with double forward slash (i.e. //)