Testing With Selenium WebDriver (68 Blogs) Become a Certified Professional
AWS Global Infrastructure

Software Testing

Topics Covered
  • Testing With Selenium WebDriver (58 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

New Features of ChroPath for XPath and CSS Selectors

Last updated on May 22,2019 1.3K Views
A tech enthusiast in Java, Image Processing, Cloud Computing, Hadoop. A tech enthusiast in Java, Image Processing, Cloud Computing, Hadoop.
8 / 8 Blog from Locators and Waits in Selenium

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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.

Below are the topics to be covered in this article:

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.Chropath extension - New Features of Chropath - Edureka
  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
}
}

On executing the above code, given email address will be entered in the email text box. That’s how it works. It is very simple as it reduces the manual work of searching XPath and CSS Selectors.

You can also use ChroPath extension for Mozilla Firefox as well. Working of ChroPath remains the same. This brings us to the end of this article on New Features of ChroPath for XPath and CSS Selectors. I hope it helped you and added value to your knowledge.

If you wish to learn Selenium and build a career in the testing domain, then check out our interactive, live-online Selenium Certification Training here, that comes with 24*7 support to guide you throughout your learning period.

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.

Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.