Rules of Creating a CSS Expression

There are some rules for creating a CSS expression. The CSS is one of the important locators in Selenium. A customized CSS can be developed with the help of attributes like id, class name, and by the combination of tagname and html attributes.

The ways of creating a CSS are listed below −

• Using a class name html attribute.

  This will select the web element of that particular class represented by (.)classname.

  Syntax− driver. find_element_by_css_selector(".name")

  Here name is the value of the attribute class.

• Using an id html attribute.

  This will select the web element of that particular id represented by (#) id.

  Syntax− driver. find_element_by_css_selector("#search")

  Here search is the value of the attribute id.

• Using a combination of tagname and attribute value.

  This will select the web element of a specific attribute value combination.

  This is represented by tagname[attribute='value'].

  Syntax: driver. find_element_by_css_selector ("input[id='result']")

Example

Code Implementation with class name attribute in css.

from selenium import webdriver
driver = webdriver.Chrome(executable_path="C:\chromedriver.exe")
# to maximize the browser window
driver.maximize_window()
#get method to launch the URL
driver.get("https://www.tutorialspoint.com/index.htm")
#to refresh the browser
driver.refresh()
# identifying the edit box with the help of class name attribute
driver. find_element_by_css_selector(".gsc-input").
send_keys("Selenium")
#to close the browser
driver.close()

Example

Code Implementation with id attribute in css.

from selenium import webdriver
driver = webdriver.Chrome(executable_path="C:\chromedriver.exe")
# to maximize the browser window
driver.maximize_window()
#get method to launch the URL
driver.get("https://www.tutorialspoint.com/index.htm")
#to refresh the browser
driver.refresh()
# identifying the edit box with the help of id attribute
driver. find_element_by_css_selector("#gsc-i-id1").
send_keys("Selenium")
#to close the browser
driver.close()

Example

Code Implementation with tagname and attribute value in css.

from selenium import webdriver
driver = webdriver.Chrome(executable_path="C:\chromedriver.exe")
# to maximize the browser window
driver.maximize_window()
#get method to launch the URL
driver.get("https://www.tutorialspoint.com/index.htm")
#to refresh the browser
driver.refresh()
# identifying the edit box with the help of tagname and attribute value
driver. find_element_by_css_selector("input[name='search']").
send_keys("Selenium")
#to close the browser
driver.close()