Css Selector in protractor

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


Warning : if we use Space between two properties, css considers that values are present in parent and child element, if we want to combine the same element properties we should avoid using space

Class : In css we mention class using the . sign


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


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 protractor

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

Value selected or not in dropdown

Css Combinators in protractor

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 pagexpath=/htmlcss=htmldocument.documentElement
Whole web page bodyxpath=/html/bodycss=bodydocument.body
All text nodes of web page//text()NANA
Element <E> by absolute referencexpath=/html/body/.../.../.../Ecss=body>…>…>…>Edocument.body.childNodes[i] ... childNodes[j]
Element <E> by relative reference//ENAdocument.gEBTN('E')[1]
Image element//imgcss=imgdocument.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 element with id I2//E1[@id=I1] | //E2[@id=I2]css=E1#I1,E2#I2NA
Element <E1> with id I1 or id I2//E1[@id=I1 or @id=I2]css=E1#I1,E1#I2NA
Attribute A of element <E>//E/@ANANA
Attribute A of any element//*/@ANANA
Attribute A1 of element <E> where attribute A2 is 't' exactly/E[@A2='t']/@A1NANA
Attribute A of element <E> where A contains 't'//E[contains(@A,'t')]/ @ANANA
Element <E> with id I//E[@id='I']css=E#Idocument.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']NANA
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 subcode (possibly inherited)NAcss=E:lang(L)NA
Element containing text 't' exactly//*[.='t']NANA
Element <E> containing text 't'//E[contains(text(), 't')]css=E:contains('t')NA
Link element//acss=adocument.links[0]
<A> containing text 't' exactly//a[.='t']NANA
<A> containing text 't'//a[contains(text(), 't')]css=a:contains('t')NA
<A> with target link 'url'//a[@href='url']css=a[href='url']NA
Link URL labeled with text 't' exactly//a[.='t']/@hrefNANA
First child of element <E>//E/*[1]css=E > *:first-childdocument. gEBTN('E')[0].firstChild
First <E> child//E[1]css=E:first-of-typedocument. getEBTN('E')[0]
Last child of element E//E/*[last()]css=E *:last-childdocument.gEBTN('E')[0].lastChild
Last <E> child//E[last()]css=E:last-of-typedocument.gEBTN(E)[document. gEBTN(E).length-1]
Second <E> child//E[2]css= E:nth-of-type(2)document.getEBTN('E')[1]
Second child that is an <E> element//*[2][name()='E']css=E:nth-child(2)NA
Second-to-last <E> child//E[last()-1]css=E:nth-last-of-type(2)document.gEBTN(E) [document.gEBTN(E).length-2]
Second-to-last child that is an <E> element//E1/[E2 and not( *[not(self::E2)])]NANA
Parent of element <E>//E/..NAdocument.gEBTN('E') [0].parentNode
Descendant <E> of element with id I using specific path//*[@id='I']/ . . ./. . ./. . ./Ecss=#I > . . . > . . . > . . . > Edocument.gEBI('I') …gEBTN('E')[0]
Descendant <E> of element with id I using unspecified path//*[@id='I']//Ecss=#I Edocument.gEBI('I') .gEBTN('E')[0]
Element <E> with no children//E[count(*)=0]css=E:emptyNA
Element <E> with an only child//E[count(*)=1]NANA
Element <E> that is an only child//E[count (preceding-sibling::*)+ count(following-sibling::*)=0]css=E:only-childNA
Element <E> with no <E> siblings//E[count(../E) = 1]css=E:only-of-typeNA
Every Nth element starting with the (M+1)th//E[position() mod N = M + 1]css=E:nth-child(Nn + M)NA
Element <E1> following some sibling //E2/following-sibling::E1css=E2 ~ E1NA
Element <E1> immediately following sibling //E2/following-sibling::*[1][name()='E1']css=E2 + E1NA
Element <E1> following sibling with one intermed iary//E2/following-sibling::*[2][name()='E1']css=E2 + * + E1NA
Sibling element immediately following <E>//E/following-sibling::*css=E + *document.gEBTN('E')[0] .nextSibling
Element <E1> preceding some sibling //E2/preceding-sibling::E1NANA
Element <E1> immediately preceding sibling //E2/preceding-sibling::*[1][name()='E1']NANA
Element <E1> preceding sibling with one intermediary//E2/preceding-sibling::*[2][name()='E1']NANA
Sibling element immediately preceding <E>//E/preceding-sibling::*[1]NAocument.gEBTN('E2')[0] .previousSibling
Cell by row and column (e.g. 3rd row, 2nd column)//*[@id='TestTable']//tr[3]//td[2]css=#TestTable tr:nth-child(3) td:nth-child(2)document.gEBI('TestTable') .gEBTN('tr')[2].gEBTN('td')[1]
Cell immediately following cell containing 't' exactly//td[preceding-sibling::td='t']NANA
Cell immediately following cell containing 't'//td[preceding-sibling::td[contains(.,'t')]]css=td:contains('t') ~ tdNA
User interface element <E> that is disabled//E[@disabled]css=E:disabledNA
User interface element that is enabled//*[not(@disabled)]css=*:enabledNA
Checkbox (or radio button) that is checked//*[@checked]css=*:checkedNA

Difference between CSS and XPATH

CSS Xpath
They’re fasterXpath is slower than CSS
They’re more readableIt is complex to understand as it gets lengthy
CSS is jQuery’s locating strategyXpath is not used in Jquery
Used by developers, web scrappers, testersUsed only by testers
Same across all browsersXpath engines are different in each browser, hence make them inconsistent
Supports native browser featuresIE does not have a native xpath engine, therefore protractor 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. protractor also adapted to Sizzle EngineNo sizzle engine support
Hard to handle the textWith ease we can handle the text related functions
Can traverse only forwardXpath can traverse in reverse and forward

Protractor Interview Questions

About Author

Myself KarthiQ, I am the author of this blog, I know ways to write a good article but some how I donot have the skills to make it to reach people, would you like help me to reach more people By sharing this Article in the social media.

Share this Article Facebook
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions

Copyright © CherCher Tech