Css Selector in Selenium Python

Table of content

Css Selector in Selenium python
Wild card in CSS selector
CSS Combinators in selenium
CSS Selector Cheat Sheet
Conversion of CSS ~ Xpath ~ DOM
Difference between CSS and XPATH

Css Selector in Selenium python

Css is abbreviation of 'Cascading Style Sheet'. It is used in html to make web element’s layout and style beautifully.

Css selector is a path pattern that can use web element’s attributes to locate a web element in the web page. Css selector is more simpler and faster than XPath especially in Internet Explorer.

General Syntax of the CSS Selector

Syntax : tagname[attribute = 'attribute value']

Multiple Classes : sometimes there could more than one class present in the element attribute with a space, we can use multiple class fo find the element. We should remove the spaces between classes and should replace the spaces with . sign.

Html Code : <label class='expand icon'>css class</label>
Css selector value : .expand.icon
Css selector value : [class='expand'] [class='icon']

Id : Css selector uses # sign with id attribute to locate the element

Html Code : <label id='fourth'>css id</label>
Css selector value : #fourth

Similarly we can use any attribute present in the element like src, href, name...

Tagname : Tagname is used to form the element in html, we can use tagname without any symbols,

Html Code : <label id='fourth'>css id</label>
Css selector value : label

Combination : Sometimes there will scenarios where you may not able to find the element uniquely, in those cases we have take the refrences of its parent element properties

Html Code : <div id='abc' class='column'>
				      <label id='fourth' class='expand'>css id</label>
			      </div>
Css with class : .column.expand
Css with id : .abc.fourth
Css with tagname : div label
Css with mix 1: div.column#fourth
Css with mix 1: #abc label.expand

Ignore Case - We can ignore the case of the particular property using 'i' inside the square brackets

Html Code : <div id='abcDE' class='column'>
Css with class : div[id='abcde' i]

Wild card in CSS selector

We can use wild card characters in CSS selector to find the element, ^, $, * are wild card characters present in the CSS selector in selenium

<label name='example'>css selector</label>
'^' means start of the string : label[name^='ex']
'$' means the end of the string : label[name$='le']
'*' means contain the string : label[name*='mp']

Find Element by Class in Selenium Python

CSS Combinators in selenium

A combinator explains the relationship between the css selectors, A CSS selector can contain more than one simple selector.

We use combinator to combine or to express the relationship between these two css selectors.

There are four different combinators in CSS:descendant selector (space) child selector (>) adjacent sibling selector (+) general sibling selector (~)Example HTML code

<html>
	<body>
	<div name='username' class='c' id='p'>
		<div id='sec'>
				<label abc='abcD' id="user">Username</label>
				<input id="username" type="text">
		</div>
	</div>
	</body>
</html>

Descendant Selector : The descendant selector matches all elements that are descendants of a specified element.
space-css-selector-descendant-selenium

Child Selector : The child selector selects all elements that are the immediate children of a specified element.
child-css-selector-selenium

Adjacent Sibling Selector : The adjacent sibling selector selects a element that is the adjacent siblings of a specified element. Sibling element must have the same parent element, and "adjacent" means "immediately following".
following-sibling-css-selector-selenium

General Sibling Selector : The general sibling selector selects all elements that are siblings of a specified element.
general-following-sibling-css-selenium

CSS Selector Cheat Sheet

Syntax	Example	Description
.class	.intro	Selects all elements with class="intro"
#id	#firstname	Selects the element with id="firstname"
*	*	Selects all elements
element	p	Selects all <p> elements
element,element	div, p	Selects all <div> elements and all <p> elements
element element	div p	Selects all <p> elements inside <div> elements
element>element	div > p	Selects all <p> elements where the parent is a <div> element
element+element	div + p	Selects all <p> elements that are placed immediately after <div> elements
element1~element2	p ~ ul	Selects every <ul> element that are preceded by a <p> element

Attributes

Syntax	Example	Description
[attribute]	[target]	Selects all elements with a target attribute
[attribute=value]	[target=_blank]	Selects all elements with target="_blank"
[attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word "flower"
[attribute\|=value]	[lang\|=en]	Selects all elements with a lang attribute value starting with "en"
[attribute^=value]	a[href^="https"]	Selects every <a> element whose href attribute value begins with "https"
[attribute$=value]	a[href$=".pdf"]	Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value]	a[href*="qatest"]	Selects every <a> element whose href attribute value contains the substring "qatest"

Pseudo-classes

Syntax	Example	Description
:active	a:active	Selects the active link
::after	p::after	Insert content after every <p> element
::before	p::before	Insert content before the content of every <p> element
:checked	input:checked	Selects every checked <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children (including text nodes)
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> element that is the first child of its parent
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
:focus	input:focus	Selects the input element which has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects input elements with a value within a specified range
:invalid	input:invalid	Selects all input elemets with an invalid value
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-child	p:last-child	Selects every <p> element that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects input elements with no "required" attribute
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range
:read-only	input:read-only	Selects input elements with the "readonly" attribute specified
:read-write	input:read-write	Selects input elements with the "readonly" attribute NOT specified
:required	input:required	Selects input elements with the "required" attribute specified
:root	:root	Selects the document's root element
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all input elements with a valid value
:visited	a:visited	Selects all visited links

Conversion of CSS ~ Xpath ~ DOM

Description	Xpath	CSS	DOM
Whole web page	xpath=/html	css=html	document.documentElement
Whole web page body	xpath=/html/body	css=body	document.body
All text nodes of web page	//text()	NA	NA
Element <E> by absolute reference	xpath=/html/body/.../.../.../E	css=body>…>…>…>E	document.body.childNodes[i] ... childNodes[j]
Element <E> by relative reference	//E	NA	document.gEBTN('E')[1]
Image element	//img	css=img	document.images[0]
Element <E> with attribute A	//E[@A]	css=E[A]	dom=for each (e in document.gEBTN('E')) if (e.A) e
Element <E> with attribute A containing text 't' exactly	//E[@A='t']	css=E[A='t']	NA
Element <E> with attribute A containing text 't'	//E[contains(@A,'t')]	css=E[A*='t']	NA
Element <E> whose attribute A begins with 't'	//E[starts-with(@A, 't')]	css=E[A^='t']	NA
Element <E> whose attribute A ends with 't'	//E[ends-with(@A, 't')]	css=E[A$='t']	NA
Element <E1> with id I1 or elementwith id I2	//E1[@id=I1] \| //E2[@id=I2]	css=E1#I1,E2#I2	NA
Element <E1> with id I1 or id I2	//E1[@id=I1 or @id=I2]	css=E1#I1,E1#I2	NA
Attribute A of element <E>	//E/@A	NA	NA
Attribute A of any element	//*/@A	NA	NA
Attribute A1 of element <E> where attribute A2 is 't' exactly	/E[@A2='t']/@A1	NA	NA
Attribute A of element <E> where A contains 't'	//E[contains(@A,'t')]/ @A	NA	NA
Element <E> with id I	//E[@id='I']	css=E#I	document.gEBI('I')
Element <E> with name N	//E[@name='N']	css=E[name=N]	NA
Element with name N	//*[@name='N']	css=[name=N]	document. getElementsByName('N')[0]
Element with id X or, failing that, a name X	//*[@id='X' or @name='X']	NA	NA
Element with name N & specified 0-based index ‘v’	//*[@name='N'] [v+1]	css=[name=N]:nth-child(v+1)	NA
Element with name N & specified value ‘v’	//*[@name='N'][@value='v']	css=[name=N][value='v’]	NA
Element <E> is explicitly in language L or subcode	//E[@lang='L' or starts-with(@lang, concat('L', '-'))]	css=E[lang\|=L]	NA
Element <E> is in language L or s

Difference between CSS and XPATH

123455432

CSS	Xpath
They’re faster	Xpath is slower than CSS
They’re more readable	It is complex to understand as it gets lengthy
CSS is jQuery’s locating strategy	Xpath is not used in Jquery
Used by developers, web scrappers, testers	Used only by testers
Same across all browsers	Xpath engines are different in each browser, hence make them inconsistent
Supports native browser features	IE does not have a native xpath engine, therefore selenium injects its own xpath engine for compatibility of its API. Hence we lose the advantage of using native browser features that WebDriver inherently promotes.
Latest browsers optimize the use of CSS with help of Sizle. Selenium also adapted to Sizzle Engine	No sizzle engine support

Css Selector in Selenium Python