CSS selectors are great tools that can be utilized to find elements on a webpage. When utilizing Selenium, CSS selectors can be utilized to find elements on a page & interact with them by filling in a form or clicking a button. Let’s have a look at the CSS selectors in Selenium & how you can utilize them effectively.
What is a CSS selector?
This is a pattern utilized in identifying elements on a webpage. Moreover, CSS selectors can be utilized to target elements depending on their class name, attribute, tag name, ID, or even their position on a webpage. With the help of CSS selectors, you can comfortably locate certain elements on a page minus having to depend on cumbersome XPaths.
How to utilize CSS selectors in Selenium
To utilize a CSS selector in Selenium, you require to first get the element you need to interact with. You can achieve this with the help of a variety of various methods, including by class name, tag name, ID, or name. Once you’ve found the element, you can utilize a CSS selector to target it & interact with it.
For instance, let’s say you need to locate a button on a webpage with the class name “btn-primary”. You can utilize the code below to find this button & click on it:
button = driver.find_element_by_css_selector(".btn-primary")button.click()The code finds the element with a class name “btn-primary” utilizing a CSS selector first, and after that, it clicks the button.
Using various kinds of CSS selectors
There are numerous kinds of CSS selectors that you can utilize in Selenium, each with its distinct syntax plus capabilities. Examples include
Attribute selectors: These selectors target elements depending on their attribute values. For instance, to target every <input> tag with the attribute “type” set to “text”, one could utilize the selector below:
driver.find_elements_by_css_selector("input[type='text']")Class name selectors: These selectors type target elements depending on their class names. For instance, to target every element with the class name “my-class”, you can utilize the selector below:
driver.find_elements_by_css_selector(".my-class")Tag name selectors: These selectors type target elements depending on their tag name. For instance, to target every <a> tag on a page, one could utilize the selector highlighted below:
driver.find_elements_by_css_selector("a")ID selectors: These selectors type target elements depending on their ID. For instance, to target the element with ID “my-id”, you can utilize the following selector:
driver.find_element_by_css_selector("#my-id")Combination selectors: One can also combine various kinds of selectors to make a more complex selector. For instance, to target every <input> tag with the class name “my-input” & the attribute “type” set to “text”, you can utilize the following selector:
driver.find_elements_by_css_selector("input.my-input[type='text']")Example of using CSS selectors in Selenium in python
from selenium import webdriver
# Launch a browser instance
driver = webdriver.Chrome()
# Navigate to a web page
driver.get("https://www.example.com")
# Find an element using CSS selector
element = driver.find_element_by_css_selector("#myElement")
# Interact with the element
element.click()
# Close the browser
driver.quit()
Conclusion
CSS selectors are a great tool that can be utilized in Selenium to find and interact with elements on a webpage. By utilizing CSS selectors, one could easily target certain elements on a page without having to rely on XPaths or other awkward methods. By mastering CSS selectors, one can be a more efficient plus effective Selenium user.
