Element Locator Strategies in Selenium

A. CSS-Selector Strategies :

Q. Why use CSS Selector vs XPath ?

Reasons :

1. Faster script execution
2. More readable
3. CSS is used by jQuery’s locating strategy
4. Don't use XPATH anyways !!!

Syntax for CSS Selector :

• css=<All below CSS Patterns type>

CSS Selector Patterns :

     CSS-Patterns                                  Meaning

1. E                        An element of type E
2. E[foo]                An E element with a "foo" attribute
3. E[foo="bar"]       An E element whose "foo" attribute value is exactly equal to "bar"
4. E[foo~="bar"]     An E element whose "foo" attribute value is a list of space separated values, one                             of which is exactly equal to "bar"
5. E[foo^="bar"]                 An E element whose "foo" attribute value begins exactly with string "bar"
6. E[foo$="bar"]                 An E element whose "foo" attribute value ends exactly with string "bar"
7. E[foo*="bar"]                  An E element whose "foo" attribute value contains the substring "bar"
8. E:nth-child(n)                  An E element, the nth child of its parent.
9. E:nthlastchild(n)            An E element, the nth child of its parent, counting from the last one.
10. E:firstchild                     An E element, first child of its parent.
11. E:lastchild                      An E element, last child of its parent.
12. E:onlychild                     An E element, only child of its parent.
13. E:onlyoftype                   An E element, only sibling of its type.
14. E:empty                         An E element that has no children (including text nodes)
15. E:active
    E:hover
    E:focus                      An E element during certain user actions : Active/Hover/Focus
16. E:enabled
17. E:disabled                 An user interface element E which is enabled or disabled.
18. E:checked                 An element 'E' is checked or in an  indeterminate state(radiobutton/CheckBox)
19. E:contains("foo")       An element 'E' containing the SubString "foo" in its textual contents
20. E#myid                      An element 'E' with ID equal to "myid" without any blank space
21. E.myClass                  An element 'E' with Class Name equal to "myClass" without any blank space
22. E:not(S)                     An element 'E' that does not match simple selector 'S'
23. E F                             An element 'F' descendant of an 'E' element.
24. E > F                          An element 'F' direct child of an 'E' element.
25. E + F                          An element 'F' immediately preceded by an 'E' element.

Limitations of CSS Lcators :

• There are some cases where you cannot locate element using CSS locator. For instance  //*[@value>3]
• Lack of arithmetic and logical operator/function support as compare to xpath.
• Text comparison is case sensitive and there is no way to perform case insensitive comparison.
   
  When referring to parent you must be careful, For Example :
  In Xpath :

           //*[./a[contains(.,'Issue 1244')]]

          //li[./a[contains(.,'Issue 1244')]]

• Both 1 and 2 are will locate element li, having first child a[contains(.,'Issue 1244')]
• Whereas in CSS :

                li{a:contains(Issue 1244)}

                *{a:contains(Issue 1244)}

Both 3 and 4 locates different elements. 3 is same as 1(assuming there is no other parent li element of li) but 4 locates first element that having child a:contains(Issue 1244) that is document root. There is no way to locate parent precisely.

For IE, Complex CSS might become as slow as XPath.

Conclusions:

• Element Location strategy should be selected with following preference id, name, link, dom/css/xpath
• Locators recorded by IDE are not always efficient but you can modify it manually for the best efficient one.
• Avoid locating parent using CSS or be more careful.