Find Element Without using Addon: We will mostly use the Element and Console panels for Writing and Validating the XPath out of different panels. Let’s try to understand the information and things about these two panels individually.
Element:
In this panel, you can find the DOM tree of the elements, and you can also edit the DOM elements. I hope you regularly visit the element tab to identify the locator details regarding the WebElements. But we can use it to write and evaluate the Xpath / CSS.
Steps Need to Follow to Validate XPath / CSS through Element Tab:
- Open the DevTools; if you don’t know, we have mentioned how you can do that above.
- Press “CTRL + F” to open a search text box in the Element tab.
- Enter the XPath or CSS to evaluate the element.
- If the XPath or CSS is matched with any of the elements, then the respective elements will be highlighted in the DOM, giving you the total number of matching elements in the DOM. Also, there is an up arrow and a down arrow, and by using that, you can traverse any matching elements. The matching element will also be highlighted in the DOM.
Console:
Like the Element tab, We Can also use the Console tab to evaluate the element with the XPath or CSS Selector. This Javascript console has a Shell prompt, which we can use to interact with the document in DevTools.
You can follow the below Steps to Locate the Elements:
- Open the DevTools Of the Browser.
- Like in the Element Tab, there is no need to press “CTRL + F” because, by default, you can find a space to write the respective XPath and CSS selector as per your requirement.
- If you want to go with the XPath, then write the XPath with “$x(“Xpath Expression”)” and after that hit enter key.
- Similarly, if for some element you want to go with the CSS Selector, then write with “$$(“CSS Selector Expression”)” and Hit enter key.
- If your expression matches with so many elements, then the expression will return results in an array, and from the result, you can count the matching elements as well.
- Expanding the array and mouse Hover on a specific array will highlight the elements on the web page.
Validate XPath Expressions and CSS Selectors in Firefox browser.
Like Chrome browser, Firefox browser also has built-in Devtools. So, in the Firefox browser, you can also follow the above steps to locate the elements.
But if you want to go with some browser extensions, we have written a complete post where we have mentioned some of the most popular and Rich featured extensions; you can use those and get about those popular browser extensions for locating elements that can follow the article.
Find Element Without using Addon.
In some interviews or situations, you are not allowed to use any browser extension to locate the elements of the webpage. So, if you know how to use it, then it is good for you to locate the elements. So, it’s a suggestion for any automation testers that you should be good at writing the custom Xpath or CSS selector using or without an extension.
Combine Both Two
When trying to do automation for any Web application, the first thing that comes to your mind is how to Find the Xpath in Selenium. Because this is the common challenge point for every automation tester when they are doing the automation, in this post, we will share some of the basic and most popular Chrome extensions that can help you find the Xpath In Selenium.
As we know, out of all locator strategies like ID, Name, TagName, ClassName, Xpath, CSS Selector, LinkText & PartialLinkText, Out of all those locators XPath is the most powerful way of determining the location of the element on a web page. All automation testers prefer Xpath because it provides so many functions and Techniques by which you can easily find the element objects that are dynamic and fragile in nature.
Locate Element Without Using Extension
When you are working with your colleagues, you may have seen some of them locate the elements or write the Xpath without using any extensions. If you want to do so in Chrome, the Chrome browser provides tools or panels like Element, Console, Network, Performance, Memory Security, etc. So, we are going to use the developer tool to locate the elements, and we are going to use the Element tab in the Chrome dev tools.
How to Open Chrome Dev tools?
In Chrome, there are so many different ways to open the Chrome dev tools, and those are:
- Open a web page in the browser and press the “F12” function key.
- You can also use the shortcut key of the keyboard, which is “CTRL + SHIFT +I”.
- Right-click on the browser and select the Inspect option.
We have also written an article about finding an element without using any extension. You can follow the article here.
To help the testing community, many developers have developed many extensions, and by using those extensions, you can easily find the element. It also highlights the elements that match the XPath. In this post, we will share some of the common and popular which are widely used by the testers.
If you want to know how to use those extensions, you can follow the tutorial links below for an idea about how to use the popular extensions.
But if you are good at writing custom Xpath, you can write your own Xpath without using any extensions. but for writing the XPath, you have a good understanding of the XPath, and if you lack that, then you can read our article where we are trying to mention how you can be good in writing the custom XPath for locating the web elements in the web page.
Final Words:
We try our best to share the popular and good Chrome extensions widely used by the testers to find the Xpath for your web elements. After reading all the above extension implementations, I hope you get an idea. But still, we recommend you try to install all those extensions and try hands-on ones. In the comment section, let us know which extensions you like are user-friendly and why you like them most.
Still, so many extensions are available with the same functionality to locate the elements we may miss such similar and popular extensions. If you want to add that in this post, you can mention that in the comment section, and we try to update that in our post.
