XPath Using 'starts-with()'

'starts-with()' method is used to identify an element when one is familiar with the attribute value of an element. This method checks the starting text of an attribute. It is very handy to use when the attribute value changes on refresh or any operation on the webpage. We can also use this method to find the element whose attribute value is static.

For example:

Suppose the ID of particular element changes dynamically like:

• Id="message1"
• Id="message2"
• Id="message3"

Here we can see that the initial text is same. In this case, we can use start-with().

Syntax:

//tag[starts-with(@attribute, 'value')]

Example:

//input[starts-with(@id, 'user-message')]

 In the above example, XPath finds those element whose 'ID' starting with 'user-message'.

XPath Using 'contains()'

When an attribute of an element is dynamic then one can use 'contains()' to select the element by using the constant part of the attribute of that web element.

Syntax: 

//tag[contains(@attribute, 'value')]

Example:

XPath = //tag[contains(@name, 'btnClk')]

It searches 'btnClk' for all name attributes in the DOM.

XPath = //tag[contains(text(), 'here')]

It searches the text 'here' in the DOM.

XPath = //tag[contains(@href, 'google.com')]

It searches 'google.com' link in the DOM

Let's get a clear view with the below example:

//span[contains(@class, 'gb_')]

Here, //span[contains(@class, 'gb_')] searches all the 'span' elements which contains 'gb_' as attribute class value.

Another example:

//a[contains(text(), 'ac')]

Here, //a[contains(text(), 'ac')] searches all the 'a' elements which contains 'ac' as attribute text value.

XPath Using 'text()'

'text()' is a method in XPath expression which is used to form a locator based on the text available on a webpage

Syntax:

//tag[text()='exact text']

Example:

//a[text()='About']

Chained XPath

We can create a chain of multiple Relative XPath declarations with ' // ' double slash to find an element location as shown below:

Syntax:

//tag[@attribute='value']//tag[@attribute='value']

Example:

//div[@class='form-group']//input[@id='user-message']

Let's get a clear view with the below example:

//li[@class = 'gb_T']//span[@class = 'gb_Z']

 

Here, //li[@class = 'gb_T']//span[@class = 'gb_Z'] selects all the 'li' elements which contains 'gb_T' as attribute class value and then selects all the 'span' elements which contains 'gb_Z' as attribute class value. //span[@class = 'gb_Z'] selects only those 'span' elements which are the decedent of the 'li' elements selected by //li[@class = 'gb_T'].

Generating XPath With Multiple Attribute

Sometimes it may not be possible to locate an element with a single attribute. In the real world, we have a similar issue. We cannot locate a person just by his/her first name or last name. We have to use a combination of first name and last name to locate a person without making any confusion. A similar technique is used in selenium for locating elements.

Syntax:

//tag[@attribute1='value1'][@attribute2='value2']…[@attributeN='valueN']

Example:

//input[@class='button'][@type='submit'][@value='LOGIN'][@name='Submit']

Let's get a clear view with the below example:

//div[@class = 'ctr-p']

After using the above XPath in 'google.com', we will get two nodes in result.

Now if we want to get a single node than we can simply add another attribute in the above XPath and get the desired result. We will use below XPath:

//div[@class = 'ctr-p'][@id = 'footer']

Here we can see after adding new attribute we are able to select our desired node only. To get the other node we can just simply use:

//div[@class = 'ctr-p'][@id = 'viewport']

Generating XPath With Single Attribute

Single attribute XPath uses one attribute to locate an web element.

Syntax:

//tag[@attribute = 'value']

Example:

//input[@id = 'user-message']

This would select the input element nodes which has 'user-message' as it’s id attribute value.

Let's get a clear view with the below example:

//li[@id = 'ogbkddg:4']

Here, //li[@id = 'ogbkddg:4'] selects all the 'li' node which has 'ogbkddg:4' as it's attribute id.

Basic XPath (Tag, Attribute & Value)

Single Attribute:

Single attribute XPath uses one attribute to locate an web element.

Syntax:

//tag[@attribute = 'value']

Example:

//input[@id = 'user-message']

This would select the input element nodes which has 'user-message' as it’s id attribute value.

Let's get a clear view with the below example:

//li[@id = 'ogbkddg:4']

Here, //li[@id = 'ogbkddg:4'] selects all the 'li' node which has 'ogbkddg:4' as it's attribute id.

Multiple Attribute:

Sometimes it may not be possible to locate an element with a single attribute. In the real world, we have a similar issue. We cannot locate a person just by his/her first name or last name. We have to use a combination of first name and last name to locate a person without making any confusion. A similar technique is used in selenium for locating elements.

Syntax:

//tag[@attribute1='value1'][@attribute2='value2']…[@attributeN='valueN']

Example:

//input[@class='button'][@type='submit'][@value='LOGIN'][@name='Submit']

Let's get a clear view with the below example:

//div[@class = 'ctr-p']

After using the above XPath in 'google.com', we will get two nodes in result.

Now if we want to get a single node than we can simply add another attribute in the above XPath and get the desired result. We will use below XPath:

//div[@class = 'ctr-p'][@id = 'footer']

Here we can see after adding new attribute we are able to select our desired node only. To get the other node we can just simply use:

//div[@class = 'ctr-p'][@id = 'viewport']