Selenium WebDriver

Day 12: Advanced Selenium Locators & CSS Selectors

Deep dive into CSS Selectors, XPath axes, and advanced element location techniques in Selenium WebDriver

Today's Learning Objectives

Advanced CSS Selectors

• CSS Selector syntax variations
• Attribute-based selectors
• Dynamic element location
• Parent-child relationships

XPath Mastery

• XPath axes in detail
• Real-world XPath examples
• Interview preparation
• Best practices and tips

Selenium Locators Review

8 Types of Locators

Basic Locators

1. id - Fastest and most reliable
2. name - Uses name attribute
3. className - Uses class attribute
4. tagName - Uses HTML tag

Advanced Locators

5. linkText - Complete link text
6. partialLinkText - Partial link text
7. cssSelector - CSS-based selection
8. xpath - XML path expressions

Purpose: Locators are used to locate elements/objects in web pages such as text boxes, radio buttons, dropdowns, checkboxes, links, images, calendars, frames, popups, etc.

Advanced CSS Selector Techniques

CSS Selector Syntax Variations

Basic Selectors

By ID: #idValue
By Class: .className
By Tag: tagName

Combined Selectors

Tag + Class: tagName.className
Tag + ID: tagName#idValue
Multiple Classes: .class1.class2.class3

// CSS Selector Examples

driver.findElement(By.cssSelector("#yesRadio")).click();
driver.findElement(By.cssSelector(".custom-control-input")).click();
driver.findElement(By.cssSelector("input")).click();
driver.findElement(By.cssSelector("input.form-control")).sendKeys("text");

Attribute-Based Selectors

Basic Attribute Selector

Use square brackets to select elements by attributes:

tagname[attributeKeyName='value']

Dynamic Element Selectors

Starts with (^): When starting characters are constant

tagname[attribute^='StartingConstantValue']

Ends with ($): When ending characters are constant

tagname[attribute$='EndingConstantValue']

Contains (*): When characters are constant anywhere

tagname[attribute*='constantValue']

// Real Examples

input[type='email']
input[name='firstname']
input[id^='u_0_8']
input[id*='u_0_8']

Parent-Child Relationship Selectors

Ancestor-Descendant Selection

Use space to select child elements within parent elements:

parentTagname childTagname
parentTagname childTagname.className
parentTagname childTagname#idValue
parentTagname childTagname[attribute='value']

// Complex Parent-Child Examples

div.FPdoLc.lJ9FBc center input[name='btnK']
.FPdoLc.lJ9FBc center input[class='gNO89b']
.FPdoLc.lJ9FBc center input[value='Google Search']
#eid input

Handling Multiple Class Names

Important Note

When multiple class names are present, replace spaces with dots. You can use any one class name or combine multiple classes for more specific targeting.

// Multiple Class Examples

.ng-touched
.form-control.ng-pristine.ng-valid.ng-touched
input.form-control.ng-pristine.ng-untouched
.submit.button

XPath Axes Deep Dive

XPath Axes Overview

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

Navigation Axes

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

Relationship Axes

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

Real-World XPath Examples

Absolute vs Relative XPath

Absolute XPath Examples:

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

Relative XPath Examples:

//input[@id='yesRadio']
(//input[@name='like'])[1]
//label[text()='Yes']/parent::div/child::input

Interview Tip

Be prepared to write at least 2 XPath expressions for real-time websites during interviews.Practice with popular sites like Facebook, Google, Amazon, etc.

Practical Implementation Examples

Facebook Registration Form

// Facebook form automation

ChromeDriver driver = new ChromeDriver();
driver.get("https://www.facebook.com/reg");

// Using CSS Selectors
WebElement monthDropdown = driver.findElement(By.cssSelector("#month"));
Select sel = new Select(monthDropdown);
sel.selectByVisibleText("Feb");

Copyright Registration Form

// Multiple dropdown handling

driver.get("https://copyright.gov.in/UserRegistration/frmNewUser.aspx");

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

// Country dropdown
WebElement countryDropdown = driver.findElement(By.cssSelector("select#ctl00_ContentPlaceHolder1_ddlCountry"));
Select countrySelect = new Select(countryDropdown);
countrySelect.selectByValue("80");

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

Day 12 Knowledge Check

Question 1 of 5

Which CSS selector syntax is used to select elements that start with a specific value?

Practice Assignments

🎯 Assignment 1: Registration Form Automation

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

Use CSS selectors for all form fields
Fill first name, last name, address
Enter email and phone number
Select gender and hobbies
Select Skills dropdown (Java)
Select Date, Month, Year dropdowns
Enter and confirm password
Submit the form

🎯 Assignment 2: E-commerce Automation

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

Login using CSS selectors
Select "Price (high to low)" from sort dropdown
Click first "Add to cart" button
Navigate to cart and checkout
Fill checkout form using attribute selectors
Complete the purchase flow

🎯 Assignment 3: XPath Practice

Task: Create XPath expressions for popular websites

Write 5 different XPath expressions for Google search
Create relative XPath for Facebook login elements
Use XPath axes (parent, child, sibling) in real scenarios
Practice both absolute and relative XPath approaches

Key Takeaways

CSS Selector Mastery

Basic: #id, .class, tagName
Combined: tag.class, tag#id
Attribute: [attribute='value']
Dynamic: ^, $, * operators

XPath Axes

Navigation: following, preceding, sibling
Relationship: parent, child, ancestor, descendant
Best Practice: Use relative XPath for flexibility
Interview Prep: Practice real-world examples

Advanced Techniques

Multiple Classes: Replace spaces with dots
Parent-Child: Use space for descendant selection
Dynamic Elements: Use partial matching
Complex Selectors: Combine multiple techniques

Best Practices

Prefer ID: Most reliable and fastest
CSS over XPath: Better performance
Relative XPath: More maintainable
Attribute Selectors: For dynamic content

💡 Master these advanced locator techniques as they're essential for handling complex web applications. Day 13 will focus on practical form automation and element interactions!

Selenium Locators Review

8 Types of Locators

Basic Locators

1. id - Fastest and most reliable
2. name - Uses name attribute
3. className - Uses class attribute
4. tagName - Uses HTML tag

Advanced Locators

5. linkText - Complete link text
6. partialLinkText - Partial link text
7. cssSelector - CSS-based selection
8. xpath - XML path expressions

Purpose: Locators are used to locate elements/objects in web pages such as text boxes, radio buttons, dropdowns, checkboxes, links, images, calendars, frames, popups, etc.

Advanced CSS Selector Techniques

CSS Selector Syntax Variations

Basic Selectors

By ID: #idValue
By Class: .className
By Tag: tagName

Combined Selectors

Tag + Class: tagName.className
Tag + ID: tagName#idValue
Multiple Classes: .class1.class2.class3

// CSS Selector Examples

Attribute-Based Selectors

Basic Attribute Selector

Use square brackets to select elements by attributes:

tagname[attributeKeyName='value']

Dynamic Element Selectors

Starts with (^): When starting characters are constant

tagname[attribute^='StartingConstantValue']

Ends with ($): When ending characters are constant

tagname[attribute$='EndingConstantValue']

Contains (*): When characters are constant anywhere

tagname[attribute*='constantValue']

// Real Examples

input[type='email']
input[name='firstname']
input[id^='u_0_8']
input[id*='u_0_8']

Parent-Child Relationship Selectors

Ancestor-Descendant Selection

Use space to select child elements within parent elements:

parentTagname childTagname
parentTagname childTagname.className
parentTagname childTagname#idValue
parentTagname childTagname[attribute='value']

// Complex Parent-Child Examples

div.FPdoLc.lJ9FBc center input[name='btnK']
.FPdoLc.lJ9FBc center input[class='gNO89b']
.FPdoLc.lJ9FBc center input[value='Google Search']
#eid input

Handling Multiple Class Names

Important Note

When multiple class names are present, replace spaces with dots. You can use any one class name or combine multiple classes for more specific targeting.

// Multiple Class Examples

.ng-touched
.form-control.ng-pristine.ng-valid.ng-touched
input.form-control.ng-pristine.ng-untouched
.submit.button

XPath Axes Deep Dive

XPath Axes Overview

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

Navigation Axes

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

Relationship Axes

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

Real-World XPath Examples

Absolute vs Relative XPath

Absolute XPath Examples:

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

Relative XPath Examples:

//input[@id='yesRadio']
(//input[@name='like'])[1]
//label[text()='Yes']/parent::div/child::input

Interview Tip

Be prepared to write at least 2 XPath expressions for real-time websites during interviews.Practice with popular sites like Facebook, Google, Amazon, etc.

Practical Implementation Examples

Facebook Registration Form

// Facebook form automation

Copyright Registration Form

// Multiple dropdown handling

Practice Assignments

🎯 Assignment 1: Registration Form Automation

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

Use CSS selectors for all form fields
Fill first name, last name, address
Enter email and phone number
Select gender and hobbies
Select Skills dropdown (Java)
Select Date, Month, Year dropdowns
Enter and confirm password
Submit the form

🎯 Assignment 2: E-commerce Automation

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

Login using CSS selectors
Select "Price (high to low)" from sort dropdown
Click first "Add to cart" button
Navigate to cart and checkout
Fill checkout form using attribute selectors
Complete the purchase flow

🎯 Assignment 3: XPath Practice

Task: Create XPath expressions for popular websites

Write 5 different XPath expressions for Google search
Create relative XPath for Facebook login elements
Use XPath axes (parent, child, sibling) in real scenarios
Practice both absolute and relative XPath approaches

Key Takeaways

CSS Selector Mastery

Basic: #id, .class, tagName
Combined: tag.class, tag#id
Attribute: [attribute='value']
Dynamic: ^, $, * operators

XPath Axes

Navigation: following, preceding, sibling
Relationship: parent, child, ancestor, descendant
Best Practice: Use relative XPath for flexibility
Interview Prep: Practice real-world examples

Advanced Techniques

Multiple Classes: Replace spaces with dots
Parent-Child: Use space for descendant selection
Dynamic Elements: Use partial matching
Complex Selectors: Combine multiple techniques

Best Practices

Prefer ID: Most reliable and fastest
CSS over XPath: Better performance
Relative XPath: More maintainable
Attribute Selectors: For dynamic content

💡 Master these advanced locator techniques as they're essential for handling complex web applications. Day 13 will focus on practical form automation and element interactions!

Today's Learning Objectives

Advanced CSS Selectors

XPath Mastery

Selenium Locators Review

8 Types of Locators

Basic Locators

Advanced Locators

Advanced CSS Selector Techniques

CSS Selector Syntax Variations

Basic Selectors

Combined Selectors

Attribute-Based Selectors

Basic Attribute Selector

Dynamic Element Selectors

Parent-Child Relationship Selectors

Ancestor-Descendant Selection

Handling Multiple Class Names

Important Note

XPath Axes Deep Dive

XPath Axes Overview

Navigation Axes

Relationship Axes

Real-World XPath Examples

Absolute vs Relative XPath

Interview Tip

Practical Implementation Examples

Facebook Registration Form

Copyright Registration Form

Day 12 Knowledge Check

Which CSS selector syntax is used to select elements that start with a specific value?

Practice Assignments

🎯 Assignment 1: Registration Form Automation

🎯 Assignment 2: E-commerce Automation

🎯 Assignment 3: XPath Practice

Key Takeaways

CSS Selector Mastery

XPath Axes

Advanced Techniques

Best Practices

SDET Mastery

Today's Learning Objectives

Advanced CSS Selectors

XPath Mastery

Selenium Locators Review

8 Types of Locators

Basic Locators

Advanced Locators

Advanced CSS Selector Techniques

CSS Selector Syntax Variations

Basic Selectors

Combined Selectors

Attribute-Based Selectors

Basic Attribute Selector

Dynamic Element Selectors

Parent-Child Relationship Selectors

Ancestor-Descendant Selection

Handling Multiple Class Names

Important Note

XPath Axes Deep Dive

XPath Axes Overview

Navigation Axes

Relationship Axes

Real-World XPath Examples

Absolute vs Relative XPath

Interview Tip

Practical Implementation Examples

Facebook Registration Form

Copyright Registration Form

Day 12 Knowledge Check

Which CSS selector syntax is used to select elements that start with a specific value?

Practice Assignments

🎯 Assignment 1: Registration Form Automation

🎯 Assignment 2: E-commerce Automation

🎯 Assignment 3: XPath Practice

Key Takeaways

CSS Selector Mastery

XPath Axes

Advanced Techniques

Best Practices

SDET Mastery