What's XPath?
Assuming we want to search or check a document/file in your laptop, we can just open up your file explorer and key in the file path to navigate to the document, Example: C://Users/Documents/NotesonXPath.docx
So does the XPath. Also called as XML Path is a language to query XML documents. Which is an important strategy to locate elements in selenium. It uses path expressions along with some conditions, which are similar to your file path, to search, select or navigate to a specific element(s) in your HTML documents, Example, //*[name()='path']
Here are the different types of XPaths in Selenium:
- Absolute Path
- Relative Path
Let's assume we've below HTML structure -
<!DOCTYPE html>
<html>
<head>...</head>
<body>
...
<form id="loginForm">
<input name="name" type="text" value="First Name" />
<input name="name" type="text" value="Last Name" />
<input name="email" type="text" value="Business Email" />
<input name="password" type="password" />
<input name="continue" type="submit" value="Sign Me Up" />
</form>
</body>
</html>
Below are examples to use XPath to locate element(s) on this web page:
//* = chooses all elements in the web page.
html/body/form/input[3] = Absolute Path
//form/input[3] = Relative Path
//form[@id='loginForm']/input[3] = Using Attributes
//input[@id='name' or @name='name'] = Using Logical Operators
//a[text()='Click Me'] OR //*[text()='Click Me'] = Using Text
Whats CSS Selectors?
CSS (Cascading Style Sheet), in simple terms, if HTML is the skeleton, then CSS is the muscles and the skin, and JavaScript is the brain.
In general, CSS files are the layout and design for a web page. From the placement of images and text to the font size and background colour, CSS controls the way these HTML elements display in a browser.
Here are the different types of CSS Selectors used in Selenium:
- ID
- Class
- Attribute
- Sub-String
- Inner String
<HTML tag><#><Value of ID attribute> = ID
<HTML tag><.><Value of Class attribute> = Class
<HTML tag><[attribute=Value of attribute]> = Attribute
<HTML tag><[attribute^=prefix of the string]> = Sub-String
<HTML tag><:><contains><(text)> = Inner-String
Tool generally used to extract XPath, CSS Selectors from the WebPage -
SelectorsHub
What's SelectorsHub?
It's Next-Gen XPath tool to generate, write and verify the XPath and CSS selectors.
It is the very first and the only innovation which auto-suggests values and supports shadow dom.
Inventor and Creator of SelectorsHub - Sanjay Kumar
He is the inventor of the Chropath which was an XPath DevTool - revolutionizing UI Automation and Web Development
It was a must-have tool for Selenium users, UI automation testers and engineers, and web developers. ChroPath had won in comparison to other similar extensions available such as FirePath, XPath Finder and many more.
Now, Sanjay has stopped working on ChroPath and is working only on SelectorsHub!
Supported Browsers - Chrome, Firefox, Edge and Opera
Download Link- selectorshub.com
Video tutorial - youtube.com/watch?v=2gH5c97j2GU&feature..
Detailed description - selectorshub.com/what-is-selectorshub
It has some great features like -
- Helps you to improve - XPath and CSS selectors writing skills.
- It Auto-Suggests all the possible XPath and CSS selector functions while typing like a smart editor along with their occurrences to complete Selectors quickly. Now we may need not to copy-paste attribute values from DOM anymore to build any XPath/CSS selector.
All these can happen in less than 5 seconds!
- Its the only tool which supports ShadowDOM, in fact even Chrome DevTools doesn’t support ShadowDOM. Now one can write the selectors for ShadowDOM elements easily and can also be verified in SelectorsHub.
- Gives up a proper error message if any invalid syntax.
For example, in the below image the tool shows up Square bracket missing and Invalid XPath!
- Also supports iframe, frame and SVG elements.
For SVG the tool also gives the information if the element is an SVG or an SVG child.
- It suggests all the possible attribute combinations of text, following siblings, preceding siblings, its parents, its children, its ancestors, its descendants, etc. while typing selector.
- Generates all types of possible selectors just in a single click along with their occurrences.
- We can also, Copy selector value directly from the context menu, instead of opening the DevTools or SelectorsHub anymore.
- It has a Feature to customise contextMenu (disable or enable)
- Also gives the index-based XPath in the auto-suggest tab.
- It has a feature to generate a selector with the desired attribute.
- Also, Generates selectors with driver command.
- We can Customise the SelectorsHub UI as we want and all the config details will be saved in the local system, so when a user opens it next time we can have all the config details in it.
- To Copy/Edit the Selector's value, we can just click on the Copy/Edit icon and perform actions.
- Gives a total number of matching elements/nodes and also highlights all the matching nodes for the respective web page.
- Scrolls up the web element in the viewable area if it is NOTin the viewable area.
- Generates most optimised XPath and CSS selector compared to any other XPath tool.
Best Feature - Supports all the browsers with similar functionality.
Usage SelectorsHub.
Its very Simple to Use -
- Navigate to - DevTools.
- At the bottom right side, the last sidebar tab is SelectorsHub. Just click on it.
- Here, it shows all possible selectors for the inspected element. For whichever element user wants to generate, we can just inspect and the tool generates all possible selectors for the one.
- SelectorsHub will automatically suggest all attributes and everything complete Selectors quickly. Now you need not copy and paste attribute values anymore. With this, you can save a huge amount of time.
A very big thanks to Sanjay for this great tool which is a saviour for any Automation Tester.
Most of the articles I write is to share my knowledge. I hope that the content I write here is useful for you too.
Thank You for Reading! Happy Automation :)