Handling Compound Classes using CSS Selectors

Handling Compound Classes using CSS Selectors

Introduction

This blog talks about handling compound classes in Selenium Webdriver using css selector. CSS relies on pattern matching rules to determine style element for the respective document. These patterns are called selectors and they range from tag names. For example, span#spanId > b.highlight would match any b tag with a class of highlight, that is a child of the span with the id spanId.

  • Preferences of CSS Selector over Xpath:
    • CSS selector is efficient and increases the performance of the test cases.
    • It also helps across browsers.
    • It reduces the lines of code compared to Xpath.

Use Cases

Handling compound classes using css selectors:

  • Problem:

When we try to get the text of an element which is having compound classes in the application using Selenium webdriver’s ClassName we will get an exception saying

  •  Consider the sample snippet given below:
  • Try to get the value of h2 tag using Selenium webdriver as given below:

 Since selenium doesn’t support compound classes, the above piece of code will fail.

  • Solution:

Using css selectors we can resolve the above mentioned problem. Instead of using className we have to use css selector method.

Hence, the code will be executed successfully.

Preference of CSS Selector over Xpath

Usually the test case works, if we use xpath but it involves a lot of coding activity in most of the scenarios. Hence it is not an effective method.

Consider the html code given below:

CSS codeThe UI view is:

UIRequirement: Now we need to get all the values of dropdown.

Step 1:

Get the size of dropdown using CssSelector

 Step 2:

Get the values using xpath

  •  Problem:

The present html file doesn’t starts with div[1]. Hence, they have used div/label for the first div tag and thereby incrementing each div i.e., div[2], div[3]. The xpath will be different for first div tag. So, we need to pass the “i” value to the div in the xpath and the loop will continue until it reaches the dropDownValues.size().

  • Solution:

CSS Selectors are best to process/get the values from dropdowns or list etc.,

span[ng-class='{disabled:itemIsDisabled( item )}'] – span is the tag name and nd-class is the class used to span the tag. If we use css selectors then we don’t have a chance of getting some other tag which are having the same tag name/class name/id etc.,

Note: We can also get the css selector from firepath but sometimes it will not work as expected.

Advantages:

We are using the classname’s of the span tag to get values. So, we need not check the conditions i.e, use this xpath if it is first div tag or else use another xpath
We are using enhanced for loop. So, we need not increment the value and there is no necessity to check of i <= dropDownValues.size()

Conclusion

In this blog we have seen the main advantage of using css in IE. Its a bit faster than xpath. IE does not have a native xpath engine, therefore selenium inject its own xpath engine for compatibility of its API. Xpath engines are different in each browser, hence it makes them inconsistent. Therefore we prefer CSS Selectors over Xpath.

References

Please refer the links given below to know how to make use of css selectors

8589 Views 11 Views Today
  • Ivy

    hey there! thank you for such an informative blog. thanks to you, i now understood the use of css selectors. these codes are pretty much confusing that i have to use online css generators like http://www.generatecss.com/css/ and http://www.css3maker.com/

    • http://www.treselle.com/ Treselle Systems Blog

      Thank you for your valuable comment. Also have a look at our other blog posts.

  • Jasmine Agarwal

    Hi

    I have tried the above option for my compound class

    By dobDate = By.CssSelector(“.day.ng-pristine.ng-valid.ng-empty.ng-touched”);

    and got the error OpenQA.Selenium.NoSuchElementException: no such element: Unable to locate element: {“method”:”css selector”,”selector”:”.day.ng-pristine.ng-valid.ng-empty.ng-touched”}

    Can anyone please advise the way to find the element?
    I have 3 drop down boxes each for day, month, year.

    My HTML code:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31

    January
    February
    March
    April
    May
    June
    July
    August
    September
    October
    November
    December

    2017
    2016
    2015
    2014
    2013
    2012
    2011
    2010
    2009
    2008
    2007
    2006
    2005
    2004
    2003
    2002
    2001
    2000
    1999
    1998
    1997
    1996
    1995
    1994
    1993
    1992
    1991
    1990
    1989
    1988
    1987
    1986
    1985
    1984
    1983
    1982
    1981
    1980
    1979
    1978
    1977
    1976
    1975
    1974
    1973
    1972
    1971
    1970
    1969
    1968
    1967
    1966
    1965
    1964
    1963
    1962
    1961
    1960
    1959
    1958
    1957
    1956
    1955
    1954
    1953
    1952
    1951
    1950
    1949
    1948
    1947
    1946
    1945
    1944
    1943
    1942
    1941
    1940
    1939
    1938
    1937
    1936
    1935
    1934
    1933
    1932
    1931
    1930
    1929
    1928
    1927
    1926
    1925
    1924
    1923
    1922
    1921
    1920
    1919
    1918
    1917
    1916
    1915
    1914
    1913
    1912
    1911
    1910
    1909
    1908
    1907
    1906
    1905
    1904
    1903
    1902