Understanding Locators in Selenium using Q&A and examples

What are locators in Selenium?

Locators in Selenium are used to identify and interact with web elements on a web page.

Types of locator are

ID, Name, Class Name, Tag Name, Link Text, Partial Link Text, CSS Selector, XPath

Compare CSS Selectors and xpath?

Syntax -

• CSS Selectors use a clean and concise syntax that is often more readable and easier to write.
• XPath uses a more verbose syntax that can be complex.

Performance -

• CSS is Generally faster in most browsers, especially that are optimized for CSS queries.
• XPath is slower compared to CSS, mainly when working with complex xpaths

Flexibility -

• Xpath scores in this aspect, as we can traverse upward in the DOM structure and relationship between the elements
• In CSS Selector, we can not traverse upward and is limited to select element based on CSS properties and hierarchy.

A page can have many elements, the order of preference should be Id, class Name(if unique), followed by CSS Selector, and finally Xpath where identification by above locators is not possible.

Examples of locating different Elements using CSS Selectors and Xpath

For Id:

driver.findElement(By.cssSelector("#elementId"));
driver.findElement(By.xpath("https://*[@id='elementId']"))        

For className:

driver.findElement(By.cssSelector(".className"));
driver.findElement(By.xpath("https://*[@class='className']"));        

Locating by element attribute:

driver.findElement(By.cssSelector("input[type='text']"));
driver.findElement(By.xpath("https://input[@type='text']"));        

Locating by partial attribute value for an element

driver.findElement(By.cssSelector("input[name*='part']"));
driver.findElement(By.xpath("https://input[contains(@name, 'part')]"));        

Locating by Child Element

driver.findElement(By.cssSelector("div > input"));
driver.findElement(By.xpath("https://div/input"));        

Locating by Descendant Element

driver.findElement(By.cssSelector("form input"));
driver.findElement(By.xpath("https://form//input"));        

Locating by Sibling Element

driver.findElement(By.cssSelector("label + input"));
driver.findElement(By.xpath("https://label/following-sibling::input"));        

Location by nth child

driver.findElement(By.cssSelector("ul > li:nth-child(2)"));
driver.findElement(By.xpath("(//ul/li)[2]"));        

Locating by text

css - Not supported
driver.findElement(By.xpath("https://button[text()='Submit']"));        

Combining multiple Elements

driver.findElement(By.cssSelector("div#container input, form input"));
driver.findElement(By.xpath(//input[@type='text'] | //input[@type='password']));        

Advanced CSS Selectors

 1. Find Element starting with: 
driver.findElement(By.cssSelector("input[name^='user']"));

2.  Find Element ending with: 
driver.findElement(By.cssSelector("input[name$='name']"));

3. Finding element based on multiple attributes
driver.findElement(By.cssSelector("input[type='text'][name='username']"));

4. nth-of-type
driver.findElement(By.cssSelector("ul > li:nth-of-type(2)"));

5. Not Selector
driver.findElement(By.cssSelector("input:not([type='submit'])"));

6. Adjacent Sibling
driver.findElement(By.cssSelector("h1 + p"));

7. General Sibling 
driver.findElement(By.cssSelector("h1 ~ p"));        

Advanced Xpath Selector

 1. Find Element starting with: 
  driver.findElement(By.xpath("https://input[starts-with(@name, 'user')]"));

2. Find Element with attribute containing value
driver.findElement(By.xpath("https://input[contains(@name, 'user')]"));

3. Find Element based on multiple conditions for the attributes
 driver.findElement(By.xpath("https://input[@type='text' and @name='username']"));

4. Use of indexing
 driver.findElement(By.xpath("(//input)[2]"));

5. Finding the ancestor element, div in this example
driver.findElement(By.xpath("https://input/ancestor::div"));

6. Finding previous sibling for the element. of type label in this example
driver.findElement(By.xpath("https://input/preceding-sibling::label"));

7. Finding previous sibling for the element. of type label in this example
driver.findElement(By.xpath("https://input/following-sibling::label"));        

Finding element using child parent relationship

Approach 1: 
// Find the child element
        WebElement childElement = driver.findElement(By.id("childElementId"));

        // Navigate to the parent element
        WebElement parentElement= childElement.findElement(By.xpath(".."));

        // Now find the target element relative to the parent element
        WebElement target= parentElement.findElement(By.className("target"));
        

using the helper method getParent

 // Find the child element
            WebElement childElement = driver.findElement(By.id("childElementId"));
            
            // Get the parent element using the helper method
            WebElement parentElement = getParent(childElement);
            
            // Example: Finding another element relative to the parent
            WebElement target = parentElement.findElement(By.className("tarClass"));        

How to find locator for element from developer toolbar

1. Go to developer toolbar by pressing F12 on the browser
2. Inspect element
3. It will identify the element and give locator for the element.
4. Ctrl + F and search for the css/xpath created for element and search the element