Xpath and css for Selenium Webdriver: Useful links and firepath

In one of the previous article, we discussed on how an element can be identified using different locators. Two of the generic element locators are using xpath and cssSelector.

Problem statement for this article:

• What is XPath and CSS Selectors?

• What are different tools to identify xpath or CSS for an element?
• Common interview questions around xpath and CSS?

• Common interview questions around xpath and CSS?

• Some excellent reference on the web explaining how to create Xpath/CSS Selectors?

What is XPath and CSS Selectors?

	Xpath	CSS Selectors
Stands for?	Xpath stands for XML Path language.	CSS stands for Cascading style sheets
Definition?	XPath is used to navigate through elements and attributes in an XML document.	CSS is a stylesheet language that describes the presentation of an HTML (or XML) document.
	XPath is syntax defining parts of an XML document. Xpath uses path expressions to navigate in XML documents	CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute,etc
	We can traverse parent elements from child elements and vice versa using xpath.	CSS is native to browsers while Xpath is not.
Syntax	driver.findElement(By.xpath(xpathExpression));	driver.findElement(By.cssSelector(CSSExpression));
Which locator expression is more readable	In terms of readability , CSS are more readable
Which locator is comparably faster?	In various studies, it is mentioned CSS to be comparably faster than Xpath
Which locator is the best?	Since Id is believed to be unique for an element and can help uniquely identify an element, it is always best to use Id locator for object identification, if defined.

What are different tools to identify xpath or css Selector?

Using F12 or Inspect Element: 

In most of the browsers, option to inspect element is available on pressing F12. Below image shows how to inspect elements in chrome browsers to inspect an element. Similarly we can inspect element in IE browser and firefox browser.

 

Using Firepath and Firebug: 

Using FirePath with firebug, we can evaluate the css/xpath for an element as well as generate CSS/ xpath for an element as shown in the below image.FirePath is helpful with following features.

• Generating xpath/css/sizzle for an element.
• Evaluating xpath/css/sizzle matches elements in the html.
• Viewing elements in the DOM tree structure.

Using Selenium IDE: 

When we record script on the AUT, all the elements recorded are identified based on element locators in the page. The test script recorded can be exported to different languages e.g: c#, Java.

The script generated can be used in tests also.

What is difference between "/" and "//" in X-path?

"/" is used to create ‘absolute’ path expressions from document node
"//" is used to create relative path expressions

Some excellent Reference materials available on understanding Xpath and CSS Selector are:

• Comparison between xpath and CSS Selectors.
• http://www.sinaru.com/2014/12/08/xpath-vs-css-selectors/

• Understand how to create xpath and CSS Selector

• http://www.w3schools.com/xsl/xpath_syntax.asp
• http://www.w3schools.com/cssref/css_selectors.asp
• https://www.simple-talk.com/dotnet/.net-framework/xpath,-css,-dom-and-selenium-the-rosetta-stone/ - The pdf documents for download in this article are excellent reference for creating xpath and CSS Selector.