CSS Locators Handling with examples

Posted by DurgaPrasad on 04:40

What is CSS:

CSS stands for Cascading Style Sheets, these are used for styling the different elements of an HTML webpage.Now let us try to understand how we will generate css based html tag/elements/attributes

Example 1: Create CSS for below locator based on ID attribute.

    • Ex: <div id=”username” class=”login_username”>
      • Xpath: //div[@id=”username”]
        • Description: As per Xpath standards/syntax, id attribute value identification will be like this [@id=”username”]
      • CSS : div#username
        • Description: As per CSS standards/syntax, id attribute value identification will be #username.(# symbol will be treated as id attribute internally).

Example 2: Create CSS for below locator based on class attribute.

  • Ex: <div id=”username” class=”login_username”>
    • Xpath: //div[@class=”login_username”]
      • Description: As per Xpath standards/syntax, class attribute value identification will be like this [@class=”login_username”]

    • CSS : div. login_username
      • Description: As per CSS standards/syntax, class attribute value identification will be .login_username (. symbol will be treated as class attribute internally).
Example 3: Create CSS for below locator based on tag-name

  • Ex:  <div id=”username” class=”login_username”>
    • Xpath: //div
      • Description: As per Xpath standards/syntax will be //div

    • CSS : div
      • Description: As per CSS standards/syntax will be //div
Example 4: Create CSS for below locator based on attribute values
  • Ex:  <div id=”username” name=”login_email” value=”email_id”>
Name attribute based css and xpath:
    • Xpath: //div[@name=”login_email”]
      • Description: As per Xpath standards/syntax will be //div[@name=”login_email”]

    • CSS : div[name=”login_email”]
      • Description: As per CSS standards/syntax, div[name=”login_email”] or [name=”login_email”]

Value attribute based css and xpath:
    • Xpath: //div[@value=”email_id”]
      • Description: As per Xpath standards/syntax//div[@value=”email_id”]
    • CSS : div[value=”email_id”]
      • Description: As per CSS standards/syntax, div[value=”email_id”] or [value=”email_id”]
Example 5: Create CSS based on the nth child values
    Ex: <ul id="Country">
        <li>India</li>
        <li>UK</li>
        <li>US</li>
      </ul>
From the above example, if user wants UK value based on the child concept we need to try css in below formatCSS syntax :
    • ul#country li:nth-child(2) to get UK value
    • ul#country li:nth-child(1) to get India value
    • ul#country li:nth-child(3) to get US value
Description - 'ul#country li:nth-child(2)' will select the element with id 'country' and then locate the 2nd child of type li i.e. 'UK' list item.

Example 6: Css selector based on ^ - Starts withFor the HTML below-Ex: <button id="submit_450" type="button" class="submit button">Tap ON</button>

CSS syntax: button[id^=submit_]
Description: button[id^=submit_] will select the webelement whose id starts with “submit_”

Example 7:  Css selector based on $ - Ends with

For the HTML below-<button id="submit_button_450" type="button" class="submit button">Tap ON</button>

CSS syntax: button[id$=_button_450]
Description: button[id$=_button_450] will select the web-element whose id ends with with “_button_450”

Example 8: Css selector based on * - Contains
For the HTML below-
<button id="submit_button_450" type="button" class="submit button">Tap ON</button>

CSS Syntax:
id*="button"
Description - 'id*="button"' will select the element whose id contains with "button" value

Example 9: 
CSS selector for direct child element
Xpath is defined by using “/” symbol for direct child, but for CSS we need to use “>” symbol
Syntax:Xpath //div/a
            CSS div>a

Example 10: CSS selector for child OR Sub child elementXpath is defined by using “//” symbol for child, but for CSS we need to use space
Syntax:Xpath: //div//a            
CSS: div a

Categories: