CSS Selectors -2

 

Navigating to Child or Sub-Child Tags Using CSS Selectors

In CSS selectors, a space can be used to navigate from a parent tag to any of its child or sub-child tags (also known as descendants). This is similar to using // in XPath.

 

  xpath        / - child tag -->  > (CSS)

            // -àchild tag or subchild  or grand child tag .

           // à  replaced by "space" in CSS

 

css:     space - can be used navigate to child (or) sub child tag

ex:

 

Navigate to sub-child 'input' tag from 'html' tag:  space

 html>body>input

html input  18 ele

This CSS selector matches all input tags that are descendants of the html tag.

 

Navigate to sub-child 'option' tag from 'html' tag?

html option

 

 

Navigate to sub-child 'a' tag from 'html' tag:

html a

 

HW Navigate to sub-child 'option' tag from 'body' tag:

HW Navigate to child 'head' tag from 'html' tag:

HW Navigate to sub-child 'title' tag from 'html' tag:

 

 

Using the Dot (.) Shortcut for text() in XPath

In XPath, the text() function can be replaced by a dot (.) to simplify the syntax when matching elements based on their text content.

Examples:

1.     Using text() Function:

• <p>Order no</p>: //p[text()='Order no'] - 0 elements found
• <a>My gmail</a>: //a[text()='My gmail'] - 2 elements found
•  

2.     Using Dot (.) Shortcut:

      text()  replace by .   dot

 

<p>Order no</p>: //p[.='Order no'] - 0 elements found

<a>My gmail</a>: //a[.='My gmail'] - 2 elements found

 

For a paragraph <p>My Paragraph. HTML can be used to develop web page</p>, the XPath would be:

Xpath: //p[text()='My Paragraph. HTML can be used to develop web page']

This approach matches the text content inside the specified tag directly.

 

shortcut with text() by (.) dot symbol:

//p[.='My Paragraph. HTML can be used to develop web page']

 

HW  Identify 'Open Facebook' link using text():

HW Identify 'Open Amazon' link using text():

HW  Identify 'My button' element using text():

contains(text(),’text from page ’) short cut :

 

text()  replace by .   dot -->  contains(.,’text from page ’)

                                       text()

 

Identify OpenFace book' link using contains with text()

//a[contains(text(),'Open Facebook')]

        (or)  replace by dot

//a[contains(.,'Open Facebook')]

 

 

HW  Identify 'My gmail' link by using contains text()    

 

HW Identify 'Open amazon '  link by using contains  text()?

 

 

HW  xpath for p  with text() = ' Html can be used ' using contains  text()?