Library

Course: Mastering XPath and CSS Selector for Selenium

Mastering XPath and CSS Selector for Selenium

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
About this Course

This is the only XPath and CSS Selector course which will cover all the information which is needed to find the elements/dynamic elements while automating any web application using Selenium or Appium. The reason behind making this course is, if you know how to construct XPath or CSS Selector then you are 50% success in writing your automation scripts.

I made this course very elaborative to construct your own XPath and CSS Selector to find the elements on the web page.

This course will cover what is XPath, XPath Types, XPath Terminology, XPath Syntax, XPath Operators, XPath Methods, XPath Indexing, XPath Axes, What is CSS Selector, CSS Selector Types, Methods in CSS Selector and Wildcards in CSS Selector etc...

For each and every XPath and CSS Selector, I tried to give appropriate example to demonstrate. So, that it will be very clear to you to understand and implement the same in your work with out any issues.

So, what you are waiting for !!!! please enroll and get the knowledge.

Who this course is for:

  • Beginners with no knowledge on XPath and CSS Selector
  • Manual Testers who wants to step into Automation (i.e. Selenium Webdriver)
  • Selenium testers who lacks in XPath and CSS Seletor knowledge
  • Selenium testers who wants to enhance knowledge in writing XPath and CSS Selector
Basic knowledge
  • Minimum HTML knowledge
  • Minimum Selenium Webdriver knowledge
  • Minimum Testing knowledge
What you will learn
  • Understand what is XPath and CSS Selector
  • What is the use in Selenium Webdriver with XPath and CSS Selector
  • Types of XPath and CSS Selectors
  • Methods available in XPath and CSS Selector
  • Full knowledge on how to contruct XPath and CSS Selector when there is no proper attributes available
  • Difference between CSS Selector and XPath
Curriculum
Number of Lectures: 47
Total Duration: 03:19:27
Introduction
  • Course Introduction  

    This video will explain the intention of this course. And what is the important of mastering the XPath and CSS Selector if you are working with Selenium web driver automation tool.

  • XPath Introduction  

    XPath is a query language that is used for traversing through an XML document. It is used commonly to search particular elements or attributes with matching patterns.

    XPath provides various types of expressions which can be used to inquire relevant information from the XML document.

  • XPath Terminology  

    This video will explain different type of terminology which we will use in XPath. After watching this video will be able to understand the XPath terminology.

  • XPath Syntax  

    This video will explain how to write the XPath. After watching this video will understand the syntax of the XPath and we can construct the XPath accordingly.

  • XPath Operators  

    There are so many operators available in XPath. By using these we can construct effective XPaths according to our requirements.

  • Which Tool to find the XPath?  

    This video will give brief introduction about what are the tools available in to find the XPath in Chrome and Firefox browsers. But as part of this video series we will not use any tools. Will use Chrome developer options to find the XPath.

  • Absolute XPath  
    • It is the Direct way of finding the element.
    • Absolute XPath starts with the root/context node (i.e. html) as html is the starting tag of any web application or with the single forward slash(i.e. / )
    • Writing Absolute XPath is very easy.
    • It identifies the element very fast.
    • Apart from the advantages, there are few disadvantages also.
    • You can not recollect or remember for which element you have written this XPath.
    • This XPath may break once an extra element is added in between or an element is removed in between.


  • Exact XPath  
    • Finding elements with their own attributes.
    • It will start with the double forward slash (i.e. // )
    • Chances of failing is very very less.
    • Will find by taking an element's attributes like:
    • Id
    • Value
    • Class Name
    • Placeholder
    • Name etc...


  • Relative XPath  
    • Relative XPath starts with any of the element which we want.
    • Relative XPath will not starts with the root node.
    • Writing Relative XPath is bit time consuming.
    • The chances of failing Relative XPath is very less i.e. the way we construct the XPath.
    • It will start with the double forward slash (i.e. // )

    It will not be long as Absolute XPath.

XPath Methods
  • Finding Elements with text() method  

    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.

  • Finding Elements with contains() method  

    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.

  • Finding Elements with starts-with() method  

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

  • Finding Elements with position() method  

    Locating element by position can be used for locating an element explicitly when there are many candidate elements matching the given XPath.

  • Finding Elements with normalize-space() method  

    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.

  • Finding Elements with Group Index  
    • 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.
XPath Axes
  • XPath Axes Explained  

    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.

  • Finding Parent Element  

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

  • Finding Child Element  

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

  • Finding Ancestors  

    Ancestor specifies the ancestors of the current element which includes the parents up to the root element (i.e. html)

  • Finding Descendants  

    Descendant specifies all the children and grandchildren elements XPath.

  • Finding Following Element  

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

  • Finding Following-Sibling Element  

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

  • Finding Preceding Element  

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

  • Finding Preceding-Sibling Element  

    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
  • CSS Selector Introduction  
    • 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.
  • Absolute CSS Selector  
    • 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.

  • Exact CSS Selector  
    • 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  
    • 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.
  • Find Element By ID  

    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.

  • Find Element By CLASS  

    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.

  • Find Element By Multiple Classes  

    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.

  • Find Element By Class and Attribute  

    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.

  • Finding Child Elements  

    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.

  • Finding Descendant Elements  

    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.

  • Difference between nth-child() and nth-of-type()  

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

  • nth-child() Method in CSS Selector  

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

  • nth-of-type() Method in CSS Selector  

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

  • Finding First Child Element  

    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.

  • Finding Last Child Element  

    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.

  • Finding Element By Prefix  

    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.

  • Finding Element By Suffix  

    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.

  • Finding Element with Partial Attribute Value  

    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.

  • Finding Immediate Sibling  

    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.

  • Finding Following Sibling  

    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.

  • Finding Elements By Ignoring Case Sensitivity  

    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.

Differences
  • Difference between XPath and 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)


  • Difference between Absolute XPath and Relative XPath  
Reviews (0)