CSS Selector - Part 3
CSS
Locator using Sub-string matches or partial match on attribute values
CSS in Selenium allows matching a
partial attribute values. This is useful for testing application where
attribute values are dynamically assigned and changed every time a page is
requested. There are three ways to match the substring.
1) Match a prefix--Starts with (^)
2) Match a suffix-- Ends with ($)
3) Match a sub string --Contains (*)
Match
a Prefix (Starts with (^)): To
find an web element on page using ^ symbol which indicates ‘Starts with’.
Syntax for locating a web element
TagName[AttributeName ^ = Prefix String]
Ex: driver.find_element_by_css_selector(a[title^=’Already a user’])
It will find hyperlink node which
contains ‘title’ attribute starting with ‘Already a user’ text. (Here, ^
describes the starting text).
Scenario :
Click on the Signin button.
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[title^='Already a user']").click()
chromePath="C:\\BrowserDrivers\\chromedriver.exe"
driver=webdriver.Chrome(executable_path=chromePath)
driver.get("https://www.rediff.com/")
driver.find_element_by_css_selector("a[title^='Already a user']").click()
Match
a Suffix (Ends with ($)): To
find an web element on page using $ symbol which indicates ‘Ends with’.
Syntax for locating a web element
TagName[AttributeName $ =sufffix String]
Ex: driver.find_element_by_css_selector(a[title$=’Sign in’])
It will find hyperlink node which
contains ‘title’ attribute Ending with ‘Sign in’ text. (Here, $ describes the Ending
text).
Scenario :
Click on the Signin button.
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[title$='Sign in']").click()
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[title$='Sign in']").click()
Match
a SubString (Contains (*)): To
find an web element on page using * symbol which indicates ‘Sub-String’.
Syntax for locating a web element
TagName[AttributeName * =Sub String]
Ex: driver.find_element_by_css_selector(a[title*=’user’])
It will find hyperlink node which
contains ‘title’ attribute sub string ‘user’ text. (Here, * describes the sub
string).
Scenario :
Click on the Signin button.
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[title*='user']").click()
chromePath="C:\\BrowserDrivers\\chromedriver.exe"
driver=webdriver.Chrome(executable_path=chromePath)
driver.get("https://www.rediff.com/")
driver.find_element_by_css_selector("a[title*='user']").click()
CSS
Element locator using child Elements
Syntax: parentLocator>childLocator
To Select the Google Search button on page
driver.find_element_by_css_selector (div.FPdoLc.VlcLAe>center>input[value='Google
Search'])
first it will find div tag with class ‘FPdoLc
VlcLAe’ and then it will follow remaining path to locate child node.
Note: class attribute contains space denotes element
has multiple classes, Ex: <div class= “FPdoLc VlcLAe”>
In that case you should use dots (.) for accessing
the element means you can combine multiple class as a group.
Locating
Nth Childs
If there are occasions when there are multiple child
elements within the same parent element
If we want to locate the element with text ‘Marathi’
we have to use ‘nth-of- type’
Ex: print(driver.find_element_by_css_selector("div#SIvCob
a:nth-of-type(4)").text)
if we need to select the last child element, i.e. ‘ਪੰਜਾਬੀ, we can use
Ex: print(driver.find_element_by_css_selector("div#SIvCob
a:last-child").text)
If we want to locate the first child element of its
parent
EX:print(driver.find_element_by_css_selector("div#SIvCob
a:first-child").text)
If you want to select the first sibling of its type(Tag) in the
list of children of its parent element.
Ex: print(driver.find_element_by_css_selector("div#SIvCob
a:first-of-type").text)
If you want to select 2nd element from the starting in the list of
its parent element.
Ex: print(driver.find_element_by_css_selector("div#SIvCob
a:nth-child(2)").text)
If you want to select 3rd element from the last in the list of its
parent element.
Ex: print(driver.find_element_by_css_selector("div#SIvCob
a:nth-last-child(3)").text)
If you want to select the Last sibling of its type(tag) in the
list of children of its parent element.
Ex: print(driver.find_element_by_css_selector("div#SIvCob
a:last-of-type").text)
CSS Element locator syntax
using adjacent selectors
This is referred to as an adjacent selector or next-sibling
selector. It will select only the specified element that immediately follows
the former specified element.
Ex: print(driver.find_element_by_css_selector("div#SIvCob
a+a").text)
it will locate "a" node where another
"a" node is present before it on page.
Ex: print(driver.find_element_by_css_selector("div#SIvCob
a+a+a+a").text)
Comments
Post a Comment