Inspecting WebElements is heart of Web Automation using Selenium. In the initial days Firebug & Fire-path used to be the favorite tools for Web Developers and Automation testers. Now a days there are many plug-ins and add-ons available for various browsers to inspect an element in the DOM. But mastering this art using the Developer Tools provided the browser will make you more conformable instead of relying on any browser plug-in or add-on.
Highlight a WebElement using Chrome DevTools
Google Chrome DevTools provide a rich set of Tools (Panels) named Elements, Console, Network, Performance, Memory, Security etc. The scope of this article is to locate and inspect WebElement using the Elements panel (tab) in Chrome DevTools.
How to open Chrome DevTools
There are multiple ways to open DevTools in chrome using either keyboard or mouse. First open the Chrome browser and choose one of the following options (Pictures are provided for option 3,4 ).
- Option 1: Press “F12” key.
- Option 2: keyboard shortcut “Ctrl + Shift + I”.
- Option 3: Click on the 3 dots on the top right corner of the Chrome > More Tools > Developer Tools.
- Option 4: Right click on the Web page and click inspect.
Chrome DevTools window contains many tabs/panels. It might look bit overwhelming until you are familiar with various panels. The main context of this document is to make use of Elements panel to inspect WebElement in the DOM.
How to dock DevTools window to left/right/bottom or undock to a separate window?
The whole DevTools window can be docked to left / right / bottom or undock to a separate window based on your preference. Click on the 3 vertical dots as shown in below picture and choose the right option that suits you.
How to Highlight a WebElement using Chrome DevTools?
There are 2 ways to highlight a WebElement in the DOM using DevTools. The below example uses google search textbox. First open DevTools window in Chrome and follow one the below steps.
- Right click on an element you wish to inspect, click on the inspect. The Element is highlighted in the DOM.
- Another approach using the Selector Arrow. First click on the Selector Arrow and click on the WebElement that needs to be inspected. The Element is highlighted in the DOM.
Note: After clicking on the Selector Arrow, Elements in the DOM are highlighted based on the location of the mouse pointer.
Highlight WebElements with Find
What is ‘Find’ box in Chrome DevTools?
Fundamental basis for Web Automation is to find an unique locator to identify a WebElement(s) using the Selenium methods FindElement() & FindElements(). Chrome DevTools provide a built-in ‘Find’ search box, which takes any of the below locator strings, to identify/inspect the matching WebElement (or WebElements if more matches are found).
- CSS selector
How to display Find box in Chrome DevTools?
Click on either Elements panel or DOM and press Ctrl + F to display the Find box.
How to highlight WebElements using Chrome DevTools ‘Find’ box?
The below example uses google search textbox. Here is the html element of the Google search-box (simplified)
<input class="gsfi" id="lst-ib" maxlength="2048" name="q" autocomplete="off" title="Search" type="text" value="">
Inspect a WebElement using Locator (input)
Google search box is a <input> element, lets type input in the ‘Find’ box and hit enter. Find results in 14 matching WebElements. Each matching WebElement can be highlighted in the DOM using the up/down arrows. If a particular WebElement is hidden, then it is not displayed in the Web page.
Inspect a WebElement using ‘id’
Google search <input> WebElement got an attribute “id” with value set to “lst-ib”. Type “lst-ib” in Find and hit enter, Find results in 2 matching WebElements, so this is also not unique.
Inspect a WebElement with CSS Selector
Combining both locator and id make the CSS selector as “input#lst-ib”. With this string ‘Find’ results in one matching WebElement, so this is unique.
Inspect a WebElement with XPath
XPath can be prepared in various ways. Below three XPaths uniquely identify the same WebElement (Google search box).
Once you are comfortable using Chrome DevTools, you don’t have to rely on any browser plug-in or add-on.
Hope this article/tutorial is useful. Please let me know you inputs.