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 : #fourthSimilarly, 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 : labelCombination : 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.expandIgnore 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.
Child Selector : The child selector selects all elements that are the immediate children of a specified element.
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".
General Sibling Selector : The general sibling selector selects all elements that are siblings of a specified element.
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 |