Find Element Without using Addon

Find Element Without using Addon: For Writing and Validating the XPath out of different panels we are mostly going to use the Element and Console panel. Let’s try to understand what are the information and things to know about these two panels one by one.

Element:

In this panel, you can find the DOM tree of the elements and you can also be editing the DOM elements. I hope you are visiting regularly 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 then we have mentioned how you can do that above.
• Press “CTRL + F”, so that it will open a search text box in the Element tab itself.
• 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 and also it will give you the total number of matching elements in the DOM. And also there is an up arrow and a down arrow by using that you can traverse to any matching elements. The matching element will be highlighted in DOM also.

Console:

Like the Element tab, We Can also use the Console tab to evaluate the element with the XPath or CSS Selector. This is a Javascript console that 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:

1. Open the DevTools Of the Browser.
2. Like in Element Tab there is no need to press “CTRL + F” because by default here you can a space where you can write the respective XPath and CSS selector as per your requirement.
3. If you want to go with the XPath then write the XPath with “$x(“Xpath Expression”)” and after that hit enter key.
4. Similarly if for some element you want to go with the CSS Selector then write with “$$(“CSS Selector Expression”)” and Hit enter key.
5. 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.
6. If you will expand the array and mouse Hover on a specific array then it will highlight the elements on the Webpage.

Validate XPath Expressions and CSS Selectors in Firefox browser?

Like Chrome browser, Firefox browser also has the built-in Devtools. So in the Firefox browser, you can also follow the above steps so that you can locate the elements as well.

But if you want to go with some browser extension then we have written a complete post where we have mentioned some of the most popular and Rich featured extensions, you can use those and you can get about those poplar browser extensions for locating elements you can follow the article.

Find Element Without using Addon

In some interviews or some situations, you are not allowed to use any browser extension to locate the elements of the webpage. So if you know how to use 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 any extension or without extension.

Combine Both Two

When you are trying to do automation for any Web application, then the first thing comes to your mind that how you can 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 are going to share some of the basic and most popular Chrome extensions which can help you in finding the Xpath In Selenium.

As we know that 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. Xpath is preferred by all automation testers because Xpath provides so many functions and Techniques by which you can easily find the element objects which are dynamic and fragile in nature.

Locate Element With Out Using Extension:

You may have seen when you are working with your colleagues that some of them are locating the elements or writing the Xpath without using any extensions. If you want to do so in chrome browser then the Chrome browser provides a set of tools or panels like Element, Console, Network, Performance, Memory and Security Etc. So as we are going to use the developer tool to locate the elements so for that 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:

1. Open a web page in the browser and press the “F12” function key.
2. You can also use the shortcut key of the keyboard which is “CTRL + SHIFT +I”.
3. Right-click on the browser and select the Inspect option.

We have written an article also regarding how you can find an element without using any extension, you can follow the article here.

For Helping the Testing Community so many Developers have developed so many extensions and by using those extensions you can easily find the Element and also it highlights the elements which match the XPath. In this post, we are going to share some of the common and popular which are widely used by the testers.

If you want to know how to use those extensions then you can follow the below tutorials links forget an idea about how to use the poplar extensions.

But if you are good at writing custom Xpath then you can write your own Xpath without using any of the 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 which are widely used by the testers to find the Xpath for your webElemeents. I hope after reading all the above extensions implementation you get an idea. But still, we recommend you people try to install all those extensions and try hands-on those extensions. Let us know in the comment section which Extensions you like user-friendly and why you like that most.

Still there are 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 then you can mention that in the comment section and we try to update that in our post.