Inspecting Elements for writing XPath, CSS Selector in Chrome

The most important part in any kind of automation is, identifying various elements over which we want to perform an action and when it comes to web application or android application automation using Selenium WebDriver or Appium, we fall for Chrome, Firefox or Internet Explorer to find the right set of XPath or CSS selector. For the same, all most all of the browsers have started providing support for various developer tools and this has made our job of identifying various web elements quite easily. Before chrome browser launch, people were dependent on various add-ons and extension like Firebug to inspect and edit HTML content during their front end development.

So in this Post, We will learn to inspect element, write XPath and CSS Selector using Chrome Browser. So this post will be divided into the following steps

• Inspecting element & Opening Devtool (Developer Tool) in the Chrome Browser
• Highlighting Elements through XPath, CSS Selector, and ID.

Inspecting Element & Opening Developer tool in Chrome Browser
Recent Version of Chrome browser provides multiple ways to open the Chrome Developer Tool

1. Press F12 on Keyboard
2. Press COMMAND + Option+C (In Mac) and Press Control+Shift+C (In Windows)
3. Select any element on page and right click on your mouse.
4. Navigate to Home Icon at top right corner, Navigate to More Tools > Developer Tools

Highlighting HTML code of any element using the developer tool
Option 1: Select Element and Right Click and From the context menu, Select Inspect Option.
In this example, we are taking google home page and here we are keeping our cursor in the search box and performing right click and selecting Inspect.
After Selecting the Inspect option from the context menu, It will open the element view of developer tool where it will highlight the HTML code. So as an automation engineer we need to write our XPath or CSS Selector by seeing various attributes of selected HTML code.

Option 2: Open Developer Tool using any of the above-mentioned ways and Click on Select icon on developer tool and click on an element for which we want to see the HTML code.

Now we are familiar with all the ways to highlight HTML code and we are also familiar with the ways to open Chrome Developer Tool. Now we are moving to the next stage of this post where we are going to search specific tag, id, XPath and CSS Selector.

Searching and Validating already written XPath, CSS Selector

This is a very important section Because this is going to give you a perspective to validate your locators before using it in code. These all locators are mainly used in fineElement() or findElements() method in Selenium WebDriver to identify WebElements on any of the web pages for which we are going to write the script.

Here again, we have two ways to do this.

Option 1: Using Find box (Search in HTML Code) of Developer Tool.

Recently this find box on developer tool has got a mighty hand to find HTML code using String Pattern, Xpath, and CSS Selector which earlier was not possible except searching string pattern.
So the first step that we need to perform is to open the find box on developer console. So for this user needs to press Command+F (In Mac) or Ctrl+F (In Windows) to open the find box.

String Pattern: It will contain id, the class attribute, and HTML tag.

1- So here we would be picking up HTML tag name, id and class attribute.

So let’s take input text and put it in the find box and see it will show all the input tags in the whole HTML page and as soon as you will click on enter it will increase the count and will also highlight the element on the web page which is selected in search Like this

Similarly, we can search any string pattern either it is id, class or any other attribute mentioned in HTML.

XPath and CSS Selector in Find Box: Correct element gets highlighted in element tab if correct XPath and CSS Selector are inserted in Find Box. This way we can validate our XPath and CSS Selector and this way we could decide whether findElement() or findElements() Method need to be invoked in code.

So here is the XPath and CSS Selector of Search textbox on Google Home page.

XPath: //input[@name=’q’]

CSS Selector: input[name=q]

So if you are wondering how to write effective XPath and CSS Selector then read these articles

XPath in Selenium

Absolute XPath in Selenium WebDriver

Xpath in Selenium :: Contains() and starts-with() function in XPath

CSS Selector in Selenium WebDriver

Validating CSS Selector:  As soon CSS Selector would be inserted in find box, it will highlight the code as well as the element on the web page like this

Above visual also shows that total 1 of 1 element has been found in HTML, it means above CSS Selector is unique and returning only one element. So the user should use findElement() method in their code. But if above CSS Selector has shown 1 of (a number greater than one) it shows that CSS Selector is not unique and if the user wants to use this locator in the code, he/she needs to use findElements() method which deals with the list of element in Selenium WebDriver.

Validating XPath: Similarly, we will insert XPath in the find box and will see the above result because equivalent XPath has been written for the search text box.

Option 2: Using the Console of Chrome Developer Tool

This is the second way of validating XPath and CSS Selector written to use in the script. So here the user has two options to open the console.

1- Just by pressing [ESC] on the keyboard and it will open the console at the bottom

2- User can directly click on the console tab of the developer tool. (Probably it will be visible in above image just beside Elements tab)

So once console appear user need to follow the following pattern to validate XPath and CSS Selector

For XPath:  User can use following string in the console
$x(“Xpath”) and hit enter. Since XPath for search box is //input[@name=’q’]

So the final string which needs to be inserted is

$x("//input[@name='q']")

Above will return an array and element at 0 indexes is the element that we want to validate( Now use need to validate the size of the array returned and if size is one it means the element is uniquely identified.)

For CSS Selector: user needs to follow this pattern in the console to validate it.

$$(“CSS Selector”).

So enter the following string in the console.

$$("input[name=q]")

This will also return an array and if the array size is zero means element has been uniquely identified.

Hope you like this article and if like then share it with your friends as well.