Selenium WebDriver

Day 11: Selenium Locators & Dropdown Handling

Master Selenium locators (8 types), CSS Selector vs XPath, and dropdown handling with Select class

Today's Learning Objectives

Selenium Locators

• 8 types of locators in Selenium
• CSS Selector vs XPath comparison
• Absolute vs Relative XPath
• XPath axes and methods

Dropdown Handling

• Select class for dropdown handling
• selectByVisibleText(), selectByValue(), selectByIndex()
• Real-world dropdown examples
• Multiple dropdown interactions

Selenium Locators

8 Types of Locators in Selenium

What is a locator? Locator is used to locate the element or object in a web page.

Basic Locators

1. id - Fastest locator (unique identifier)
2. name - Uses name attribute
3. className - Uses class attribute
4. tagName - Uses HTML tag name

Advanced Locators

5. linkText - For complete link text
6. partialLinkText - For partial link text
7. CSS Selector - CSS-based selection
8. XPath - XML path expressions

🏆 Fastest Locator: ID locator is the fastest locator in Selenium

CSS Selector vs XPath

Comparison Overview

Aspect	CSS Selector	XPath
Direction	Forward direction only	Forward and backward direction
Speed	Faster	Slower
Shadow DOM	Can locate shadow elements	Cannot locate shadow elements
Methods	id, className, tagName	text(), contains(), axes, etc.

CSS Selector Syntax

Using ID (#)

// Syntax: #idValue
driver.findElement(By.cssSelector("#yesRadio")).click();

Using Class Name (.)

// Syntax: .className
driver.findElement(By.cssSelector(".custom-control-input")).click();

Using Tag Name

// Syntax: tagName
driver.findElement(By.cssSelector("input")).click();

Absolute vs Relative XPath

Absolute XPath

• Complete path from root node
• Starts with single forward slash (/)
• Faster execution
• Higher failure chances
• Changes with DOM structure

/html/body/div[2]/div/div/div/
div[2]/div[2]/div[2]/input

Relative XPath

• Start from any point in DOM
• Starts with double forward slash (//)
• Slower execution
• Lower failure chances
• More flexible and robust

//input[@id='yesRadio']
(//input[@name='like'])[1]

XPath Axes

XPath axes are used to locate elements in forward or backward direction from the current node.

Navigation Axes

following - All elements after current
preceding - All elements before current
following-sibling - Next siblings
preceding-sibling - Previous siblings

Relationship Axes

parent - Direct parent element
child - Direct child elements
ancestor - All parent elements
descendant - All child elements

// XPath Axes Examples
//label[text()='Yes']/parent::div/child::input
//input[@id='yesRadio']/following-sibling::label

Dropdown Handling in Selenium

Select Class Overview

Selenium provides the Select class to handle dropdown elements that use the <select> tag.

6 Ways to Handle Dropdowns

• selectByVisibleText()
• selectByValue()

• selectByIndex()
• deselectByVisibleText()

• deselectByValue()
• deselectByIndex()

Basic Dropdown Handling Steps

Open browser: ChromeDriver driver = new ChromeDriver();
Open URL: driver.get("https://www.facebook.com/reg");
Locate dropdown: WebElement wb = driver.findElement(By.cssSelector("#month"));
Create Select object: Select sel = new Select(wb);
Select option: sel.selectByVisibleText("Jun");

Dropdown Selection Methods

selectByVisibleText()

Selects option by the visible text displayed to user.

WebElement monthDropdown = driver.findElement(By.cssSelector("#month"));
Select sel = new Select(monthDropdown);
sel.selectByVisibleText("February");

selectByValue()

Selects option by the value attribute of the option tag.

sel.selectByValue("3"); // Selects March (value=3)

selectByIndex()

Selects option by its index position (0-based).

sel.selectByIndex(1); // Selects second option (index 1)

Real-world Example: Multiple Dropdowns

Example using copyright.gov.in registration form with Title, Country, and State dropdowns.

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class DropdownDemo {
    public static void main(String[] args) {
        ChromeDriver driver = new ChromeDriver();
        driver.get("https://copyright.gov.in/UserRegistration/frmNewUser.aspx");

        // Handle Title dropdown
        WebElement titleDropdown = driver.findElement(By.cssSelector("#ctl00_ContentPlaceHolder1_ddlTitle"));
        Select titleSelect = new Select(titleDropdown);
        titleSelect.selectByVisibleText("Mrs.");

        // Handle Country dropdown
        WebElement countryDropdown = driver.findElement(By.cssSelector("#ctl00_ContentPlaceHolder1_ddlCountry"));
        Select countrySelect = new Select(countryDropdown);
        countrySelect.selectByVisibleText("India");

        // Handle State dropdown
        WebElement stateDropdown = driver.findElement(By.cssSelector("#ctl00_ContentPlaceHolder1_ddlState"));
        Select stateSelect = new Select(stateDropdown);
        stateSelect.selectByValue("24");
    }
}

Day 11 Knowledge Check

Question 1 of 5

Which is the fastest locator in Selenium?

Practice Assignments

🎯 Assignment 1: Registration Form

URL: https://demo.automationtesting.in/Register.html

Fill first name and last name
Enter address, email, and phone number
Select gender and hobbies
Select Skills dropdown (Java)
Select Date, Month, and Year
Enter password and confirm password
Click submit button

🎯 Assignment 2: E-commerce Flow

URL: https://www.saucedemo.com/inventory.html

Login to the application
Select "Price (high to low)" from sort dropdown
Click on first "Add to cart" button
Click on cart container
Click on checkout button
Enter first name, last name, and zip code
Click continue and finish buttons

Key Takeaways

Locator Hierarchy

Fastest: id (unique, direct access)
Fast: name, className, tagName
Medium: linkText, partialLinkText
Flexible: CSS Selector, XPath

CSS Selector Syntax

ID: #idValue
Class: .className
Tag: tagName
Attribute: [attribute='value']

XPath Best Practices

Prefer Relative: More robust than absolute
Use Attributes: [@id='value'], [@class='value']
Text Methods: text(), contains(), starts-with()
Axes Navigation: parent, child, sibling

Dropdown Handling

Select Class: For <select> tag dropdowns
By Text: selectByVisibleText("Option")
By Value: selectByValue("optionValue")
By Index: selectByIndex(0) - zero-based

💡 Master these locator strategies and dropdown handling techniques as they're essential for Day 12 where we'll explore advanced element interactions and form handling!

Today's Learning Objectives

Selenium Locators

• 8 types of locators in Selenium
• CSS Selector vs XPath comparison
• Absolute vs Relative XPath
• XPath axes and methods

Dropdown Handling

• Select class for dropdown handling
• selectByVisibleText(), selectByValue(), selectByIndex()
• Real-world dropdown examples
• Multiple dropdown interactions

Selenium Locators

8 Types of Locators in Selenium

What is a locator? Locator is used to locate the element or object in a web page.

Basic Locators

1. id - Fastest locator (unique identifier)
2. name - Uses name attribute
3. className - Uses class attribute
4. tagName - Uses HTML tag name

Advanced Locators

5. linkText - For complete link text
6. partialLinkText - For partial link text
7. CSS Selector - CSS-based selection
8. XPath - XML path expressions

🏆 Fastest Locator: ID locator is the fastest locator in Selenium

CSS Selector vs XPath

Comparison Overview

Aspect	CSS Selector	XPath
Direction	Forward direction only	Forward and backward direction
Speed	Faster	Slower
Shadow DOM	Can locate shadow elements	Cannot locate shadow elements
Methods	id, className, tagName	text(), contains(), axes, etc.

CSS Selector Syntax

Using ID (#)

// Syntax: #idValue
driver.findElement(By.cssSelector("#yesRadio")).click();

Using Class Name (.)

// Syntax: .className
driver.findElement(By.cssSelector(".custom-control-input")).click();

Using Tag Name

// Syntax: tagName
driver.findElement(By.cssSelector("input")).click();

Absolute vs Relative XPath

Absolute XPath

• Complete path from root node
• Starts with single forward slash (/)
• Faster execution
• Higher failure chances
• Changes with DOM structure

/html/body/div[2]/div/div/div/
div[2]/div[2]/div[2]/input

Relative XPath

• Start from any point in DOM
• Starts with double forward slash (//)
• Slower execution
• Lower failure chances
• More flexible and robust

//input[@id='yesRadio']
(//input[@name='like'])[1]

XPath Axes

XPath axes are used to locate elements in forward or backward direction from the current node.

Navigation Axes

following - All elements after current
preceding - All elements before current
following-sibling - Next siblings
preceding-sibling - Previous siblings

Relationship Axes

parent - Direct parent element
child - Direct child elements
ancestor - All parent elements
descendant - All child elements

// XPath Axes Examples
//label[text()='Yes']/parent::div/child::input
//input[@id='yesRadio']/following-sibling::label

Dropdown Handling in Selenium

Select Class Overview

Selenium provides the Select class to handle dropdown elements that use the <select> tag.

6 Ways to Handle Dropdowns

• selectByVisibleText()
• selectByValue()

• selectByIndex()
• deselectByVisibleText()

• deselectByValue()
• deselectByIndex()

Basic Dropdown Handling Steps

Open browser: ChromeDriver driver = new ChromeDriver();
Open URL: driver.get("https://www.facebook.com/reg");
Locate dropdown: WebElement wb = driver.findElement(By.cssSelector("#month"));
Create Select object: Select sel = new Select(wb);
Select option: sel.selectByVisibleText("Jun");

Dropdown Selection Methods

selectByVisibleText()

Selects option by the visible text displayed to user.

WebElement monthDropdown = driver.findElement(By.cssSelector("#month"));
Select sel = new Select(monthDropdown);
sel.selectByVisibleText("February");

selectByValue()

Selects option by the value attribute of the option tag.

sel.selectByValue("3"); // Selects March (value=3)

selectByIndex()

Selects option by its index position (0-based).

sel.selectByIndex(1); // Selects second option (index 1)

Real-world Example: Multiple Dropdowns

Example using copyright.gov.in registration form with Title, Country, and State dropdowns.

Practice Assignments

🎯 Assignment 1: Registration Form

URL: https://demo.automationtesting.in/Register.html

Fill first name and last name
Enter address, email, and phone number
Select gender and hobbies
Select Skills dropdown (Java)
Select Date, Month, and Year
Enter password and confirm password
Click submit button

🎯 Assignment 2: E-commerce Flow

URL: https://www.saucedemo.com/inventory.html

Login to the application
Select "Price (high to low)" from sort dropdown
Click on first "Add to cart" button
Click on cart container
Click on checkout button
Enter first name, last name, and zip code
Click continue and finish buttons

Key Takeaways

Locator Hierarchy

Fastest: id (unique, direct access)
Fast: name, className, tagName
Medium: linkText, partialLinkText
Flexible: CSS Selector, XPath

CSS Selector Syntax

ID: #idValue
Class: .className
Tag: tagName
Attribute: [attribute='value']

XPath Best Practices

Prefer Relative: More robust than absolute
Use Attributes: [@id='value'], [@class='value']
Text Methods: text(), contains(), starts-with()
Axes Navigation: parent, child, sibling

Dropdown Handling

Select Class: For <select> tag dropdowns
By Text: selectByVisibleText("Option")
By Value: selectByValue("optionValue")
By Index: selectByIndex(0) - zero-based

💡 Master these locator strategies and dropdown handling techniques as they're essential for Day 12 where we'll explore advanced element interactions and form handling!

Today's Learning Objectives

Selenium Locators

Dropdown Handling

Selenium Locators

8 Types of Locators in Selenium

Basic Locators

Advanced Locators

CSS Selector vs XPath

Comparison Overview

CSS Selector Syntax

Using ID (#)

Using Class Name (.)

Using Tag Name

Absolute vs Relative XPath

Absolute XPath

Relative XPath

XPath Axes

Navigation Axes

Relationship Axes

Dropdown Handling in Selenium

Select Class Overview

6 Ways to Handle Dropdowns

Basic Dropdown Handling Steps

Dropdown Selection Methods

selectByVisibleText()

selectByValue()

selectByIndex()

Real-world Example: Multiple Dropdowns

Day 11 Knowledge Check

Which is the fastest locator in Selenium?

Practice Assignments

🎯 Assignment 1: Registration Form

🎯 Assignment 2: E-commerce Flow

Key Takeaways

Locator Hierarchy

CSS Selector Syntax

XPath Best Practices

Dropdown Handling

SDET Mastery

Today's Learning Objectives

Selenium Locators

Dropdown Handling

Selenium Locators

8 Types of Locators in Selenium

Basic Locators

Advanced Locators

CSS Selector vs XPath

Comparison Overview

CSS Selector Syntax

Using ID (#)

Using Class Name (.)

Using Tag Name

Absolute vs Relative XPath

Absolute XPath

Relative XPath

XPath Axes

Navigation Axes

Relationship Axes

Dropdown Handling in Selenium

Select Class Overview

6 Ways to Handle Dropdowns

Basic Dropdown Handling Steps

Dropdown Selection Methods

selectByVisibleText()

selectByValue()

selectByIndex()

Real-world Example: Multiple Dropdowns

Day 11 Knowledge Check

Which is the fastest locator in Selenium?

Practice Assignments

🎯 Assignment 1: Registration Form

🎯 Assignment 2: E-commerce Flow

Key Takeaways

Locator Hierarchy

CSS Selector Syntax

XPath Best Practices

Dropdown Handling

SDET Mastery