CSS Selector in Protractor

CSS is an abbreviation of 'Cascading Style Sheet'. It is used in HTML to make a web element’s layout and style beautifully.

A CSS selector is a path pattern that can use the web element’s attributes to locate a web element on the web page. A 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 space; we can use multiple class for 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 be scenarios where you may not be able to find the element uniquely, in those cases we have to take the references 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]

The wild card in the 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']

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 the 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 an element that is the adjacent siblings of a specified element. Sibling elements 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
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions