CSS Selector - Part 1

CSS Locator is another alternative of Xpath in selenium webdriver. CSS stands for "Cascading Style Sheets" and it define that how to display HTML elements on webpage. CSS Selector is the combination of an element selector and a selector value which identifies the web element within a web page.

There are few advantages and few disadvantages of using CSS element locators.

Advantage:  It is much faster and simpler than the Xpath Locators

Disadvantage:  It may not be supporting all the browsers.

Locating web elements through CSS use of CSS Selector which identifies an element based on the combination of HTML tag, id, class and attributes.

CSS Selector works in different modes to identify and locate web elements.

1)   CSS Selector – ID

2)   CSS Selector – Class

3)   CSS Selector -Attribute

4)   CSS Selector – ID, Class & Attribute

5)   CSS Selector -Sub-String

6)   CSS Selector – Keyword or Inner Text

CSS locator using Tag and ID Attribute/ID Attribute

you will learn how to locate a particular web element using CSS  Tag and ID Attribute Selector/ID Selector. 

Scenario :

Open URL https://www.facebook.com/

Enter UserName and Password  (using ID property )

Click on the Login button.(using ID Property)

Following is the steps to locate the element using CSS-ID property on webpage.

1)   Right click on Email or Phone webelement on the page and select inspect option in the context menu 

Select Inspect

Select ID

Select the ChroPath

Note : ChroPath should be add as an extension for Chrome Browser. 

Select CSS Selector from Selectors dropdown box

 Below is the CSS-ID format

Syntax for locating a web element using its id attribute is written as:

driver.find_element_by_css_selector(#<ID Value>)

Ex: driver.find_element_by_css_selector(“#email”)

for locating the Textbox on the web page, we will use the value of its id attribute

same way you have to follow for other elements (Password and Login button).

Alternatively we can you TagName with ID as a CSS_ID selector

Syntax: Tag Name # ID

Tag Name is Name of the tag

ID is Attribute values

Ex: driver.find_element_by_css_selector(“input#email”)

Script:

from selenium import webdriver
from selenium.webdriver.common.by import By
chromePath="C:\\BrowserDrivers\\chromedriver.exe"

driver=webdriver.Chrome(executable_path=chromePath)
driver.get("https://www.facebook.com/")

driver.find_element_by_css_selector("#email").send_keys("Hello")
driver.find_element_by_css_selector("input#pass").send_keys("Hello")
driver.find_element_by_css_selector("#loginbutton").click()

 Note :

1)# is indication for Id attribute, you will get an exception if you use with out # for ID attribute. It is mandatory to use hash sign if ID attribute is being used to create CSS Selector.

2)Either ways you can use for CSS ID Selector.

CSS locator using Tag and Class Attribute/Class Attribute

you will learn how to locate a particular web element using CSS  Tag and Class Selector/Class Selector. 

Scenario :

Open URL https://mail.rediff.com/

Click on the Signin button.

Following is the steps to locate the element using Class Name property on webpage.

1)   Right click on Sign in webelement on the page and select inspect option in the context menu

 

Syntax for locating a web element through CSS - Tag and Class Selector is written as:

driver.find_element_by_css_selector(“.<Class Attribute value>”)

or

driver.find_element_by_css_selector(“TagName.<Class Attribute Value>”)

Ex:

driver.find_element_by_css_selector(“.signin”)

or

driver.find_element_by_css_selector(“a.signin”)

Script:

from selenium import webdriver
from selenium.webdriver.common.by import By
chromePath="C:\\BrowserDrivers\\chromedriver.exe"

driver=webdriver.Chrome(executable_path=chromePath)
driver.get("https://www.rediff.com/")

driver.find_element_by_css_selector("a.signin").click()

Note:

. – The dot sign is used to symbolize Class attribute. It is mandatory to use dot sign if a Class attribute is being used to create a CSS Selector.