_edited_edited.png)
For automating any web Applications, locating web elements(link for locators in selenium) is first step. We need some unique attributes such as id, name, className etc., to identify the Html elements. Some times we can see Dynamic Web elements, where there are no unique attributes associated with the Web elements and there comes Xpath .
· What is Xpath?
· Basic syntax of Xpath?
· What is DOM?
· · How to locate Web Elements using Xpath?
· What are the different types of xpath & Difference between Absolute xpath and Relative xpath?
· Which xpath is preferred and why?
· What are Xpath Functions in Selenium?
1. What is Xpath?
· Xpath is defined as XML Path.
· It is a syntax for finding any element on the web page Using XML path Expression.
· It is used to find the location or address of any element on a webpage using HTML DOM Structure.
· Xpath can be used to navigate through elements & attributes in DOM.
2.Basic syntax of the XPath :
Xpath= //tagname[@Attribute=’value’]
Example:
driver.findElement(By.xpath[“//input[@id=’email”]);
Here we are using the input tag and id attribute to identify the element using xpath. When you want to check our xpath is right or wrong we can use shortcut key ctrl+f and we can type there as shown in above image, then it will Show the element in yellow color.
3.What is DOM?
DOM is an API Interface provided by browser.
When a web page is loaded, the browser automatically creates a DOM of the page.
Example:
Generally, in UI will be created in HTML code of the webpage , internally the browser automatically creates DOM Structure. Same HTML will be aligned in the form of nodes. Xpath works on DOM.
4.How to locate Web Elements using Xpath?
We learned about basic syntax of xpath, there we used special characters like”//” and ”@” that helps to locate and select the desired element/node. Similarly, xpath uses path expressions to select nodes in an XML document. The most useful path expressions are listed below:
5.What are the different types of xpath?
There are 2 types of xpath:
1.Absolute xpath
2. Relative xpath
· Difference between Absolute xpath and Relative xpath?
Here in the above example, both absolute and relative xpath both specify the same web element but most of the time we prefer Relative xpath.
6. · Which xpath is preferred and why?
We always prefer Relative xpath because in Absolute xpath, when the existing elements are removed or new element introduced or existing element moved to some other place then Absolute Xpath is broken and it may not work.
7· What are Xpath Functions in Selenium?
Sometimes while working in a dynamic web Environment, it becomes challenging to locate a particular web element by using general attributes like id, name, class etc. with Basic xpath may not be efficient, in such case we use Xpath Functions.
Xpath provides different functions in selenium, which helps in locating web element Uniquely
1. Contains()
2. Starts-with()
3. Text()
4. AND & OR Operator
5. Using Index
1.Contains() :
Xpath Contains() is one of the method used while creating an xpath expression. When the value of any attribute changes dynamically, It can locate a web element with the partial text.
Syntax:
//tagname[contains(@attribute,’value’)]
Or
//*[contains(@attribute,’value’)
Example:
//input[@id=’email’] →Basic Xpath
//input[contains(@id,’email’)] →using contains() method
→using contains with different attribute and value locate same web element
//input[contains(@data-testid,’_email’)]
//*[contains(@data-testid,’email’) or
//*[contains(@data-testid,’mail’) or
//*[contains(@data-testid,’royal_e’)]
In the above examples will specify same web element but we will write using partial value of the attribute in different ways.
Here we can use specific tagname or we can use Asterisk (*), tagname specifies only input in this example where as if we use * it specifies any tag with the same value.
//*[contains(@data-testid,’royal’)] →it won’t find the right web element
Here in the above example, when we are taking @data-testid=”royal”
Multiple elements have the same value of “data-testid” attribute then it will select the first value in the page which is not the right web element of email textbox, in the snippet we can see 1 of 4 means there with the same value we are able to find 4 elements. So we always make sure the value of the attribute should be unique.
2. starts-with() :
The Xpath starts-with() method, finds the element which has attribute value starting with the specific character or character sequence. This function is useful while dealing with dynamic web pages.
For example, Imagine an element that has an attribute value that keeps on changing every time when page is loaded or refreshed, in that case dynamic elements have few common starting characters, followed by dynamic texts
Syntax:
//tagname[starts-with(@attribute,’value’)]
Or //*[ starts-with (@attribute,’value’)]
Example:
//input[starts-with (@id,’email’)]
Or
//input[starts-with (@id,’ema’)] — → valid
//input[starts-with (@id,’mail’)] — -> INvalid
Starts-with() as the name says always starts from starting of the value. For this function, we can’t write middle characters, it will be Invalid.
3.text() :
This function uses the text of the web element for locating the element on the web page. It helps to find the exact text elements and it locates the elements within the set of text nodes.
Syntax:
//tagname[text()=’value’)]
Example: //a[text()=’Women’]
or
//*[text()=’Women’] — → valid xpath
//a[text()=’Wom’] — — -> Invalid xpath
In the above example, while using text() Function we should give complete value of the text then its valid when we give partial value of text it becomes invalid.
· Contains() & text():
Here we are using contains() & text() functions together in one xpath.
Syntax: //*[contains(text(),’value’)]
Example: //a[contains(text(),’wom’)]
While using contains() & text() as one xpath, here we can give partial value of the text. Basically, we use this whenever there is long text.
4.AND & OR Operator:
The and Operator is used to combine two or more attributes to identify any element from a webpage using Xpath efficiently. Suppose, If we have two attributes A & B, we can combine both to identify an element uniquely on the webpage.
Example: //*[@name=’email’ and @id=’email’]
//input[@name=’email’ and @id=’email’]
In this example, we are using name and id attribute to locate the element , you can use any attribute required to identify the element uniquely. When Both the conditions(attribute values) are true ,then only it can locate the element.
The or operator is used to locate an element based on any one of the conditions segregated by the or operator. We use it majorly based on certain run-time conditions. If we have two attributes A & B, in this at least one either A or B needs to match then it can identify an element uniquely on the webpage.
Example: //*[@name=’email’ or @id=’email2’]
//input[@name=’email’ or @id=’email2']
In this example, we are using name and id attribute to locate the element , you can use any attribute required to identify the element uniquely. When at least one condition(attribute values either name or id) should be true ,then only it can locate the element.
Here, name attribute is matching the value but id is not matching the attribute value, even though its locating the element.
5.Using Index :
This approach comes in use when you wish to specify a tagname in terms of index value you wish to locate. As well when there are more than one element matching with same xpath by the time we use index to identify element uniquely.
Syntax: (//*[@attribute=’value’])[index]
In the above snippet, we can notice while writing xpath for Dresses we are able to see 1 0f 21, when we want to identify unique element in such cases, we use index. By default it locates first element.
Actually, I want to select casual dresses xpath in such case we can use as follows:
Example:(//a[contains(text(),’Dresses’)])[2]
You can clearly understand by seeing snippet.
Sometimes even after using above functions, the user is not able to locate the web elements uniquely. In such Scenarios, the Xpath axes comes in selenium.
Do look out for other articles in this series which will explain the various other aspects of selenium.