Selenium with Javascript – Relative XPath Part 1

by

Selenium with Javascript – Relative XPath Part 1

Hi friends, So we are going to discuss about type of dynamics XPath or relative XPath in this session.
in the last session we had discussed what is xpath and the type of XPath, and we found that we have 2 types of x paths

  • Absolute XPath
  • Relative XPath

We found that we never use Absolute XPath. We always use Relatice Xpath, So let’s discuss about Types of Relative Xpath in this session. We are going to discuss how many types of dynamic or relative Xpath we have. There are 2 types of Relative XPaths

  1. Basic Relative XPath
  2. Advanced Relative XPath

We are going to discuss about Basic Relative XPaths in this session So, there are six types of Basic Relative XPath

Type of Basic Relative XPath

  1. Relative XPath with single attribute
  2. Relative XPath with multiple attribute
  3. Relative XPath with or keyword
  4. Relative XPath with and keyword
  5. Relative XPath with contains keyword
  6. Relative XPath using starts-with keyboard

Syntax of Relative XPath

We had already discussed about the syyntax of Relative XPath in our last session, but let’s see it again.

  1. Relative XPath starts with a double slash.
  2. We have to mention tagName after // in the Relative XPath, or we can mention * after // in the Relative XPath, so that means, there are going to 2 types of Syntax for Relative XPath
  3. We have to mention square brackets after tagName or *.
  4. We have to write attribute name and attribute value inside the square bracket.
  5. Attribute name should be written with @ symbol before it.
  6. We have already discussed about Attribute Name and Attribute Value in our previous sessions.

So, a Common Syntax for Relative Xpath is something like this.

  1. //tag_name[@attribute_name = ‘attribute_value’]
  2. //*[@attributename = ‘attribute_value’]

Relative XPath with single attribute

so let’s start with the first one which is the Relative XPath with single attribute. Let’s see the syntax of Relative XPath with single attribute.
There are 2 types of Syntax for Relative XPath with single attribute.

Syntax of Relative XPath with single attribute

//tag_name[@attribute_name = 'attribute_value']

//*[@attributename = 'attribute_value']

So, Let’s find out the XPath with single Attribute.

Example of Relative XPath with single Attribute

//*[@id="billing_first_name"]

//input[@id="billing_first_name"]

Relative XPath with multiple attribute

Now, Let’s see the Relative XPath with multiple attribute so when you want to find a Relative XPath with multiple attribute then the Syntax of the Relative XPath with multiple attribute will be

Syntax of Relative XPath with multiple attribute

//tag_name[@attribute1_name = 'attribute1_value'] [@attribute2_name = 'attribute2_value']

//*[@attributename = 'attribute_value'] [@attribute2_name = 'attribute2_value']

So, This Syntax is same like the previous one, the only different thing here is, that, an extra attribute is being used to find out the Element.

This type of XPath is generally used, when single attribute is not sufficient to find the unique XPath.

Let’s see the example for this.

Example of Relative XPath with multiple attribute

//*[@type="text"] [@name="billing_first_name"]

//input[@type="text"] [@name="billing_first_name"]

Relative XPath with OR keyword

Now Let’s see the Relative XPath with OR Keyword, So when you try to find the Relative XPath with OR Keyword for any Element, then the Syntax for that will be.

Syntax of Relative XPath with OR keyword

//tag_name[@attribute1_name = 'attribute1_value' OR @attribute2_name = 'attribute2_value']

//*[@attribute1_name = 'attribute1_value' OR @attribute2_name = 'attribute2_value']

Example of Relative XPath with OR keyword

So, this type of XPath is generally used when an Element is having different properties at different times. Let’s take an example of an eCommerce Website which is available in 2 languages English and French. So, When we have selected the language as English on the Website, then the login button has an attribute value of id as login_button but when we have selected the language as French on the Website, then the login button has an attribute value of id as bouton_de connexion then what should we do to locate this element, So we can use OR Keyword in that case to locate the Element.

Let’s see the XPath for this condition.

//button[@id='login_button' OR @id='bouton_de connexion']

So, the Syntax of this XPath also same like the previous ones, We are just using an OR Keyword here to find out the Element.

Relative XPath with AND keyword

Now Let’s see the Relative XPath with AND Keyword, So when you try to find the Relative XPath with AND Keyword for any Element, then the Syntax for that will be.

Syntax of Relative XPath with AND keyword

//tag_name[@attribute1_name = 'attribute1_value' AND @attribute2_name = 'attribute2_value']

//*[@attribute1_name = 'attribute1_value' AND @attribute2_name = 'attribute2_value']

This type of XPath is generally used, when 1 attribute is not able to find a unquie XPath, So, We have to use more attributes with AND Keyword to find out the unique XPath of the Element.

Let’s see the example for this.

Example of Relative XPath with AND keyword

//*[@class="input-text" AND @name="billing_first_name"]

//input[@class="input-text" AND @name="billing_first_name"]

Relative XPath with contains keyword or method

Now, Let’s see the Relative XPath with Contains Method. This type of XPath is used to locate the elements where the attribute value changes dynamically but a part of the attribute value remains same. Let’s take an example where we have input field user_name and the id of this field is uname_12 and just after sometime the value of id becomes uname_15, so in this, we can’t use any of the above XPath that we have discussed, so far.

We will have to use a different Xpath. So, contains method helps us here. Let’s see the Syntax of the Relative Xpath with contains method

Syntax of Relative XPath with contains keyword or method

//tag_name[contains(@attribute_name, 'attribute_value')]

//*[contains(@attribute_name, 'attribute_value')]

Let’s see the example for same

Example of Relative XPath with contains keyword or method

//input[contains(@id, 'first_name')]

//*[contains(@id, 'first_name')]

Relative XPath using starts-with keyword or method

Now, Let’s see the Relative XPath with starts-with Method. This type of XPath is used to locate the elements where the attribute value changes dynamically but the starting part of the attribute value remains same. Let’s take an example where we have input field user_name and the id of this field is uname_12 and just after sometime the value of id becomes uname_15, so in this, we can use Relative XPath with Contains Method, but we have a different method as well, and that method is starts-with.

Let’s see the Syntax of the Relative Xpath with starts-with method

Syntax of Relative XPath using starts-with keyword or method

//tag_name[starts-with(@attribute_name, 'attribute_value')]

//*[starts-with(@attribute_name, 'attribute_value')]

Let’s see the example for same

Example of Relative XPath using starts-with keyword or method

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

//*[starts-with(@id, 'billing_first')]

Summary

We have covered below topics in this session

  1. Type of Basic Relative XPath
  2. Syntax of Relative XPath
  3. Basic XPath with single attribute
  4. Basic XPath with multiple attribute
  5. Relative XPath with OR keyword
  6. Relative XPath with AND keyword
  7. Relative XPath with contains keyword or method
  8. Relative XPath using starts-with keyword or method

Leave a Comment