In this article, I am going to practically demonstrate the usage of DOM locators for locating the UI elements on the Web Pages.
Note: This article is just for demonstrating DOM at a high level. DOM will be explained in detail in the upcoming articles.
Let’s get started.
Locators for Selenium – Demonstrating DOM Locators
Follow the below steps for locating the UI elements on the Web Pages using DOM Locator:
1) Navigate to http://omayo.blogspot.com/ in your chrome browser as shown below:
2) Scroll down in the above page, right click on ‘Button2’ button and select ‘Inspect’ option as shown below:
3) Observe that the HTML code related to the ‘Button2’ Button got highlighted as shown below:
4) Double click on the id attribute value (i.e. but2) of the highlighted HTML line, right-click and select ‘Copy’ option as shown below:
5) Now click on the ‘Console’ tab as shown below:
6) Now type the below DOM statement as shown below:
7) Now paste the copied id attribute value into the DOM statement and press Enter key on your keyboard to execute as shown below:
8) Hover the mouse of the HTML line which got displayed as result in the Console tab and observe that the ‘Button2’ button is getting highlighted as shown below:
The above step proves that the DOM Locator ( dom=getElementById(“but2”) ) is able to locate the ‘Button2’ button on the web page.
In the next article, I will demonstrate the Priority of Locators.
- > 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.