Creating Customized CSS in Selenium with Python

The css is one of the important locators in Selenium. A customized css can be developed with the help of attributes like id, classname 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']")

Here input is the tagname and id attribute which is having a value result.

Example

Code Implementation with class name attribute in css.

from selenium import webdriver
#browser exposes an executable file
#Through Selenium test we will invoke the executable file which will then #invoke actual browser
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()

Code Implementation with id attribute in css.

from selenium import webdriver
#browser exposes an executable file
#Through Selenium test we will invoke the executable file which will then #invoke actual browser
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()

Code Implementation with tagname and attribute value in css.

from selenium import webdriver
#browser exposes an executable file
#Through Selenium test we will invoke the executable file which will then #invoke actual browser
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()