New Features of ChroPath for XPath and CSS Selectors

For automation testers, identifying elements and performing actions is an important task. To make it easier, the concept called Locators was introduced in Selenium. But manually locating elements is a cumbersome task due to the complexity of the DOM structure of a webpage. This is where ChroPath comes into the picture and eases the task of locating elements in Selenium. In this article on features of ChroPath, I will tell you how to use ChroPath for XPath and CSS Selectors.

If you want to master the concepts of Selenium by Certified Selenium Expert, you can check out the below video where these topics are covered on a broader gauge.

Let’s begin and understand what is XPath and CSS Selectors.

Introduction to XPath and CSS Selectors

XPath is a language that is used to query XML documents. It is an important strategy to locate elements in selenium. It also consists of a path expression along with some conditions. Here, you can easily write an XPath script/query to locate any element in the webpage. 

Now talking about CSS Selectors, it is mainly used to provide style rules for the web pages and you can use it for identifying one or more elements in the web page. CSS Selector is always the best possible way to locate complex elements in the page. If you wish to gain more insights on CSS Selectors, you can check out the blog on Locators in Selenium.

Now, let’s move further and understand what is ChroPath and what are its unique features.

What is ChroPath?

ChroPath is considered as a development tool to edit, inspect and generate XPath and CSS Selectors. On using ChroPath, it makes us easy to write, edit, extract and evaluate XPath and CSS queries on any webpage and saves at least 40–50% manual effort in automation script writing. ChroPath is the highest rated (4.6+) XPath tool. ChroPath is one of the extensions of Google chrome, which helps in debugging on UI elements. Most of the Software testing companies utilize this extension from Google for bringing up issues related to layers and UI/UX testing.

Features of ChroPath

• ChroPath opens as a sidebar tab in the dev tools panel.
• It is helpful to get the absolute XPath and CSS Selector of the element or selected node.
• ChroPath generates unique relative XPath and CSS Selector for the elements selected.
• It can also be used to verify XPath/CSS Selectors and allows you to view the matching node(s) in their sequential occurrence.
• In case, the matching element is not in the visible area of a web page, it will automatically scroll to the area on mouse hovering over the matching node.
• When verifying XPath, if you enter the XPath expression pattern incorrectly or incompletely it gets highlighted in red.

Now as you have gained some insights on ChroPath, let’s move further and understand the working of ChroPath along with examples.

Working of ChroPath

It mainly involves four pointers:

1. Add ChroPath extension to Google Chrome/Mozilla Firefox.
2. Inspect element and choose ChroPath.
3. Copy the required XPath and CSS Selector from ChroPath menu.
4. Execute the program.

Let’s briefly discuss the above four-pointers.

1. The very first step is to install or add the ChroPath extension. It is very simple as you just have to search ChroPath in google and add this plugin to your chrome as shown in the below figure.
2. Once you add the ChroPath extension, you just have to refresh the webpage and click on any element and choose Inspect. On choosing the ‘inspect’ tab, you will find ChroPath extension being added as shown in the figure.
3. Now, you can select the specified XPath or CSS Selector of the element you have chosen. In the below figure, I have inspected the yahoo login page, so I will be selecting XPath and CSS Selector from the ChroPath menu.
4. The last step is to simply copy the XPath and CSS Selector and paste it in your Java program and run the code. You will get the desired output.

package Edureka;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class CustomXpath {
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "C:Selenium-java-edurekachromedriver_win32chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.manage().deleteAllCookies();
driver.manage().timeouts().pageLoadTimeout(40, TimeUnit.SECONDS);
driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
driver.get("<a href="https://login.yahoo.com/">https://login.yahoo.com/</a>");
driver.findElement(By.xpath("//input[@id='login-username']")).sendKeys("edureka@yahoo.com"); //xpath for search box
driver.findElement(By.cssSelector("#login-username")).sendKeys("edureka@yahoo.com"); //CSS Selector for search box
}
}

Got a question for us? Please mention it in the comments section of New Features of Chropath for XPath and CSS Selectors article and we will get back to you.