In my previous post, I have explained what other ways we have to identify a web element in selenium except XPATH and CSS Selectors.
In above line I was referring to the below post.
https://stapleautomationsolutions.blogspot.com/2020/01/how-to-identify-element-in-selenium_9.html
In Automation, Identification of an object is an essential thing and without this automation is not possible. When you open any web page and you see whatever displayed on that page we call that Web Element or Object. For each web element or object there are some properties and methods are associated with it.
For Example: Write the below code in notepad and save it with .html extension. After saving the file open the same in any browser like Chrome or IE.
<Html>
<Head>
<Title>Welcome to StapleAutomationSolutions.com"</Title>
</Head>
<Body>
Enter User Name <Input type="text" name="t1"><Br>
Enter Password<Input type="text" name="t2"><Br>
<Input type="button" name="b1" value="click">
</Body>
</Html>
Output of the above code in browser is below:
Now, I explain the above html code, I have created 2 Web Edit boxes like text boxes using <Input> tag. These 2 text boxes have some attributes (attributes means properties of that object) like "type" and "name" and their values. So, when you use Xpath to identify any web element using their attribute or property to identify it then we put @ symbol before the attribute or property name like @type or @name to uniquely identify an object.
There are 2 types of Xpath syntax available:
1. Absolute XPath
This is the way to locate an element or object directly, but the drawback of the absolute XPath is that if there are any changes made in the path of the element then that XPath will get fail. Absolute XPath begins with the single forward slash(/) ,which means you can select the element from the root node.
Below is the Absolute XPath for Search text box on Google.com.
/html/body/div/div[4]/form/div[2]/div[1]/div[1]/div/div[2]/input
2. Relative XPath
//input[@type='text']
or
//*[@type='text']
When I use the above Xpath to inspect that element in chrome browser then it shows 2 matching elements found as per the description of the object given in the above XPath syntax. Look at the below snapshot.
The reason is that the value of 'type' attribute is same for both the input boxes i.e. type="text". So, now we have look for some unique attribute or property so that we can identify that object uniquely. Now I use the below Xpath and the problem will get resolved as it will identify only one object now. See the below snapshot.
//*[@name="t1"]
You can also use multiple attributes while using XPath using logical operators like "or" & "and"
//*[@name='t1' or @type='text']
if you use the above XPath syntax then also it will identify both the objects as we are using logical "or" operator. The reason is that for both the input boxes have same value defined for type attribute i.e. "text". See the below snapshot.
To avoid such issues in this present scenario we should use logical "and" operator to uniquely identify an object. Look at the syntax and snapshot.
//*[@name='t1' and @type='text']
But Sometimes you will come across a situation where no attributes or properties provided for an object then how will you identify an object. Look at the below HTML Code where I have removed the attributes for the input tag.
<Html>
<Head>
<Title>Welcome to StapleAutomationSolutions.com"</Title>
</Head>
<Body>
<lable> Enter User Name </lable><Input><Br>
<label>Enter Password</label><Input><Br>
<Input type="button" name="b1" value="click">
</Body>
</Html>
So, in this case we will use some methods and XPath Axes to achieve the objective of object identification.
Contains()- This method we can use in Xpath syntax when any dynamic changes are there in the attribute value or no attribute value given like below where I am going to give the reference of neighboring element to identify an object. In this Contains() method i am giving the Partial Label name i.e. "User" instead of "Enter User Name".
//*[contains(text(),'User')]//following::input[1]
Text()- If I use this text() method in XPath expression then I have to use the complete label name or text instead of Partial Label name or text like in case of Contain() method.
//*[text()=' Enter User Name ']//following::input[1]
Starts-With()- When there is a scenario that the first few characters are same and rest all are dynamic(means changes at run time) for an attribute value. So, we can use Starts-with() method in XPath syntax like below.
//*[starts-with(text(),' Enter')]//following::input[1]
The Xpath Axes are as follows:
Please comment if you have any doubt or issues while doing the same.
Best of Luck!
In above line I was referring to the below post.
https://stapleautomationsolutions.blogspot.com/2020/01/how-to-identify-element-in-selenium_9.html
In Automation, Identification of an object is an essential thing and without this automation is not possible. When you open any web page and you see whatever displayed on that page we call that Web Element or Object. For each web element or object there are some properties and methods are associated with it.
For Example: Write the below code in notepad and save it with .html extension. After saving the file open the same in any browser like Chrome or IE.
<Html>
<Head>
<Title>Welcome to StapleAutomationSolutions.com"</Title>
</Head>
<Body>
Enter User Name <Input type="text" name="t1"><Br>
Enter Password<Input type="text" name="t2"><Br>
<Input type="button" name="b1" value="click">
</Body>
</Html>
Output of the above code in browser is below:
Now, I explain the above html code, I have created 2 Web Edit boxes like text boxes using <Input> tag. These 2 text boxes have some attributes (attributes means properties of that object) like "type" and "name" and their values. So, when you use Xpath to identify any web element using their attribute or property to identify it then we put @ symbol before the attribute or property name like @type or @name to uniquely identify an object.
There are 2 types of Xpath syntax available:
1. Absolute XPath
This is the way to locate an element or object directly, but the drawback of the absolute XPath is that if there are any changes made in the path of the element then that XPath will get fail. Absolute XPath begins with the single forward slash(/) ,which means you can select the element from the root node.
Below is the Absolute XPath for Search text box on Google.com.
/html/body/div/div[4]/form/div[2]/div[1]/div[1]/div/div[2]/input
2. Relative XPath
//input[@type='text']
or
//*[@type='text']
When I use the above Xpath to inspect that element in chrome browser then it shows 2 matching elements found as per the description of the object given in the above XPath syntax. Look at the below snapshot.
The reason is that the value of 'type' attribute is same for both the input boxes i.e. type="text". So, now we have look for some unique attribute or property so that we can identify that object uniquely. Now I use the below Xpath and the problem will get resolved as it will identify only one object now. See the below snapshot.
//*[@name="t1"]
You can also use multiple attributes while using XPath using logical operators like "or" & "and"
//*[@name='t1' or @type='text']
if you use the above XPath syntax then also it will identify both the objects as we are using logical "or" operator. The reason is that for both the input boxes have same value defined for type attribute i.e. "text". See the below snapshot.
To avoid such issues in this present scenario we should use logical "and" operator to uniquely identify an object. Look at the syntax and snapshot.
//*[@name='t1' and @type='text']
But Sometimes you will come across a situation where no attributes or properties provided for an object then how will you identify an object. Look at the below HTML Code where I have removed the attributes for the input tag.
<Html>
<Head>
<Title>Welcome to StapleAutomationSolutions.com"</Title>
</Head>
<Body>
<lable> Enter User Name </lable><Input><Br>
<label>Enter Password</label><Input><Br>
<Input type="button" name="b1" value="click">
</Body>
</Html>
So, in this case we will use some methods and XPath Axes to achieve the objective of object identification.
Contains()- This method we can use in Xpath syntax when any dynamic changes are there in the attribute value or no attribute value given like below where I am going to give the reference of neighboring element to identify an object. In this Contains() method i am giving the Partial Label name i.e. "User" instead of "Enter User Name".
//*[contains(text(),'User')]//following::input[1]
Text()- If I use this text() method in XPath expression then I have to use the complete label name or text instead of Partial Label name or text like in case of Contain() method.
//*[text()=' Enter User Name ']//following::input[1]
Starts-With()- When there is a scenario that the first few characters are same and rest all are dynamic(means changes at run time) for an attribute value. So, we can use Starts-with() method in XPath syntax like below.
//*[starts-with(text(),' Enter')]//following::input[1]
The Xpath Axes are as follows:
ancestor
|
Selects all ancestors
(parent, grandparent, etc.) of the current node
|
ancestor-or-self
|
Selects all ancestors
(parent, grandparent, etc.) of the current node and the current node itself
|
attribute
|
Selects all attributes of
the current node
|
child
|
Selects all children of
the current node
|
descendant
|
Selects all descendants
(children, grandchildren, etc.) of the current node
|
descendant-or-self
|
Selects all descendants
(children, grandchildren, etc.) of the current node and the current node
itself
|
following
|
Selects everything in the
document after the closing tag of the current node
|
following-sibling
|
Selects all siblings
after the current node
|
namespace
|
Selects all namespace
nodes of the current node
|
parent
|
Selects the parent of the
current node
|
preceding
|
Selects all nodes that
appear before the current node in the document, except ancestors, attribute
nodes and namespace nodes
|
preceding-sibling
|
Selects all siblings
before the current node
|
ancestor
|
Selects all ancestors
(parent, grandparent, etc.) of the current node
|
ancestor-or-self
|
Selects all ancestors
(parent, grandparent, etc.) of the current node and the current node itself
|
attribute
|
Selects all attributes of
the current node
|
Please comment if you have any doubt or issues while doing the same.
Best of Luck!
No comments:
Post a Comment