Css Selector in Selenium

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']

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
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions

Protractor Training

new tutorial I am starting new Protractor training batch on Weekends. Course starts from 24-Aug-2019 [10am IST to 1 pm IST] based on online.

Interested people can confirm the seat by calling to +91 8971673487 or whatsapp to +91 9003381224. You can attend first class(3 hours) for free. Only 10 Seats in Total

Find the course content : View Content