Element Identification Techniques - XPath and CSS for absolute begginers

-

Element Location Strategies using XPath, CSS & DOM

Automating any application requires identification of the element & interact with it

Locator are used for identifying the elements on the web page uniquely.

There are so many ways to identify the elements in Selenium and those are called locators.

Some of the most used and popular locators are XPath & CSS

What is XPath? How do we use XPath in Elements identification?

XPath (XML Path Language),  is a query language for selecting nodes from an XML document. The XPath language is based on a tree representation of the XML document, and provides the ability to navigate around the tree, selecting nodes by a variety of criteria.

XML contain one or more elements/tags/nodes
An element may contain content/data or may contain other elements as child nodes.
Each element should have starting tag and ending tag. The element content will reside in between these two tags.
Apart from the content each tag  may have attributes. These attributes will give extra information about the element.

Problem with XPath:

Due to lack of XPath engine in IE, element identified will not work with XPath, even we will not be able to cross check it in Developer tools. Hence we use CSS, which is supported with all the browsers.

Elements identification can be done using XPath in Selenium Web Driver using 2 ways:

1. Absolute XPath(starts with single forward slash(/))
2. Relative XPath(starts with single forward slash(//))

cons of Absolute XPath:
XPath may be broken once an extra element is added in between or an element is removed in between.

Relative XPath:

Relative XPath will not starts with the root node.
The chances of failing Relative XPath is very less. It depends on the way we construct the XPath.
It will be as short unlike absolute XPath.

Below techniques are used in identifying the Elements uniquely using Relative XPath:

1. Single Attribute
2. Multiple Attributes
3. Contains
4. Starts-With
5. Text
6. Ancestor
7. Preceding
8. Descendant
9. Following

1. Single Attribute:

//tagName[@attribute=’attributValue’]

//*[@attribute=’attributValue’]  -->Any element whose attribute matches the criteria

2. Multiple Attributes:

AND operation used with different attributes

//tagname[@attribute1=’attribute1Value  and @attribute2 = ‘attribute2Value’]

or operation used with different attributes

//tagname[@attribute1=’attribute1Value][@attribute2 = ‘attribute2Value’]

3. Contains

//tagName[contains(@attribute,’partialAttributeValue/fullAttributeValue’)]
//tagName[contains(text(),’TextValue’)]

4. Starts-With

//tagName[starts-with(@attribute,’partialAttributeValue/fullAttributeValue’)]

5. Text

//TagName[Text()='^value*']

6. Ancestor

//*[@attribute=’attributeValue’]//Ancestor::div

7. Preceding

//*[@attribute=’attributeValue’]//Preceding::div

8. Descendant

//*[@attribute=’attributeValue’]//descendant::div

9. Following

//*[@attribute=’attributeValue’]//Following::div

CSS Selector:

Another widely used, popular and fastest locators is CSS Selector.
To get know better on CSS implementations in web page development, please click on this link
CSS basic syntax: Click here
Click here to learn more on learning to work with CSS selectors

The advantages of CSS over XPath are:

CSS Selector will not change browser to browser as XPath will change.
CSS is native to browsers and XPath is not
XPath engines are different in each browser, hence make them inconsistent

Below techniques are used in identifying the elements uniquely using CSS.

1. TagName
2. Id (#IDValue)
3. ClassName (.ClassName)
4. Attributes (no @symbol -->[attribute=''] )
5. --Contains ( [attribute*=''] )
6. Starts-with ( [attribute^=''] )
7. Ends With ( [attribute$=''] )

8. *

9. element

10. element,element

11. element element

12. element>element

13. element+element

14. element1~element2

15. [attribute]

      [attribute=value]

      [attribute~=value]

      [attribute|=value]

     [attribute^=value]

     [attribute$=value]

      [attribute*=value]

     :last-child

     :nth-child(n)

1. TagName
usage of the tag name individually to locate the element is not a good practise as multiple Elements may have same TagName.

Form
Input

2. Id
In order to use ID as locator we need to use ‘#’ symbol in front of ID.

#IDValue

3. ClassName
In order to use Class Name as locator we need to use dot symbol in front of class name.

.ClassName

4. Attributes

Single Attribute
TagName[attribute = ‘attributeValue’]

Multiple Attributes
tagName[attribute1=’attrValue1’][attribute2=’attrValue2’]

5. Contains
Needed to use ‘*’ symbol to identify the element.

tagName[attribute*=’partialAttributeValue’]

6. Starts-with
Needed to use ‘^’ symbol to identify the element.

tagName[attribute^=’AttributeStartValue’]

7. Ends With
Needed to use ‘$' symbol to identify the element.

tagName[attribute$=’attributeEndingValue’]

How to verify the created XPath/CSS is correct?

1.Press F12 to open up Chrome DevTools.
2.Elements panel should be opened by default.
3.Press Ctrl + F to enable DOM searching in the panel.
4.Type in XPath or CSS selectors to evaluate.

If there are matched elements, they will be highlighted in DOM.

To view the demo of the same, please click here

Click on the link to learn, Element identification using DOM & JavaScriptExecutorExecute an action using JavaScriptExecutor

 Example usage is described below on Gmail login page 

Various ways to identify a web element using CSS are as follows:

.class

.whsOnd.zHQkBf

TagName.className

input.whsOnd.zHQkBf

TagName[attribute='value']

input[class='whsOnd zHQkBf']

#id

#identifierId

TagName#id

input#identifierId

TagName#id.className

input#identifierId.whsOnd.zHQkBf

The suggested one may not be unique always, hence we need to know how to manually write the CSS identifier

Comments

Post a Comment

Popular posts from this blog

QA's approach 2 Java - Understanding Static context

-
Image
            Static Members Flow Class members In java application we are defining objects for communication.Every Object is represented as a model(class). Hence, java application is the combination of classes. And every class in java application is allowed to define following members. 1) static members 2) non-static members Static members flow using JVM architecture : Java class supports definition of 4 static members. 1) static main method 2) static block 3) static variable 4) static method Static main method Example class Demo { //empty..... } How to Compile & Execute a simple Java program? 1) Save the program in "d-drive" with name Demo.java 2) Open command prompt, navigate to the path where the java program is stored 3) Compilation: cmd/> javac Demo.java Demo.class file will be generated. 4) Execution:  cmd/>java Demo Error : main method not found... main method : 1) It is static method, hence...
Read more

Selenium 4 absolute beginners - How to create Batch execution file

-
Sample Batch Execution file @echo off :: Delete the existing log file ERASE C:\Softwares\Workspace\ProductNameAutomation\build.log :: Create a new Empty log file  echo.>C:\Softwares\Workspace\ProductNameAutomation\build.log :: Setting project Home Path SET PROJECT_HOME=C:\Softwares\Workspace\ProductNameAutomation cd %PROJECT_HOME% echo CURRENTLY WORKING ON DIRECTORY %PROJECT_HOME% PATH echo Setting configurations SET M2_HOME=C:\Softwares\Workspace\apache-maven-3.5.4 SET M2=%M2_Home%\bin SET path=%M2_Home%\bin ::SET Java_Home="C:\Program Files (x86)\Java\jdk1.8.0_181" ::Start the test case echo test execution in progress call mvn -f C:\Softwares\Workspace\ProductNameAutomation\pom.xml clean install compile test -X -l C:\Softwares\Workspace\ProductNameAutomation\build.log echo test execution in completed :: Generating report based on above ran test cases echo Report generation is in progress call mvn surefire-report:rep...
Read more

Technologies - Log4J - Create Log4j Configuration File - Where ? How ? What ?

-
  Typical Steps involved in Creating Log4j Configuration file Configure the root logger - What to Log - info/debug/error/fatal messages Configure individual loggers (if needed). Specify appenders -- Where to Log -- in File/Console, etc Specify message layout/Pattern -- How to Log - format to log the message Configuring a Layout PatternLayout lets you determine how data is extracted from log events and formatted for output based on a conversion pattern. Conversion patterns act as placeholders for data that appears in each log event.  For example, let’s break down a PatternLayout commonly used in Log4j: <PatternLayout pattern="%d{HH:mm:ss.SSS} [%t] %-5level %logger{36} - %msg%n"/> %d{HH:mm:ss.SSS} formats the date in terms of hours, minutes, seconds, and milliseconds. %t displays the Logger’s current thread. %level displays the severity of the log event. %logger displays the name of the Logger. %m displays the event’s message. Finally, %n adds a new line for the next e...
Read more