| Introduction to Selenium |
|---|
| Introduction to Automation Testing |
|---|
| Selenium WebDriver Basics |
|---|
| Understanding WebDriver |
|---|
| First Selenium Script |
|---|
| Locating Web Elements |
|---|
| WebDriver Commands |
|---|
| Advanced Web Element Interaction |
|---|
| Synchronization in Selenium |
|---|
| Implicit Wait |
|---|
| Fluent Wait |
|---|
| Working with Different Browsers |
|---|
| Setting up WebDriver for different browsers |
|---|
| Cross-Browser Testing |
|---|
| Handling Advanced User Interactions |
|---|
| Mouse Actions |
|---|
| Keyboard Actions |
|---|
| Page Object Model (POM) |
|---|
| Introduction to POM |
|---|
| Implementing POM |
|---|
| TestNG Framework |
|---|
| Introduction to TestNG |
|---|
| Creating and Running TestNG Tests |
|---|
Locating web elements using CSS Selectors in Selenium is a powerful method due to its flexibility and precision. CSS Selectors allow you to pinpoint elements in a variety of ways, including by tag name, class, ID, attributes, and more. Here’s a detailed explanation with examples:
1. Basic CSS Selector Syntax
- Tag Name: Selects all elements of a given tag.
tagname
Example: Select all ‘<div>‘ elements.
div
- Class: Selects all elements with a specific class.
.classname
Example: Select all elements with class ‘header‘.
.header
- ID: Selects a single element with a specific ID.
#id
Example: Select an element with ID ‘main‘.
#main
2. Combining Selectors
- Tag and Class: Selects elements of a specific tag with a specific class.
tagname.classname
Example: Select all ‘<button>‘ elements with class ‘submit‘.
button.submit
- Tag and ID: Selects the element of a specific tag with a specific ID.
tagname#id
Example: Select the ‘<div>‘ element with ID ‘content‘.
div#content
3. Attribute Selectors
- Attribute: Selects elements with a specific attribute.
[attribute]
Example: Select all elements with a ‘data-role‘ attribute.
[data-role]
- Attribute Equals: Selects elements with a specific attribute and value.
[attribute="value"]
Example: Select all elements with ‘type="text"‘.
[type="text"]
- Attribute Contains: Selects elements whose attribute contains a value.
[attribute*="value"]
Example: Select all elements with a class containing ‘btn‘.
[class*="btn"]
4. Hierarchical Selectors
- Descendant: Selects all elements that are descendants of a specified element.
ancestor descendant
Example: Select all ‘<span>‘ elements inside ‘<div>‘ elements.
div span
- Child: Selects all elements that are direct children of a specified element.
parent > child
Example: Select all ‘<li>‘ elements that are direct children of ‘<ul>‘.
ul > li
- Adjacent Sibling: Selects an element that is immediately preceded by a specified element.
previous + next
Example: Select the ‘<label>‘ immediately following an ‘<input>‘.
input + label
- General Sibling: Selects all elements that are siblings of a specified element.
previous ~ siblings
Example: Select all ‘<p>‘ elements that are siblings of a ‘<div>‘.
div ~ p
5. Pseudo-Classes
- First Child: Selects the first child of a specified element.
:first-child
Example: Select the first ‘<li>‘ element.
li:first-child
- Last Child: Selects the last child of a specified element.
:last-child
Example: Select the last ‘<li>‘ element.
li:last-child
- Nth Child: Selects the nth child of a specified element.
:nth-child(n)
Example: Select the third ‘<li>‘ element.
li:nth-child(3)
Selenium Examples
Here's how you can use these CSS selectors in Selenium:
from selenium import webdriver
# Initialize the webdriver
driver = webdriver.Chrome()
# Open a webpage
driver.get('https://example.com')
# Locate elements using different CSS selectors
# By tag name
elements = driver.find_elements_by_css_selector('div')
# By class name
elements = driver.find_elements_by_css_selector('.header')
# By ID
element = driver.find_element_by_css_selector('#main')
# By attribute
elements = driver.find_elements_by_css_selector('[data-role]')
# By attribute equals
elements = driver.find_elements_by_css_selector('[type="text"]')
# By attribute contains
elements = driver.find_elements_by_css_selector('[class*="btn"]')
# By descendant
elements = driver.find_elements_by_css_selector('div span')
# By child
elements = driver.find_elements_by_css_selector('ul > li')
# By adjacent sibling
element = driver.find_element_by_css_selector('input + label')
# By general sibling
elements = driver.find_elements_by_css_selector('div ~ p')
# By first child
element = driver.find_element_by_css_selector('li:first-child')
# By last child
element = driver.find_element_by_css_selector('li:last-child')
# By nth child
element = driver.find_element_by_css_selector('li:nth-child(3)')
# Close the driver
driver.quit()
These examples should help you get started with locating elements using CSS selectors in Selenium. Each method provides a different way to target elements, giving you flexibility in navigating and interacting with the DOM.
