Identifying Element By CSS

Identifying the WebElement by “CSS_SELECTOR” locator. It takes String as an argument. If an element isn't identified it throws an exception as NoSuchElementException.

Syntax: driver.find_element(By.CSS_SELECTOR,"Locator_Type_Value")

In css selector we need to pass locator type as a value along with a special character rather than webelement value.


Below are the types to find WebElement using Css Selector.

1. To pass id name in css selector we need to add "#" before id locator type value.

driver.find_element(By.CSS_SELECTOR,"#ID_Value")


2. To pass “Class name” in css selector we need to add "." before class name locator value.

driver.find_element(By.CSS_SELECTOR,".Class_Name")


3. Using " Tag name and name " Attribute value in css_selector.

driver.find_element(By.CSS_SELECTOR,"Tag_name[name=name_value]")


4. Using " Tag name ,className and name " Attribute values in css_selector.

driver.find_element(By.CSS_SELECTOR,"tagName.className[name=nameValue]")


5. To find webelement which starts with a string letter of locator type we use the “^” symbol.

driver.find_element(By.CSS_SELECTOR,"tagName[class^='loctorValue']")


6. To find webelement which ends with a string letter of locator type we use the “$” symbol.

driver.find_element(By.CSS_SELECTOR,"tagName[class$='loctorValue']")


7. To find webelement by using substring of a locator value we use the “ * ” symbol.

Example : If we have a locator value like “entertext” we can use partial text as “ter” to act on the webelement.

driver.find_element(By.CSS_SELECTOR,"tagName[class*='loctorValue']")


Example: In the below example we will launch the webpage and enter the text in the edit box using CSS Selector locator value.


FindElementBy_Css.py

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

driver = webdriver.Chrome("/Users/admin/Documents/Skill2lead/Others/drivers/chromedriver.exe")

driver.get("http://www.dummypoint.com/seleniumtemplate.html")
time.sleep(2)

# 1. Using ID name in CSS Selector (To write id name in css selector you need to add "#" before id value)
#driver.find_element(By.CSS_SELECTOR,"#user_input").send_keys("Skill2lead_Id")

# 2. Using Class Name in CSS Selector (To write class name in css selector you need to add "." before class name)
#driver.find_element(By.CSS_SELECTOR,".entertext").send_keys("Skill2lead_ClassName")

# 3. Using " Tag name("input") and name " Attribute value as css_selector
#driver.find_element(By.CSS_SELECTOR,"input[name=textbox]").send_keys("Skill2lead_TN")

# 4. Using " Tag name("input"),className and name " Attribute value as css_selector
#driver.find_element(By.CSS_SELECTOR,"input.entertext[name=textbox]").send_keys("Skill2lead_TCN")

# 5. “^” - Find elements using starts with a string value
#driver.find_element(By.CSS_SELECTOR,"input[class^='en']").send_keys("Skill2lead_SLUC")

# 6. “$” - Find elements using Ends with a string value
#driver.find_element(By.CSS_SELECTOR,"input[class$='xt']").send_keys("Skill2lead_ELUC")

# 7. “*” - Find elements using contains a substring.
driver.find_element(By.CSS_SELECTOR,"input[class*='ter']").send_keys("Skill2lead_SULUC")

time.sleep(2)
driver.quit()



Prev
Next