Selenium has become the most widely used test automation tool in the world with many added features that makes it highly user-friendly. Selenium supports multiple programming languages it is compatible with multiple platforms and browsers.
Selenium has many attractive features which make it a highly user-friendly software testing tool and locators are among such features. Locators help to identify or find an element on the web page under test and there are different types of locators in Selenium such as
- Link Text
- CSS Selector
These locators make it easy to find an element but the process of locating elements of different browsers may vary a bit. Here we are discussing the processes to locate elements in Chrome and IE browsers for building Selenium scripts.
Locating Elements in Google Chrome
As there is “Firebug” in Firefox, Google has its own developing tool which can be used to locating elements on the web page. However, there is no need to download the separate plugin as in Firefox as the tool is readily bundled with Chrome.
Launch Google’s Developer Tool
This is the first step and here you need to launch Google Chrome’s developer tool by pressing “F12”. Now you will see the same image given below.
In this image, it is clearly visible that the “Element” tag is highlighted. All the web properties belong to the current web page will be shown in the “Element” tag. If it is not highlighted by default, navigate to it.
Developer tool can be launched by right-clicking on the web page and then selecting “Inspect Element” also.
Locate the Object Within the Web Page
The second step is to locate the object and you can do it by right-clicking on the desired object and inspecting it. The HTML properties belong to that element will be highlighted in the tool. There is one more way to locate the element. You can hover through HTML properties and the matching element will be highlighted. In this way IDs, Names, Class will be located.
Locating Web Elements in Internet Explorer
As in the case of Google Chrome, Internet Explorer to has a web developer tool which comes bundled with the browser and hence there is no need to download the separate plugin.
Launching IE Web Developer Tool
The first step is to launch the Internet Explorer Web Developer tool and this can be done by pressing F12. The screen will display the below-given window.
Here the “HTML” tag is highlighted and hence all the HTML properties of the current web page will be in this tag. If it is not highlighted by default, navigate to it. Expand the tab to view all the web properties.
Locating the Object Within the Web Page
Now the next step is to find the element. If you select the HTML element, the matching web element will be highlighted. Thus the user can find ID, Name, Class, Link etc. In the below-given image, the email textbox is highlighted as soon as the corresponding HTML is selected
There is one more way to find the element or the object. Click on the “Find” button on the top of the menu and then clicking on the desired web element, you will get the corresponding HTML properties highlighted.