When you’re building a Selenium-based automated testing framework, one of the first things you need to do is learn how to inspect elements in a web browser. This can be a tricky task, because different web browsers have different ways of doing things. In this Selenium automation framework tutorial, we’ll show you how to inspect elements in the three most popular web browsers: Google Chrome, Mozilla Firefox, and Microsoft Edge.
Google Chrome
In Google Chrome, you can inspect elements by right-clicking on them and selecting “Inspect” from the context menu. This will open the Chrome Developer Tools window, which will show you the HTML code for the selected element. From here, you can make changes to the element’s CSS styles or its HTML attributes.
Mozilla Firefox
Mozilla Firefox also has a built-in Developer Tools window that you can use to inspect elements. To open it, simply right-click on an element and select “Inspect Element” from the context menu. The Developer Tools window will then open, showing you the HTML code for the selected element. From here, you can make changes to the element’s CSS styles or its HTML attributes.
Microsoft Edge
Microsoft Edge does not have a built-in Developer Tools window like Google Chrome and Mozilla Firefox do. However, you can still inspect elements in Microsoft Edge by using the Internet Explorer Developer Tools. To do this, simply press F12 to open the Internet Explorer Developer Tools window. Then, click on the “Select Element” tool and hover over the element that you want to inspect. The HTML code for that element will then be displayed in the bottom pane of the window. From here, you can make changes to the element’s CSS styles or its HTML attributes.
