This is the 7th guide in our Selenium Online Learning Series. To view all Selenium guides in this series, please visit this link.
In our previous guide, we explored different types of locators in Selenium and their application in creating test scripts. We introduced various locators such as ID, Classes, Xpaths, Link texts, CSS Selectors among others, and how they can be identified.
Recommended IPTV Service Providers
- IPTVGREAT – Rating 4.8/5 ( 600+ Reviews )
- IPTVRESALE – Rating 5/5 ( 200+ Reviews )
- IPTVGANG – Rating 4.7/5 ( 1200+ Reviews )
- IPTVUNLOCK – Rating 5/5 ( 65 Reviews )
- IPTVFOLLOW -Rating 5/5 ( 48 Reviews )
- IPTVTOPS – Rating 5/5 ( 43 Reviews )
In this guide, we will delve deeper into advanced locating methods. We will specifically focus on identifying web elements in Google Chrome and Internet Explorer.
For web application automation with Selenium, it’s crucial to understand how to determine web elements in diverse browsers. This guide will walk you through the steps of identifying elements in Chrome and Internet Explorer.
With a growing number of internet users, it’s vital for web applications to be compatible across multiple browsers. But, what if your web application functions optimally only on Chrome and Internet Explorer, but not Firefox?
Under such circumstances, it’s essential to know how to automate the application using Selenium, particularly locating web elements in Chrome and Internet Explorer. This guide provides the necessary information to facilitate that.
Identifying Web Elements in Google Chrome
Let’s first understand the process of determining elements in Google Chrome.
Similar to Firefox’s Firebug, Google Chrome incorporates its own developer tool that allows the identification and location of web elements on a page. Unlike Firebug, no separate plugin download or installation is required for this developer tool, as it comes pre-packaged with Google Chrome.
Follow these steps to locate web elements using Chrome’s Developer tool:
Step #1: Activate Google Chrome’s Developer tool by pressing F12. The tool will appear as depicted in the screenshot below:
You’ll notice the “Element” tab highlighted in the screenshot. This tab displays all the HTML properties of the current web page. You will need to navigate to it if it’s not opened by default.
You can also activate the developer tool by right-clicking anywhere on the web page and selecting “Inspect element,” which functions similarly to Firebug’s inspection feature.
Step #2: Identify the desired web element on the page. Right-click on the element and select “Inspect” to bring up its associated HTML property in the developer tool. Alternatively, you can hover over the HTML properties to locate the corresponding web element. This will allow you to find IDs, classes, links, and so on.
Formulating an Xpath in the Developer Tool
We discussed Xpaths and their formulation in the previous guide. In this section, we will focus on validating the created Xpath in Chrome’s Developer tool.
Step #1: To formulate an Xpath in the Developer tool, open the console tab.
Step #2: Input the created Xpath and enclose it within $x(“xpath expression”)
Step #3: Press Enter to display all the HTML elements that match the specified Xpath. In our example, there’s only one matching HTML element. Hover over that element, and the corresponding web element will be highlighted on the page.
In this way, you can formulate and validate Xpaths within the console.
Information about the CSS linked to a web element is also provided by Chrome’s Developer tool. Refer to the screenshot below:
Determining Web Elements in Internet Explorer
Similar to Google Chrome, Internet Explorer also features its own Developer Tool. You can utilize this tool to identify web elements based on their attributes within the web page. Like Google Chrome, there is no need for a separate plugin download or installation, as the developer tool is incorporated into Internet Explorer.
Follow these steps to locate web elements using IE’s Developer tool:
Step #1: Activate Internet Explorer’s Developer tool by pressing F12. The tool will appear as depicted in the screenshot below:
The “HTML” tab is highlighted in the screenshot. This tab shows all the HTML properties of the active web page. You will need to expand the HTML tab to view the properties of all web elements on the page.
Step #2: Identify the desired web element on the page. You can select the HTML element, which will be highlighted in the developer tool. This will help you to locate IDs, classes, links, and so on. View the screenshot below; the Email Textbox is highlighted after selecting the corresponding HTML property.
Another method of locating web elements is by clicking the “Find” button in the top menu, then clicking on the desired element within the web page. This will highlight the corresponding HTML properties.
The developer tool can help you find IDs, classes, tag names, and create Xpaths to locate web elements.
Like Chrome’s Developer tool, IE’s developer tool has a separate section that displays CSS-related information. Refer to the screenshot below:
Summary
In this guide, we have examined the fundamental methods for identifying elements using the Developer’s tool in Google Chrome and Internet Explorer.
Following Guide #8: In our subsequent guide, we will introduce WebDriver, a more sophisticated tool. WebDriver ranks among the most potent automation testing tools. Starting from the next guide, our discussions will center around WebDriver and its various characteristics.