Know Everything About Finding XPath In Chrome For Selenium

xpath in chrome and selenium

If you are searching for how to find XPath in chrome for selenium, you have landed on the correct article.

The most powerful method for determining the placement of components on a web page is to use XPath. It is a query language that allows you to search and pick nodes from an XML document.

We propose that you practice finding XPath in the Chrome browser as much as possible because you will be required to locate XPath in the Chrome browser only when taking any company technical test.

If the elements are not identified by the generic locators like id, class, name, and so on, XPath is used to find them on the web page in Selenium automation.

End-to-End Testing on real iOS, Android Devices & Browsers

And so, in this article, let’s discuss:

  1. What XPath is?
  2. How to find XPath in chrome for Selenium?

What is XPath in Selenium?

In Selenium, an XML path is utilized to navigate the page’s HTML structure. It is a syntax or language for using XML path expression to find any element on a web page. 

For example, XPath may be used to find the location of any element on a webpage using the HTML DOM structure in both HTML and XML documents.

In Selenium, the basic XPath format is:

xpath=//tagname[@Attribute=’Value’]

How To Find Xpath In Chrome For Selenium?

The steps below will guide you on inspecting an element and finding the XPath of an element on a web page in Chrome for Selenium WebDriver script:

  1. Launch the Chrome browser and navigate to the URL or webpage.
  2. Hover the mouse over the desired element (object) on the web page, right-click on the element you are looking for XPath, and select “Inspect.”
  3. The elements panel will now appear on the right-hand side of the screen. The HTML code of the element will be highlighted in blue in this frame.
  4. In the panel, press ‘ctrl+F’ to enable DOM searching.
  5. In the panel, you can now use XPath to evaluate that element.
  6. If XPath matches any elements, they will be highlighted in yellow in the DOM.

First name XPath:

Step 1: Right-click on the element (First name) and select the inspect option, as shown below.

Step 2: You should now be able to see the HTML code for the “First name” element in the blue strip. As shown below, to enable DOM searching in the panel, press ‘ctrl+F’.

Step 3: Write the XPath of any element using the basic format. The XML path syntax determines the path of an element on a webpage. The following is the standard syntax for creating XPath:

XPath = //tagname[@Attribute = 'Value']

Here 

// ➨  It is used to select the current node in the entire document.

tag name ➨ It is the name of the tag of a particular node. For example, input.

@ ➨ It selects attributes like id, name, className, etc.

Attribute ➨ It is the node’s attribute name. For example, type, class, name, id, etc.

Value ➨ It is the value of an attribute.

In the same way, we can write XPath for different elements. Let’s see more examples.

1. XPath(Surname): //input[@name = ‘lastname’] (1 of 1 matched)
2. XPath(New password): //input[@data-type = ‘password’] (1 of 1 matched)
3. XPath(Female Radio button): //input[@id = ‘u_0_8’]
4. XPath(Sign Up): //button[@name = ‘websubmit’] 
5. XPath(Facebook logo): //img[@class = ‘fb_logo img sp_XWJdzZnoeA1 sx_ba923f’] 

Simple Steps to Find XPath in Microsoft Internet Explorer Browser:

Microsoft Internet Explorer, like Google Chrome, has an in-built feature for inspecting web page elements.

To view the HTML code of a component on a web page in Internet Explorer, follow the given steps:

  1. Pressing the F12 key will launch Developer Tools. The developer tools menu will be displayed.
  2. Click the pointer icon or press ‘Ctrl+Shift+C’ and move the cursor over the desired element on the page’s HTML code to inspect the element.
  3. The developer tool will highlight elements’ HTML code with a blue outline.

How To Find Xpath In Chrome For Selenium Webdriver?

  1. Basic XPath: An essential XPath expression determines nodes or a list of nodes based on attributes, such as Name, Id, Classname, etc.
  2. Contains(): Contains() is an XPath expression method. It is used when the value of any attribute, such as login information, changes dynamically.
  3. The element with partial text can be found using the contains() feature.
  4. Using OR(|) & AND(and) Operator: These operators can be applied in an XPath expression when two conditions are used to determine if either of the conditions is true. At least one of the conditions must be met to find the element.

“OR” is used when either of the condition is true.

“AND” is used when both are true.

  1. Xpath Starts-with(): It is a function used to find the web element whose attribute value changes when refreshes the page or other dynamic operations. The text at the start of the attributes’ value is matched in this method to find the element whose attribute value changes dynamically. You can also find elements with static attribute values.
  1. Text() Function in XPath:
    The XPath text() function is a selenium web driver built-in function used to locate elements based on the text of a web element. It aids in identifying specific text elements and the location of those elements within the set of text nodes. Therefore, the elements that need to be found should be in string form.

What are the XPath Axes in Selenium?

In Selenium, XPath uses Absolute and Relative paths to locate web elements. Furthermore, all web elements in the XML DOM are linked to one another via a hierarchical structure. 

For example, XPath provides “XPath Axis” attributes, which use the relationship between various nodes to locate those nodes in the DOM structure. 

1. Xpath Ancestor Axis:

In XPath, the ancestor axis helps to select all of the current node’s parent elements. It is helpful in situations where we can identify the child element node but not its parent or grandparent nodes. 

In such cases, we can use the child node as a reference point and the “ancestor” axis to identify the parent node.

Syntax
//tagname[@attribute ='Attribute_Value']/ancestor::parent_node

2. XPath Child Axis:

In XPath, the Child Axis is used to find all the child nodes of the current node. In contrast to the ancestor axis, the child axis helps locate elements if the parent element of the required node can be found.

Syntax
//tagname[@attribute ='Attribute_Value']/child::child_node

3. XPath Descendant Axis:

The Descendant Axis lets you access all of the current node’s children and sub-children. The main difference between a child axis and a descendant axis is that the child axis locates only immediate children nodes. In contrast, the descendant axis can locate children and grandchildren nodes.

Syntax
//tagname[@attribute ='Attribute_Value']/descendant::attribute

4. XPath Parent Axis:

The Parent Axis resembles the Ancestor Axis in appearance. It recognizes the current node’s immediate parent. 

The main distinction between parent and ancestor is that the ancestor axis will locate all upper hierarchical nodes, whereas the parent axis will only locate the immediate parent node.

Syntax
//tagname[@attribute ='Attribute_Value']/ancestor::parent_node

5. XPath Following Axis:

The elements after the current node can be located with the following axis. It sets the current node as the base and searches the DOM for the required element after the current node.

Syntax
//node[@attribute='value of attribute']/following::attribute

6. XPath Following-sibling Axis:

The following-sibling axis is similar to the Xpath following axis. Only sibling nodes, i.e., nodes on the same level as the current node, are recognized by the following sibling. 

For example, in the image below, both the highlighted “divs” are on the same level, i.e., are siblings, whereas the “div” just above them is the parent.

Syntax
//node[@attribute='value_of_attribute']/following-sibling::attribute

Read also: Challenges in Automation Testing

Top 10 XPath Finder Chrome Extensions

#01 SelectorsHub

In less than 5 seconds, XPath in Chrome and a CSS selector could be returned. The selector’s hub auto-suggests all attributes, text, and everything for quickly completing selectors. 

We no longer need to copy and paste attribute values from the DOM when creating XPath and CSS selectors. 

It also supports ShadowDOM, iframe, and SVG elements. Finally, because it is the only tool that helps shadow dom selectors, it also provides a proper error message indicating what is wrong with the XPath and CSS selector.

#02 XPath Helper

Using the XPath helper on any web page, we can easily select, edit, and evaluate XPath queries. 

It’s easy to use and has a more extensive user base than the other plugins on this list. So, for example, to write or edit XPath, we must first open the console by clicking on the extension.

#03 ChroPath

This extension generates and validates unique selectors, such as relative XPath, absolute XPath, CSS selectors, link text, and partial link text, with just one click. It makes writing, editing, extracting, and evaluating XPath queries on any web page a breeze.

#04 Scraper

It obtains information from web pages and into spreadsheets. It’s a simplified version of data mining that speeds up online analysis. 

It’s designed to be a simple tool for intermediate and advanced XPath users.

#05 Relative XPath Helper

Two web elements’ relative XPath expressions are defined using the relative XPath Helper. Then, simply right-click on the first and second elements to get the relative XPath.

#06 XPath Helper Wizard

XPath Helper Wizard creates short paths that don’t split as the website grows. For example, all XPaths linked to XPath are created if the XPath parent contains an XPath.

#07 XPath Finder

XPath Finder in Chrome DevTools locates XPath components. It highlights the corresponding elements with highlighted contours and context and records the XPath history.

#08 XPather

This add-on only affects the current document. The XPath 2.0 standard is supported. It displays the result and all of the matched nodes in the sidebar. The matched node can be found on the page by clicking on the sidebar.

#09 Eskry

It aids in the creation of locators for HTML elements using the point and grabs method. By clicking on any web element on your Web page, you can create an XPath/CSS Selector.

#10 Firebug Lite for Google Chrome

Firebug Lite isn’t a replacement for Firebug or Chrome developer tools. Instead, it provides a comprehensive view of HTML, DOM, and Box model shading components. It even looks for HTML components with the mouse.

Conclusion

In Selenium, XPath is one of the simplest ways to find WebElement positions. In XPath expressions, you can include highly complex and delicate artefacts. 

You must first define the WebElements and their actions before automating any web program. We hope this tutorial has covered all of the essential aspects of finding XPath in Chrome.

So now, Click here to know more about TestGrid.io, and also, to read more articles, head over to our blog section.

Frequently Asked Question (FAQs)

I want one web element of XPath through Chrome only. How can I find an XPath?

To find the XPath of an Element, use Chrome’s built-in Developer Tools.
1. Right-click the web element in Chrome and select Inspect.
2. It will launch the Developer tool with highlighted Element’s HTML code.
3. Copy Xpath by right-clicking the highlighted HTML.
4. Use the copied Xpath to locate this Element in Chrome later.

How do I get absolute XPath in Chrome?

To get the absolute XPath in Chrome, follow these steps:
1. Open the Chrome browser on your PC.
2. Open the particular URL of which you want to get absolute XPath.
3. Right-click on the logo and inspect it. It will highlight the HTML code of the web element.
4. Hover your mouse pointer on ‘Copy.’ Two options will appear: 
Copy selector: It will give you a CSS selector. 
Copy XPath: It will provide you with XPath.

What is the best XPath extension for Chrome?

There are a ton of chrome extensions available in the market today like SelectorsHub, RexPath, XPath Finder, XPath Helper, Scraper, Firebug Lite for Chrome, TruePath, XPath Helper Wizard, and many more.
You may choose anyone as almost each of these chrome extensions works the same way to serve individual purposes.

Leave a Reply

Your email address will not be published. Required fields are marked *

Sign-up for free and test your mobile app & website in a scriptless manner.

Exit mobile version