CSS Locators Handling with examples

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

Read More

Dynamic Xpath's Generation for Selenium Automation

Let us learn about Xpath and most common syntax's...

Xpath: Generally Xpaths are of two types.

1.Absolute path

2.Relative path

Absolute Xpath:

                  Absolute XPath starts with the root node or a forward slash (/) and the advantage of using absolute is, it identifies the element very fast and the disadvantage here is, if any thing goes wrong or some other tag added in between, then this path will no longer works.

Example for Absolute Xpath: /html/body/div[2]/div/div/footer/section[3]/div/ul/li[3]/a

Relative Xpath:

                  Relative Xpath starts from the current element which you needs to be located. Its starts with (//) and the advantage of using relative Xpath is, you don't need to mention the long xpath, you can start from the middle or in between.

Example for Relative Xpath:

//*[@id=’social-media’]/ul/li[3]/a

Following are the few examples on xpath generation:

Example 1:

<ul id="country">
  <li>India</li>
  <li>US</li>
  <li>UK</li>
  <li>China</li>
</ul>

From the example 1,list li tags values are dynamic.if you refresh web Page the values in the li tags may vary.

1. How to generate an xpath to get the Last li tag value if the values in li tags are dynamic:
   • Xpath to get Last li tag value: //ul[@id='country']/li[last()]
2. How to generate an xpath to get the last but one li tag value if the values in li tags are dynamic:
   • Xpath to get Last but one li tag value: //ul[@id='country']/li[last()-1]
3. How to generate an xpath to get the last but second li tag value if the values in li tags are dynamic:
   • Xpath to get Last but one li tag value: //ul[@id='country']/li[last()-2]

Example 2:

Locating Elements by Attribute:

Form the example 2,possible ways to generate xpath based on attributes

Solution: 

Xpath based on “id” attribute:

• xpath=//input[@id='userName']

Xpath based on “name” attribute:

• xpath=//input[@name='login_userName']

Xpath based on “class” attribute:

• xpath=//input[@class ='user_class']

Example 3:

<button id="submit_800"/>

<button id="submit_508"/>

From the example 3, In my webpage submit button is there and its id is dynamic, every time id attribute value is appending some numeric number at the end.

Solution: For this type of requirements,we can generate an xpath like this:

Xpath=//button[starts-with(@id,'submit_')]

Example 4:

<button id="800_submit"/>

<button id="508_submit"/>

From the example 4, In my webpage submit button is there and its id is dynamic, every time id attribute value is appending some numeric number appending before.

Solution: For this type of requirements,we can generate an xpath like this:

Xpath=//button[ends-with(@id,'_submit')]

Example 5:

Xpath based on text():From the example 5,suppose user needs to generate an xpath based on the text value

Solution : For this type of requirements,we can generate an xpath like this:

                 Xpath=//h2[text()='Welcome to Selenium Automation']

Xpath based on contains:From the example 5, need to generate an xpath based on the  substring of text value

Solution : For this type of requirements,we can generate an xpath like this:

                 Xpath=//h2[contains(text(),'Selenium Automation')]

Example 6:

<ul id="country">
  <li>India</li>
  <li>US</li>
  <li>UK</li>
  <li>China</li>
</ul>

How to get the li node values between “US” and “China”:

Solution: By generating xpath by using preceding and following sibling, we can get the “UK” value between “US” and “China”

Solution : Xpath=//ul[@id=‘country’]/li[preceding-sibling::li[contains(text(),‘US’)] and following-sibling::li[contains(text(),‘China’)]

Read More