CSS Selector - Part 2

CSS locator using Attribute

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

Scenario :

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

Enter User Name and Password  

Click on the Login button.

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

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

For Selecting email attribute

For Selecting login button attribute

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

driver.find_element_by_css_selector(“TagName[Attribute=AttributeValue]”)

Ex:

driver.find_element_by_css_selector(“input[type=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("input[type=email]").send_keys("Hello")
driver.find_element_by_css_selector("input[name=pass").send_keys("Hello")
driver.find_element_by_css_selector("input[data-testid=royal_login_button]").click()

Attribute –Attribute  can be  type, name, data-testid etc. It is recommended to choose an attribute whose value uniquely identifies the web element.

Value of attribute – It is the value of an attribute which is being accessed.

CSS Selector Using ID, Class & Attribute

you will learn how to locate a particular web element using CSS - ID, Class and Attribute Selector. 

In this example I will use class attribute for email web element but same attribute value they are using for password web element, so in this situation we will add another attribute  as ID or attribute. Here we are using combination of ID , class and Attribute. 

Scenario :

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

Enter User Name and Password  

Click on the Login button.

Script:

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


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

driver.find_element_by_css_selector(".inputtext#email").send_keys("Hello")
driver.find_element_by_css_selector("input.inputtext[name=pass]").send_keys("Hello")
driver.find_element_by_css_selector("input[data-testid=royal_login_button]").click()

How to use Multiple attributes using CSS Selector

In some situations, you need to use more than one attribute where single attribute is not enough to identify the web element on the page.

Scenario :

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

Enter First Name and Last Name

Following is the steps to locate the element on webpage.

1)   Right click on First name web element on the page and select inspect option in the context menu

I want to use type as a one attribute

But both the web elements (First name and Last name) type attribute is same in this situation we  add one more attribute to CSS Selector.

Syntax for locating a web element through CSS – Selector is written as:

driver.find_element_by_css_selector(“TagName[Attribute1=AttributeValue1] [Attribute2=AttributeValue2]…”)

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("input[type=text][name=firstname]").send_keys("Hello")
driver.find_element_by_css_selector("input[type=text][name=lastname]").send_keys("Hello")

You can multiple attributes for class and ID also, below is the syntax.

driver.find_element_by_css_selector (tag.class[attribute=value][attribute=val1])

driver.find_element_by_css_selector (tag#ID [attribute=value][attribute=val1])