• Selenium Features
• Selenium Installation
• Selenium Locators
• XPath Fundamentals
• CSS Selectors Methods
• Different Browsers Execution
• find_element & find_elements
• Check Enabled Status
• Check Displayed Status
• Check Selected Status
• Selenium Waits
• Send_keys Method
• Click Method
• Get Text
• Get Attribute Value
• Get Current URL
• Forward, Back, Refresh
• Take Screenshot
• Handle Browser Tabs
• Handle iframe
• Mouse Hover
• Context-Click
• Drag & Drop
• Handle Alerts
• Handle Dropdown
• Execute Javascript
• Scroll To element
• Headless Mode Execution
• Chrome Options
• Keyboard Action

CSS Selector in Selenium and Its Methods

Selenium is a powerful tool widely used to automate web applications for testing purposes. However, within Selenium, one of the key elements that make your automation effective is the ability to locate web elements accurately. Enter CSS Selectors – an efficient, flexible, and reliable way to identify elements in Selenium WebDriver. In this article, we’ll dive deep into CSS Selectors and their methods in Selenium.

Introduction to CSS Selectors

CSS (Cascading Style Sheets) Selectors are patterns used to select the content you want to style. In Selenium, CSS Selectors find HTML elements based on their CSS properties.

Why Use CSS Selectors in Selenium?

CSS Selectors offer several advantages: speed, simplicity, and compatibility. They allow you to quickly and effectively identify web elements, even those deeply nested within HTML code. This makes them ideal for locating complex elements that other strategies, like XPath, may struggle with.

CSS Selector vs. XPath: Which is Better?

Both CSS Selectors and XPath are popular choices in Selenium, but which is better? XPath is often considered more powerful due to its ability to navigate through both forward and backward elements. However, CSS Selectors are faster, and for front-end web developers, they are more familiar. CSS Selectors also work more seamlessly across different browsers.

Types of CSS Selectors in Selenium

CSS Selectors come in various forms, each suited for different use cases.

Basic CSS Selectors

• ID Selector
  The ID selector selects an element based on its unique ID attribute. For example: #username.
• Class Selector
  The class selector targets elements with a specific class attribute, written as: .login-button.
• Tag Selector
  The tag selector selects all elements of a particular type (e.g., div, h1). For example: div.

Advanced CSS Selectors

• Attribute Selector
  This selector selects elements based on an attribute and its value, like [type=’text’].
  
  Examples:
  input[id=’password’]
  input[name=’username’]
  span[data-testid=’facebook’]
  
  
• Substring Matches
  With substring selectors, you can target elements based on part of their attribute value. For example, a[href^='https'] matches all links that start with “https”.
  
  Examples:
  input[data-ui-name^=”input_text”]
  label[for^=”search_type_option”]
  button[data-ui-name^=”input_location_to”]
  

Methods to Use CSS Selectors in Selenium

Selenium provides methods to use CSS Selectors to interact with elements.

Finding Elements with findElement and findElements

• findElement:
  This method returns a single WebElement that matches the CSS Selector.
  
• findElements:
  Unlike findElement, this returns a list of all matching WebElements.

Differences Between findElement and findElements

findElement will throw an exception if no elements are found, whereas findElements returns an empty list in such cases, making it a safer option for handling multiple matches.

Writing Efficient CSS Selectors

Creating efficient CSS Selectors is essential to improving test speed and reliability.

Best Practices for Writing CSS Selectors

1. Keep it Simple: Avoid overcomplicating your selectors with too many attributes.
   
2. Use IDs and Classes: These are faster and more reliable.
   
3. Avoid Directly Using Styles: Use functional attributes rather than style-related ones for better maintainability.

CSS Selector Examples in Selenium

Using ID and Class Selectors

Example for ID Selector:

driver.find_element(By.CSS_SELECTOR, "#username").send_keys("user123");

Example for Class Selector:

driver.find_element(By.CSS_SELECTOR, ".login-button").click();

Example for Attribute Selector:

driver.find_element(By.CSS_SELECTOR,"input[type='password']").send_keys("mypassword");

Example for Substring Selector:

driver.find_element(By.CSS_SELECTOR,"a[href^='https']").click();

• Selenium Features
• Selenium Installation
• Selenium Locators
• XPath Fundamentals
• CSS Selectors Methods
• Different Browsers Execution
• find_element & find_elements
• Check Enabled Status
• Check Displayed Status
• Check Selected Status
• Selenium Waits
• Send_keys Method
• Click Method
• Get Text
• Get Attribute Value
• Get Current URL
• Forward, Back, Refresh
• Take Screenshot
• Handle Browser Tabs
• Handle iframe
• Mouse Hover
• Context-Click
• Drag & Drop
• Handle Alerts
• Handle Dropdown
• Execute Javascript
• Scroll To element
• Headless Mode Execution
• Chrome Options
• Keyboard Action

XPath Fundamentals

1. XPath Expression

• An XPath expression is a string of characters used to navigate through the document’s structure (XML/HTML).
  
• It works by selecting nodes in the document that match the given pattern.

2. Absolute XPath

• Definition: An absolute XPath starts from the root node (i.e., the top of the HTML document) and specifies the exact path to reach the target element.
  
• Syntax: Starts with a single slash / and navigates through each element in the hierarchy.
  
• Example: /html/body/div[1]/div[2]/input
  
• Pros: Simple to understand and write.
  
• Cons: Very brittle— if the structure of the page changes, the XPath breaks easily.

3. Relative XPath

Example:   //input[@id='username']

Common XPath Methods and Functions

1. Basic Syntax:

• //: Selects nodes in the document from the current node that match the selection, regardless of location.
  
• /: Selects nodes relative to the immediate current node.

2. Selecting by Attribute :

• Basic syntax : //tagname[@attribute=’attribute value’]
  
• Select elements based on their attributes using the @ symbol.
  
• Example: //input[@type=’text’]
  
• Finds an <input> element where the type attribute equals “text”.

Here are a few XPath examples from the Facebook login page.

• //button[@data-testid=”royal-login-button”]
• //div[@id=’reg_pages_msg’]
• //a[@data-testid=’open-registration-form-button’]

3. Selecting by Text Content Using text() Method:

• Basic syntax to write XPath with text method:
  //tagname[text()=’text value’]
• Use text() to find an element based on its inner text.
  Example:
• HTML code : <button class=’cotent’>Login </button>
• Selects a <button> element that contains the text "Login".

4. Partial Match Using contains() Method.

5. XPath Using And / or

6. Selecting by Index

7. Parent-Child Relationship

8. Selecting Parent or Ancestor Nodes

• Parent: //input[@id=’child’]/parent::div
• Selects the parent of the element with id=”child”.
• Ancestor: //input[@id=’child’]/ancestor::form
• Selects the ancestor element of the with id=”child”.

9. XPath Axes

• Axes refer to the relationship between nodes. These are useful for navigating around the document.

• following: Select all nodes after the current node.
  //input[@id=’username’]/following::input[1]
• Selects the first element after the with id=”username”.
• preceding: Select all nodes before the current node.
  //input[@id=’username’]/preceding::div[1]
• Selects the first element before the with id=”username”.
• following-sibling: Select sibling nodes that come after the current node.
  //input[@id=’username’]/following-sibling::input
• Selects the sibling the element that follows the with id=”username”.
• preceding-sibling: Select sibling nodes that come before the current node
  //input[@id=’password’]/preceding-sibling::input
• Selects the sibling element that precedes the with id=”password”.
  

XPath Examples in Selenium:

1. Selecting an element by ID using XPath

element = driver.find_element(By.XPATH, "//input[@id='username']")

2. Selecting an element by class name

element = driver.find_element(By.XPATH, "//div[@class='container']")

3. Selecting an element by text

element = driver.find_element(By.XPATH, "//button[text()='Submit']")

4. Using contains() in XPath

element = driver.find_element(By.XPATH, "//a[contains(text(), 'Login')]")

5. Selecting a parent element using XPath

element = driver.find_element(By.XPATH, "//span[@id='child']/parent::div")

Advanced XPath Concepts

1. Combining Multiple XPath Expressions

• Sometimes, you may need to combine different XPath conditions to locate elements effectively. This can be achieved using logical operators like and and or.
• Using and: Combines two conditions, and both must be true.
  //input[@type=’text’ and @name=’username’]
• This expression selects an element where type is “text” and name is “username”.
• Using or: Combines two conditions, where at least one must be true.
  //input[@type=’text’ or @type=’password’]
• This selects all elements where the type is either “text” or “password“.

2. Working with Dynamic Elements

• In many web applications, elements may have dynamically generated attributes (e.g., auto-generated id or class values that change with each page load). You can use partial matches with the contains() function to locate dynamic elements in such cases.
• Example with dynamic id: //button[contains(@id, ‘submit-‘)]
• This selects a element where the id contains “submit-“, useful when the full id changes dynamically. Handling Dynamic Classes: //div[contains(@class, ‘active-item’)]
• Selects any element that contains the class “active-item“, even if the class attribute has multiple class names.

3. Handling Complex HTML Structures

• Web pages often have deeply nested HTML structures, and finding elements buried several layers deep can be challenging. XPath can be used effectively to navigate through these structures.
• Example with complex hierarchy : //div[@class=’container’]//ul/li/a
• This selects any “<a>” element that is inside an <li> element, which is part of <ul> that is a descendant of a <div> with “container”
• The // allows searching for elements within all descendants of the specified node, not just direct children.
• Using position(): XPath also allows you to select elements based on their position in the document. (//div[@class=’container’]//ul/li)[2]

4. Working with Attributes that Don’t Have Values

• Sometimes, elements may have attributes without values, or you may need to select elements based on the presence of an attribute, regardless of its value.
• Example: //input[@disabled]
• This selects all elements that have the disabled attribute, regardless of its value.

5. Navigating Between Sibling Elements

• XPath supports navigating between sibling elements, which can be useful when dealing with repetitive structures, such as lists or tables.
• Select the next sibling element:
  //div[@class=’current’]/following-sibling::div[1]
• This selects the first element that is a sibling of the with class “current” and comes immediately after it.
• Select the previous sibling element:
  //div[@class=’current’]/preceding-sibling::div[1]
• This selects the first element that is a sibling of the with class “current” and comes immediately before it.

XPath Best Practices

1. Use Relative XPath over Absolute XPath

• While absolute XPath can pinpoint an element based on the full path from the root node, it is highly prone to breaking when the structure of the page changes. Relative XPath, on the other hand, starts searching from anywhere in the document and is more resilient to changes.
• Avoid: /html/body/div[2]/div[1]/form/input
• This will likely break if there’s even a slight change in the layout.
• Preferred: //form[@id=’loginForm’]//input[@name=’username’]

2. Optimize XPath for Performance

• XPath can sometimes be slow, especially on large or complex web pages. Using efficient XPath expressions can improve performance.
• Use Direct Conditions: //div[@class=’container’]//*[text()=’Submit’]
• Instead of searching broadly with multiple conditions, try to narrow down your search by providing direct attributes or shorter paths.
• Avoid Over-Using //: The // operator searches through all descendants and can be slower. Use it only when necessary and prefer a more specific hierarchy if possible.

• Selenium Features
• Selenium Installation
• Selenium Locators
• XPath Fundamentals
• CSS Selectors Methods
• Different Browsers Execution
• find_element & find_elements
• Check Enabled Status
• Check Displayed Status
• Check Selected Status
• Selenium Waits
• Send_keys Method
• Click Method
• Get Text
• Get Attribute Value
• Get Current URL
• Forward, Back, Refresh
• Take Screenshot
• Handle Browser Tabs
• Handle iframe
• Mouse Hover
• Context-Click
• Drag & Drop
• Handle Alerts
• Handle Dropdown
• Execute Javascript
• Scroll To element
• Headless Mode Execution
• Chrome Options
• Keyboard Action

Selenium offers several types of locators, each with its specific use case depending on how the element is defined in the HTML. Below are the most common Selenium locators and how to use each.

1. ID Locator

• Syntax: driver.find_element(By.ID, “element_id”)
  
• Use: When the HTML element has a unique id attribute.
  
• Example:
  element = driver.find_element(By.ID, “username”)
  element.send_keys(“user123”)
  
• Best Use Case: When an element has a unique ID, it is often the most reliable and fastest locator to use.

2. Name Locator

• Syntax: driver.find_element(By.NAME, “element_name”)
  
• Use: For locating elements use the name attribute in HTML.
  
• Example:
  element = driver.find_element(By.NAME, “email”)
  element.send_keys(“example@example.com”)
  
• Best Use Case: Useful when form elements (like input fields) have unique name attributes.

3. Class Name Locator

• Syntax: driver.find_element(By.CLASS_NAME, “class_name”)
  
• Use: To find an element based on the class attribute in the HTML.
  
• Example:
  element = driver.find_element(By.CLASS_NAME, “submit-button”) element.click()
  
• Best Use Case: When you want to locate elements that share the same class, like groups of buttons or text fields. However, it may not be ideal if multiple elements share the same class name.

4. Tag Name Locator

• Syntax: driver.find_element(By.TAG_NAME, “tag_name”)
  
• Use: For selecting elements by their HTML tag (like div, a, button, etc.).
  
• Example:
  element = driver.find_element(By.TAG_NAME, “button”) element.click()
  
• Best Use Case: Primarily used when you want to retrieve elements of a specific tag, e.g., collecting all a (link) tags on a page.

5. Link Text Locator

• Syntax: driver.find_element(By.LINK_TEXT, “link_text”)
  
• Use: Finds a link (anchor tag) by its exact text.
  
• Example:
  element = driver.find_element(By.LINK_TEXT, “Click here”) element.click()
  
• Best Use Case: When you’re searching for a hyperlink and you know the exact visible text of the link. This only works for a (anchor) tags.

6. Partial Link Text Locator

• Syntax:
  driver.find_element(By.PARTIAL_LINK_TEXT, “partial_link_text”)
• Use: Locates a link by matching a portion of the text contained within it.
• Example:
  element = driver.find_element(By.PARTIAL_LINK_TEXT, “Click”) element.click()
• Best Use Case: When the full link text is long or dynamic, and you want to match just a part of it. Like in cases where only part of the link text is known.

7. CSS Selector Locator

• Syntax:
  driver.find_element(By.CSS_SELECTOR, “css_selector”)
  
• Use: Uses CSS selectors to locate elements. CSS selectors are very powerful and can locate elements by their ID, class, attributes, or structure within the HTML.
  
• Example:
  element = driver.find_element(By.CSS_SELECTOR, “input[type=’text’]”)
  element.send_keys(“sample text”)
  
• Best Use Case: CSS selectors are highly versatile and can be used for complex locators. They are generally faster than XPath and allow targeting more specific elements.

Some common CSS selector examples:

• By class: “input.submit“
• By ID: “#submit-button“
• By attribute: “input[name=’username’]“

8. XPath Locator

• Syntax: driver.find_element(By.XPATH, “xpath_expression”)
  
• Use: XPath allows you to locate elements via their hierarchical position in the HTML DOM. It’s very powerful but also the most complex locator type.
  
• Example:
  element = driver.find_element(By.XPATH, “//input[@id=’username’]”) element.send_keys(“user123”)
  
• Best Use Case: Useful for locating elements when no other locator (ID, name, class, etc.) is unique enough. XPath can navigate through parent, child, and sibling elements.

Some XPath examples:

• By attribute: “//input[@id=’username’]”
• By position: “//div[1]/input[2]”
• Text-based: “//a[text()=’Login’]”

9. Custom Attribute Locators (with CSS or XPath)

• CSS Example:
  driver.find_element(By.CSS_SELECTOR, “[attribute=’value’]”)
  
• XPath Example:
  driver.find_element(By.XPATH, “//*[@attribute=’value’]”)
  
• Use: For elements that have custom attributes in the HTML.
  
• Example:
  element = driver.find_element(By.CSS_SELECTOR, “button[data-test=’submit’]”) element.click()
  
• Best Use Case: Useful when elements have custom data attributes, e.g., data-* attributes.

Summary of Locator Use Cases:

• ID: Fast and reliable if the element has a unique id.
  
• Name: Ideal for form elements with unique name attributes.
  
• Class Name: Great when classes are unique or used on a small number of elements.
  
• Tag Name: Useful for locating elements by their tag type.
  
• Link Text/Partial Link Text: Best for finding anchor elements with specific text.
  
• CSS Selector: Versatile and often the fastest way to locate complex elements.
  
• XPath: Powerful for locating elements that are deeply nested or don’t have unique attributes.

• Selenium Features
• Selenium Installation
• Selenium Locators
• XPath Fundamentals
• CSS Selectors Methods
• Different Browsers Execution
• find_element & find_elements
• Check Enabled Status
• Check Displayed Status
• Check Selected Status
• Selenium Waits
• Send_keys Method
• Click Method
• Get Text
• Get Attribute Value
• Get Current URL
• Forward, Back, Refresh
• Take Screenshot
• Handle Browser Tabs
• Handle iframe
• Mouse Hover
• Context-Click
• Drag & Drop
• Handle Alerts
• Handle Dropdown
• Execute Javascript
• Scroll To element
• Headless Mode Execution
• Chrome Options
• Keyboard Action

1. Python Installation

• Ensure you have Python installed on your system. You can download it from the official Python website.
  
  
• Verify the installation by running the following command in your terminal or command prompt.
  python –version
  
• If it returns the version number, Python is installed.
  

2. Install Selenium

• Open a terminal or command prompt and use the following pip command to install Selenium.
  
  pip install selenium
  

3. Run the First Selenium Script

from selenium import webdriver
from selenium.webdriver.common.by import By

# Launch a browser
driver = webdriver.Chrome()

# maximize browser window
driver.maximize_window()

#  set implicit wait for 20 sec.
driver.implicitly_wait(20)

# open a facebook URL in the browser
driver.get("https://www.facebook.com")

# send username to field
driver.find_element(By.NAME, "email").send_keys("TestAdmin")

# send password to passwordfield
driver.find_element(By.NAME, "pass").send_keys("Admin@12345")

# click on login button
driver.find_element(By.NAME, "login").click()

# close current browser
driver.close()

Execute script with Firefox

from selenium import webdriver
from selenium.webdriver.common.by import By

# Launch a Firefox browser
driver = webdriver.Chrome()

# maximize browser window
driver.maximize_window()

#  set implicit wait for 20 sec.
driver.implicitly_wait(20)

# open a facebook URL in the browser
driver.get("https://www.facebook.com")

# send username to email field
driver.find_element(By.NAME, "email").send_keys("TestAdmin")

# send password to password field
driver.find_element(By.NAME, "pass").send_keys("Admin@12345")

# click on to login button
driver.find_element(By.NAME, "login").click()

# close current browser
driver.close()

• Selenium Features
• Selenium Installation
• Selenium Locators
• XPath Fundamentals
• CSS Selectors Methods
• Different Browsers Execution
• find_element & find_elements
• Check Enabled Status
• Check Displayed Status
• Check Selected Status
• Selenium Waits
• Send_keys Method
• Click Method
• Get Text
• Get Attribute Value
• Get Current URL
• Forward, Back, Refresh
• Take Screenshot
• Handle Browser Tabs
• Handle iframe
• Mouse Hover
• Context-Click
• Drag & Drop
• Handle Alerts
• Handle Dropdown
• Execute Javascript
• Scroll To element
• Headless Mode Execution
• Chrome Options
• Keyboard Action

Selenium is an open-source automation tool primarily used for automating web browsers. It allows developers and testers to simulate user interactions with web applications, making it highly valuable for testing and automating tasks on websites. Selenium supports multiple programming languages, platforms, and browsers.

Key Features and Functionality of Selenium:

1. Cross-Browser Testing:

Selenium supports multiple browsers like:

• Google Chrome
• Mozilla Firefox
• Safari
• Microsoft Edge
• Internet Explorer

This allows automation scripts to be executed across different browser environments, ensuring consistent functionality across platforms.

2. Multi-Language Support:

Selenium supports various programming languages, making it flexible for different development environments:

• Java
• Python
• C#
• Ruby
• JavaScript (Node.js)
• PHP

Users can write test scripts in their preferred language.

3. Support for Different Operating Systems:

Selenium can be used on multiple operating systems:

• Windows
• macOS
• Linux

This provides great flexibility to the tester to run tests on different platforms.

4. WebDriver:

Selenium WebDriver is the core component of the Selenium suite. It provides a programming interface to interact with web elements and simulate user actions like clicking, typing, navigating, etc. It interacts directly with the browser without requiring a middle-man, which ensures faster execution and more accurate testing.

5. Multiple Browser Tabs and Windows Support:

Selenium WebDriver can handle switching between multiple browser windows or tabs, helping in simulating real-world test cases like working with pop-ups, new windows, or new tabs.

6. Locating Web Elements:

Selenium offers various ways to locate web elements on a page using locators such as:

• ID
• Name
• Class Name
• XPath
• CSS Selectors
• Tag Name
• Link Text These locators are used to interact with specific elements like buttons, text boxes, and links.

7. Headless Browser Testing:

Selenium supports headless testing, allowing tests to be run in the background without opening a visible browser. This can improve execution speed, especially when running tests on servers.

8. Selenium Grid:

Selenium Grid allows parallel execution of tests across different machines and browsers. It helps in reducing test execution time by distributing tests across multiple nodes.

9. Automation of Dynamic Web Applications:

Selenium can handle dynamic web pages where elements may change without refreshing the page. This is crucial for testing modern web applications that use technologies like AJAX.

10. Integration with Test Frameworks:

Selenium can be integrated with various test frameworks like:

• TestNG (Java)
• JUnit (Java)
• PyTest (Python)
• NUnit (C#)

These integrations provide powerful features for assertion, test reporting, and grouping test cases.

11. Handling Alerts and Frames:

Selenium provides functionality to handle browser alerts (pop-ups), and work with iFrames (inline frames) within web pages. This is essential for testing interactions with these web elements.

12. Custom Waits:

Selenium offers both implicit and explicit waits, ensuring the web elements are properly loaded before interacting with them. This helps in making the tests more stable and robust, especially when dealing with slow-loading elements.

13. Data-Driven Testing:

Selenium can be integrated with external data sources like Excel, CSV, or databases, allowing testers to implement data-driven testing. This allows the same test script to run with multiple sets of data, improving test coverage.

14. Record and Playback (Selenium IDE):

Selenium IDE is a simple tool that allows users to record browser actions and generate test scripts automatically. While not as powerful as Selenium WebDriver, it’s useful for quick and simple automation or learning.

15. Open Source and Community Support:

Selenium is free to use and has an active community of developers. It is frequently updated, with a wide range of plugins and libraries available for enhancing its capabilities.

Use Cases of Selenium:

• Web Application Testing: Automating test cases for web applications across browsers.
• Regression Testing: Running repeated test cases with Selenium scripts to check for regressions in software behavior.
• Load Testing: Automating simulations of multiple users interacting with a website.
• Scraping Data: Extracting data from web pages by automating interactions.