XPath and cssSelector functions

XPath Functions and CSS Selector Function

 

XPath functions.

1. Single attribute

//input[@vale=‘user’]

Double attribute

//span[@title=’user’][@class=’xyz’]

2. Parent

//div[@class=’home-page’]//parent::div

3. Ancestor

//div[@class=’home-page‘]//ancestor::div

4. Child

//div[@class=’home-page‘]//child::input[1]

5. Descendant

//div[@class=’home-page‘]//descendant::a

6. Following

//li[@class=’home-page‘]//following::input

//li[@class=’home-page‘]//following-sibling::div

7. Preceding

//div[@class=’form-group’]//preceding::input

//div[@class=’form-group’]//preceding-sibling::div

8. index based

(//input[@class=”home-page“])[3]

//input[@class=”home-page“][2]

//input[@class=”home-page“][last()]

//input[@class=”home-page“][last()-1]

9. Text value

//span[text()=’CONTINUE’]

//span[contains(text(),’CONTINUE’)]

//span[starts-with(text(),’CONTINUE’)]

//span[contains (.,’CONTINUE’)]

//span[.=’CONTINUE’]

10. And/Or

//input[@type=’submit’ or @name=’btnReset’]

//input[@type=’submit’ and @name=’btnLogin’

 

XPath and cssSelector Error Handling

 

1. //svg is the wrong format. SVG elements doesn’t support the standard xpath format. It has a different format.

wrong format – //svg

correct format for svg-

//*[local-name()=’svg’]

and for svg child- Suppose path tag is the child element of svg then the format will be

wrong format- //path

correct format – //*[name()=’path’]

2. Shadow DOM elements don’t support xpath so we can write only cssSelector for shadow DOM elements.
 
3. After / only tagname * and . is allowed
wrong xpath – //li-icon[@type=’camera-icon’]/../*/

correct format- //li-icon[@type=’camera-icon’]/../*/div

 
4. Just after ] text is not allowed.
wrong format – //li-icon[@type=’camera-icon’]div
correct format – //li-icon[@type=’camera-icon’]//div
 
 

 

cssSelector function

 

#id

.class

tagName[attributeName=’attributeValue’]

tagName[attributeName$=’ending value of attributeValue’]

tagName[attributeName^=’starting value of attributeValue’]

tagName[attributeName*=’substring of attributeValue’]

$ – ends with 

^ – starts with 

* – contains

 

Descendant combinator
The   (space) combinator selects nodes that are descendants of the first element.
Syntax: A B
Example: div span will match all Child combinator
The > combinator selects nodes that are direct children of the first element.
Syntax: A > B
Example: ul > li will match all General sibling combinator
The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.
Syntax: A ~ B
Example: p ~ span will match all Adjacent sibling combinator
The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.
Syntax: A + B
Example: h2 + p will match all <h2>.
Column combinator 
The || combinator selects nodes which belong to a column.
Syntax: A || B
Example: col || td will match all CSS pseudo-class represents the first element among a group of sibling elements.

/* Selects any <p> that is the first element
   among its siblings */
p:first-child {
  color: lime;
}

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.

/* Selects any <p> that is the last element
   among its siblings */
p:last-child {
  color: lime;
}

The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings.

/* Selects the second <li> element in a list */
li:nth-child(2) { 
  color: lime;
}

/* Selects every fourth element
   among any group of siblings */
:nth-child(4n) {
  color: lime;
}

The :nth-last-child() CSS pseudo-class matches elements based on their position among a group of siblings, counting from the end.

/* Selects every fourth element
   among any group of siblings,
   counting backwards from the last one */
:nth-last-child(4n) {
  color: lime;
}

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

/* Selects any <p> that is the first element
   of its type among its siblings */
p:first-of-type {
  color: red;
}

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.

/* Selects any <p> that is the last element
   of its type among its siblings */
p:last-of-type {
  color: lime;
}