Selenium - Locators: XPath, CSS selector, and their usage.

In previous blogs, we have covered most of the locators. Now we are going to discuss another important type of locator, XPath, and CSS selector. We can prefer these types because they allow us to write paths of web elements dynamically. This blog will explore the most common ways to write paths for web elements using XPath and CSS selectors.

XPath:

XPath helps in Identifying the path of the web element using attribute values from the DOM structure on the web page by writing XML/XPath expressions. To write paths of web elements, XPath has a standard expression to follow as shown below.

  • Before the tag name, we have to give this // sign which represents relative XPath.
  • We have to mention @ sign while writing any attribute names.

Case 1: Standard syntax for creating XPath is as follows.
Syntax:

//tagName[@attribute = ‘it’s associated value from DOM’]

Example:
We have taken an example for the text box web element, to locate its path we have written XPath for this as you can see highlighted areas in the below image.  In the dev tool, we can see HTML code for the text box web element. This allows us to use any attribute name and its value from the DOM structure when writing XPath. In the example, we have taken id an attribute, name as a value and input as a tag name to write XPath for web elements.
Image:

Code Snippet:

driver.findElement(By.xpath(“//input[@id='name']”));

Case 2:  XPath for web element using tag names with a parent-to-child traversing with tags.
Syntax:

//ParentTagName//ParentTagName//ChildTagName

Example:
In this example, we have taken reference Led text web element present on the page. For locating this web element, we have written XPath using tag names as seen in the below image and code snippet. See highlighted area, span is an actual/child tag for this Led text and div, div, h1 is a parental tag for this span tag name.
Image:

Code Snippet:

driver.findElement(By.xpath(“//div//div//h1/span”));

Case 3:  XPath for web elements with the help of index values.

We can use it when a web page is static, but if the position of the web element changes in the future, the index value may change as well.
Syntax:

(//tagName[@attribute = ‘it’s associated value from DOM’])[index value](//ParentTagName//ParentTagName/ChildTagName)[index value]

Example:
In the below Image and code snippet, we have taken an example of CAREERS web element highlighted in the image. In code snippets [1] and [6] represent index value. we have written two examples using above mention case which is traversing with tag names and standard syntax.
Image:

Code Snippet:

driver.findElement(By.xpath(“(//body//div//div//div//ul//li/a)[6]”));       
driver.findElement(By.xpath(“(//a[@title='CAREERS'])[1]”));

Case 4:  XPath to locate web element using a combination of the parent tag name, attribute, and its value and traversing to the child tag name, attribute, and its value.

There is more than one combination we can use to write XPath, hence there is  no specific syntax but we also can use sibling, parent, ancestor, etc. (for more ref use this link)
Syntax:

//parentTagName[@attribute=’it’s value’]//childTagName[@attribute=’it’s value’]

Example:
In this case, again we have taken CAREERS web element example. See highlighted area in the below image, so //ul[@class='ml-auto text-21 font-semibold navbarCss_list__xPFtz'] is a parental path for this web element and //a[@title='CAREERS'] is an actual exact path for this CAREERS web element.
Image:

Code Snippet:

driver.findElement(By.xpath(“//ul[@class='ml-auto text-21 font-semibold navbarCss_list__xPFtz']//a[@title='CAREERS']”));

Case 5:  XPath to locate web element using the actual Text of the web element given on the web page.
Syntax:

//tagName[contains(text(),’Text of Web Element’)]
//tagName[normalize-space()=’Text of Web Element’]

Example:
As shown in the below image, for writing an XPath locator for this WE ARE PLG web element with the help of the text present i.e., WE ARE PLG on the web page. In the code snippet, we can see two different ways to write XPath using the text of the web element. a is the tag name, instead of the attribute we can write contains(text(),or normalize-space()= with the text of the web element.  
Image:

Code Snippet:

driver.findElement(By.xpath(“//a[contains(text(),'WE ARE PLG')]”));
driver.findElement(By.xpath(“//a[normalize-space()='WE ARE PLG']”));

CSS Selector:

CSS selector locator is used in selenium to identify the location of web elements on a web page using CSS values/syntax. CSS (Cascading style sheet) locator is simple than XPath. CSS selector locator for web elements can be written more dynamically using DOM, similar to XPath locator, but with minor differences in syntax.
Case 1: Standard syntax for creating CSS selector is as follows.
Syntax:
tagName[attribute=’attribute associated value’]

Example:
In this case, again we have a text box example as explained in one of the above XPath examples. To locate the text box web element, we have written a CSS selector locator with the standard syntax. In the below code snippet input is the tag name. placeholder, name is the attribute names and Tell us your name, name is respective attribute values.  
Image:

Code Snippet:

driver.findElement(By.cssSelector(“input[placeholder='Tell us your name']”));
driver.findElement(By.cssSelector(“input[name='name']”));

Case 2:  CSS selector with id and class attribute to locate web element.

We can write the id and class attribute with the standard syntax but there is one more way as explained in an example. The id value must be preceded by #. In the class attribute, we have to place a .dot before the class value.
Syntax:

Id >>  tagName#id_attribute_value
Class >> tagName.class_attribute_value

Example:
In this case, we have taken the Tell us your name text box and TALK TO US web element example as shown in the below image. For locating these web elements, we wrote a CSS path using the id and class attribute as shown in the code snippet.
Image:

Code Snippet:

driver.findElement(By.cssSelector(“input#name”));
driver.findElement(By.cssSelector(“a.connectButton.text-fff.px-20.py-8.rounded-4.inline-block”));

Case 3: CSS path to locate web elements using tag names. (parent-to-child traversing of tags)
Syntax:
ParentTagName ParentTagName ChildTagName
we can use spaces or > between tag names.

Example:
The example given in the below image and code snippet is similar to the example explained for XPath in case 2, the difference we can see here is the name and tag names separated by spaces.
Image:

Code Snippet:

driver.findElement(By.cssSelector(“div div h1 span”));

Case 4: CSS path to locate web element using a combination involving parent tag, and child tag (parent-to-child traversing).
Syntax:
ParentTagName[attribute=’Value’] ChildTagName[attribute=’Value’]

Example:
The example given in the below image and code snippet is similar to the example explained for XPath in case 4, please refer.
Image:

Code Snippet:

driver.findElement(By.cssSelector(“ul[class='ml-auto text-21 font-semibold navbarCss_list__xPFtz'] a[title='CAREERS']”));

We can also write CSS paths using partial text see below code snippet for the same web element as shown in Image. The index value is not supported in CSS as we use in XPath but there are other methods in CSS. For more examples use this link.

driver.findElement(By.cssSelector("a[href*='career']")

Refer Link to know more about the Locators.

Ganesh Chavan

Ganesh Chavan

QA Test Engineer at PLGWorks.com