In this article, I am going to practically demonstrate the usage of ID locators for locating the UI elements on the Web Pages.
Let’s get started.
Locators for Selenium – Demonstrating ID Locator
Follow the below steps for locating the UI elements on the Web Pages using ID Locator:
1) Install Selenium IDE, if not installed in your chrome browser (Refer steps to install Selenium IDE in your chrome browser)
2) Navigate to http://omayo.blogspot.com/ in your chrome browser as shown below:
3) Scroll down in the above page, right click on ‘Button2’ button and select ‘Inspect’ option as shown below:
4) Observe that the HTML code related to the ‘Button2’ Button got highlighted as shown below:
5) Observe that the above-highlighted HTML code has an id attribute with a value. We can use this id attribute value (i.e. but2) as an ID locator for locating the ‘Button2’ Button on the Web Page. Lets double click on the id attribute value (i.e. but2) of the highlighted HTML line, right-click and select ‘Copy’ option as shown below:
6) Launch Selenium IDE from Chrome Browser by following the steps provided in below article:
7) Enter any Selenium IDE command say ‘Click’ into the ‘Command’ Text box field as shown below:
Note: Without entering this command ‘Find target in Page’ magnifier icon option will be in a disabled state by default and will be enabled only after entering any command into the ‘Command’ text box field as shown below:
8) Now, type id= into the Target text box field as shown below:
9) Paste the id attribute value copied earlier (i.e. in Step 5) into the ‘Target’ Text box field and click on ‘Find target in Page’ search icon option as shown below:
10) Observe that the Button2 button on the Web Page got highlighted for a second on clicking the ‘Find target in Page’ option in the above step using the id=but2 locator provided in the Target field as shown below:
As the Button2 is getting highlighted using the ID locator (i.e. id=but2) provided in Selenium IDE, we can confirm that the give ID locator is able to locate the Button2 using its HTML code’s id attribute value.
Hence in this example, we have used the ID locator (i.e. id=but2) for locating the ‘Button2’ button on the Web Page having the id attribute value as ‘but2’.
In the next article, I will demonstrate the next locator i.e. Name locator for locating the UI elements on the Web Page.
- > 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.