CSS selectors in Selenium Test Automation

on

How to use css selectors to identify elements in Selenium test automation

There are many identification methods that are supported by selenium. Out of which Css selector is one popular method to deal with element selection. Css is faster than Xpath in locating the element.

Okay, Lets see how to use Css selector. I would suggest to refer the xpath blog, if you are not familiar with xpath identification, Xpath for Selenium Test Automation.

Lets get into examples:

How to use element id or class with CSS selector:
  • `#` is used with Id attribute of an element/tag.
    syntax: css = tagname#id
    example : css = div#input
  • `.` is used with class attribute of an element/tag.
    syntax: css = tagname.class
    example : css = div.submitButton

How to use attributes:
css = tagname#id[attribute=`attribute_value`]
css = tagname.class[attribute=`attribute_value`]
css = tagname[attribute=`attribute_value`]

Examples :
  • css = div
    Get all the elements with `div` tag
  • css = .hmicon
    gets all the elements with class `hmicon`
  • css = div[attribute]
    gets all the `div` elements which has the given attribute.
    example : css = a[href]
    gets all the `a` tags which has `href` attribute.
  • css = div[type=radio]
    gets all the `div` tags which has attribute `type` and its value should be `radio`
  • css = div[type=radio][row=2]
    Multiple attributes can be validated as shown in the above example.
  • css = div[type=radio]:not([row=2])
    We can use `not` to get elements not satisfying the given attribute validation.
  • css = div[type=radio]:not([row])
    Gets all the `div` tags of `type = radio` and not containing `row` attribute

How to use multiple class values with css selectors:

Some times class attribute has many values with space separated. We cannot use class with spaces in css selectors, so in such case we need to use `.`
example :

lets see how we should write css to get different elements:
Using multiple class values,
  • css = input.class1.class2.class3
    gets us only the first element
  • css = input.class1.class2
    gets us only the first 2 elements
  • css = input.class1
    gets us all 3 elements
How to deal with child elements in CSS selectors:
In CSS selectors, we have to use `>` symbol to represent the immediate child. In case of immediate child or grand child we have use `space`. Lets see examples
  • css = div>a
    gets all immediate `a` children of `div` tag
  • css = div a
    gets all immediate and grand `a` children of `div` tag
  • css = div a[type=radio]
    gets all immediate and grand `a` children of `div` which have attribute type with value `radio`
  • css = div a:nth-of-type(3)
    gets all immediate and grand `a` children, which are at position 3, of `div` tag
  • css = div a:last-child
    gets all immediate `a` children, which are at last position, of `div` tag

Example to illustrate `nth-of-type` and `last-child`,


Methods in CSS selectors:
  • css = div a:not([style])
    gets all the children `a` of `div` which doesn't have `style` attribute
  • css = div[type*=‘radio’]
    gets all `div` tags if the attribute `type` contains `radio`
  • css = div[type^=‘radio’]
    gets all `div` tags if the attribute `type` starts with `radio`
  • css = div[type$=‘radio’]
    gets all `div` tags if the attribute `type` ends with `radio`
  • css = div:contains(‘value’)
    gets all `div` tags if the inner text contains `value`


These are some useful examples that we use very often. Hope you got some idea on how to use css selectors in Selenium test automation. This is all what I have mostly used in my daily work. Thanks for reading. Happy learning.

Please post a comment if you dont understand any line here or if you find something is incorrect. Thankyou.

Comments

Post a Comment