<<Previous Post << Complete Tutorial>> Next Post>>
In one of the previous articles, I have explained – What are Locators?
Once you understand the above-mentioned article, you will understand that Locators are used for locating the UI element on the web pages.
And there are different types of locators we can use for locating the UI elements on the web pages.
In this article, I am going to explain and practically demonstrate the different types of locating strategies we can use in Selenium IDE for locating the UI elements on the web pages.
Let’s get started.
Selenium IDE – Locating Strategy
The following are the different locating strategies we can use in Selenium IDE for locating the UI elements on the web pages:
- ID
- Name
- Identifier
- XPath Expressions
- CSS Selectors
- DOM
The below diagram depicts the different locating strategies we can use in Selenium IDE:
Before I demonstrate all the above locating strategies, you should have an idea on all the below things:
- HTML Basics (You can start learning from here)
- Locators Concepts (You can start learning from here)
- XPath Expressions (You can start learning from here)
- CSS Selectors (You can start learning from here)
Assuming that you have an idea on all the above-mentioned list, I am going to practically demonstrate all the locating strategies that are possible with Selenium IDE below:
ID – Locating Strategy
Follow the below steps for understanding the usage of ID locating strategy in Selenium IDE for locating the UI elements on the web page:
1) Open http://omayo.blogspot.com/ in any browser and inspect ‘Button2’ button as shown below:
2) Observe that the below HTML line of code having the id attribute got highlighted as shown below:
3) From the above-highlighted HTML line of code, we can create the below ID locating strategy as:
id=but2
Enter the above-locating strategy into Selenium IDE > Target Field, click on the Search icon as and observe that the ‘Button2’ button which was inspected in step 1 will be located as shown below:
Here concludes the practical demonstration of ID locating strategy in Selenium IDE.
Now, I will practically demonstrate Name locating strategy in Selenium IDE.
Name – Locating Strategy
Follow the below steps for understanding the usage of Name locating strategy in Selenium IDE for locating the UI elements on the web page:
1) Open http://omayo.blogspot.com/ in any browser and inspect ‘Search’ field as shown below:
2) Observe that the below HTML line of code having the Name attribute got highlighted as shown below:
3) From the above-highlighted HTML line of code, we can create the below Name locating strategy as:
name=q
Enter the above-locating strategy into Selenium IDE > Target Field, click on the Search icon as and observe that the ‘Search This Blog’ text field which was inspected in step 1 will be located as shown below:
Here concludes the practical demonstration of Name locating strategy in Selenium IDE.
Now, I will practically demonstrate Identifier locating strategy in Selenium IDE.
Identifier – Locating Strategy
In the older version of Selenium IDE, Identifier locating strategy was used with both id and name attribute values for locating.
But in the latest Selenium IDE, Identifier locating strategy is no more supported.
For the below ID locating strategy example:
id=but2
We can also use the Identifier locating strategy as:
identifier=but2
And for the below Name locating strategy example:
name=q
We can also use the Identifier locating strategy as
identifier=q
As the identifier locating strategy is no more supported in Selenium IDE, the demonstration is not possible and we can ignore it from the list of locating strategies in the latest Selenium IDE.
XPath – Locating Strategy
Follow the below steps for understanding the usage of XPath locating strategy in Selenium IDE for locating the UI elements on the web page:
1) Let’s create an XPath Expression say //button[@id=’but2′] for locating the ‘Button2’ button on the web page.
Note: If you are not aware of creating XPath Expressions by yourself, start learning it from here: What is an XPath?
2) From the above-created XPath Expression, we can create the below XPath locating strategy as:
xpath=//button[@id=’but2′]
Enter the above-locating strategy into Selenium IDE > Target Field, click on the Search icon as and observe that the ‘Button2’ button will be located as shown below:
Here concludes the practical demonstration of XPath locating strategy in Selenium IDE.
Now, I will practically demonstrate CSS locating strategy in Selenium IDE.
CSS – Locating Strategy
Follow the below steps for understanding the usage of CSS locating strategy in Selenium IDE for locating the UI elements on the web page:
1) Let’s create a CSS Selector say input[name=q] for locating the ‘Search this blog’ text box field on the web page.
Note: If you are not aware of creating CSS Selectors by yourself, start learning it from here: What is a CSS Selector?
2) From the above-created CSS Selector, we can create the below CSS locating strategy as:
css=input[name=q]
Enter the above-locating strategy into Selenium IDE > Target Field, click on the Search icon as and observe that the ‘Search this blog’ text box field will be located as shown below:
Here concludes the practical demonstration of CSS locating strategy in Selenium IDE.
Now, I will practically demonstrate DOM locating strategy in Selenium IDE.
DOM – Locating Strategy
Follow the below steps for understanding the usage of DOM locating strategy in Selenium IDE for locating the UI elements on the web page:
1) Let’s create a DOM statement say document.getElementById(“but2”) for locating the ‘Button2’ button on the web page.
Note: I will explain the DOM (Document Object Model) concept in the upcoming articles. Till then blindly use the DOM statement I have given as part of the example.
2) We have to create the below DOM locating strategy using the above DOM expression:
dom=document.getElementById(“but2”)
But the latest version of Selenium IDE is no more supporting this DOM locating strategy and hence can’t be demonstrated here.
Here concludes the practical demonstration of all the different locating strategies in Selenium IDE.
In the next article, I will start practically demonstrating all the Selenium IDE commands.
Next Steps:
- > To learn more about Selenium, continue to the next post (Click on Next Post link below)
- > Check complete Selenium Tutorial Contents here (Click here)
Please leave your questions/comments/feedback below.
Happy Learning ?
On a mission to contribute to the Software Testing Community in all possible ways.
<<Previous Post << Complete Tutorial>> Next Post>>