Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the primary difference between the XPath and CSS selector in Selenium?
There are some differences between the xpath and css selector. The format of xpath is //tagname[@attribute='value'] while the format of css selector is tagname[attribute='value'].
We can traverse both forward and backward in DOM, i.e we can move from parent to child element and also from child to the parent element with xpath. However for css, we can only traverse from parent to child and not vice-versa.
In terms of performance, css is better and faster, while xpath is on a slower side. An xpath can be of two types – absolute which starts from the root node and relative does not require to be started from the root.
To traverse to the nth element, we have to mention [n] in the xpath, where n is the index number. For css, we have to mention nth-of-type(n). For example, to get hold of the second li child of the parent ul, the css expression shall be ul li:nth-of-type(2). While xpath shall be ul/li[2].
We can create an xpath with the help of the visible text on the element by using the text() function, for example, //*[text()='Home'], which will identify the element having the text Home displayed on the page. This feature is not available in css.
We have the starts-with() function in xpath which is used to identify an element whose attribute value begins with a specific text. To deal with a similar scenario in css, we have to use the ^= symbol.
For example in css,
input[title^='qa']
For example in xpath,
//input[starts-with(@title, 'qa')].
[here input is the tagname and the value of the title attribute starts with qa].
We have the contains() function in xpath which is used to identify an element whose attribute value contains a partial text. To deal with a similar scenario in css, we use the *= symbol
For example in css,
input[title*='nam']
For example in xpath,
//input[contains(@title, 'nam')].
[here input is the tagname and the value of the title attribute contains nam].
With attribute id, css expression should be tagname#id. For example, input#loc [here input is the tagname and the loc is the value of the id attribute]. This rule does not apply to xpath.
With attribute class, css expression should be tagname.class attribute value. For example, input.xt [here input is the tagname and the xt is the value of the class attribute]. This rule does not apply to xpath.
Syntax
WebElement m = driver.findElement(By.xpath("//div[@class = 'loc']"));
WebElement n = driver.findElement(By.cssSelector("div[class = 'loc']"));Example
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import java.util.concurrent.TimeUnit;
public class LocatorXpathvsCss{
public static void main(String[] args) {
System.setProperty("webdriver.gecko.driver",
"C:\Users\ghs6kor\Desktop\Java\geckodriver.exe");
WebDriver driver = new FirefoxDriver();
//implicit wait
driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
//URL launch
driver.get("https://www.tutorialspoint.com/online_dev_tools.htm");
// identify element with xpath
WebElement m=driver.findElement(By.xpath("//span[@class = 'cat-title']"));
String str = m.getText();
// identify element with css
WebElement n=driver.
findElement(By.cssSelector("div.cat-punch-line span"));
String s = n.getText();
System.out.println("Text obtained from xpath : " + str);
System.out.println("Text obtained from css : " + s);
driver.quit();
}
}Output
4K+ Views
To Continue Learning Please Login