Saturday, 23 July 2016

CSS Locators


Note| 
 
Text in Blue [#PYTHON], Rose [#PROTRACTOR], Red [#RUBY] and Orange [#JAVA] can be edited or mentioned important for the entire blog. All the posts are practically done by me.


Experimental CSS Locators in automation aspects

CSS locators are comparatively faster than Xpath and readable; it uses JQuery's way to locate elements.

Note: This post is fully experimented on https://www.python.org/


General
     ID
               #id-search-field

     The same can be achieved through,
               *#id-search-field
               input#id-search-field

     Class
               .search-field
               .search-field.placeholder
               
     The same can be achieved through,
               *.search-field
               input.search-field

     Direct Child | absolute css
     '>' operator matches the immediate child of an element
               .python.home > #touchnav-wrapper > #nojs > p > strong:contains(Notice:)

     Sub Child | relative css
     a space between two instance matches any descendant of a parent/grand-parent elements
               .python.home strong:contains(Notice:)

     contains | text
     locates elements with text
               button:contains(GO)

     not contains | text
     skips elements with specific text
               a:not(:contains(notinthispage))









Attrribute
     CSS locates elements using properties
               input[name='q']
               input[id='id-search-field']
               input[class='search-field placeholder']
               input[class='search-field placeholder'][id='id-search-field']

     not contains | attribute
     locates all the elements that doesn't contain specific property, text, etc., 
               .tier-2:contains(Group):not(.element-4)
               .tier-2:contains(Group):not([class*='element-4'])



Advanced attrribute css selectors
     CSS locates dynamic elements using the following operators
               = operator
               ~= operator
               ^= operator
               $= operator
               *= operator
               |= operator

     Equal
     = operator lets you find elements that matches attribute with the exact specified value
               *[class='python home']

     space-separated values
     ~= operator lets you find elements that matches attribute with space-separated values
               *[class~='menu']

     prefix [begins-with]
     ^= operator lets you find elements that matches attribute starting with the specified value
               *[class^='main']

     suffix [ends-with]
     $= operator lets you find elements that matches attribute ending with the specified value
               *[class$='home']

     contains [contains]
     *= operator lets you find elements that matches attribute with a specified value, which is a part of actual attribute value
               *[class*='shell']

     hyphen separated values
     |= operator lets you find elements that matches attribute with hyphen-separated values starting from the left
               *[class|='site']



Css Siblings
     CSS locates sibilings similar to xpath
               Next sibling
               General sibling
               
     Next or Adjacent sibling
     selects the element/sibling next to the current element
               #top + header


     

     General sibling
     selects any number of siblings with matching type coming next to next from the current element
               #top ~ div
 



Pseudo class
     Pseudo-classes are actually not css inborn instead they are an absolute CSS foreigners implemented through JQuery, mootools, etc., listed below are some of the most commonly used pseudo classes for automation,
               :nth()
               :nth-child()
               :first-child
               :last-child
               :first-of-type
               :last-of-type
               :nth-of-type()
               :only-of-type
               hover
               E:focus
               link
               visited

     nth()
     collects the entire child, sub-child of a parent and matches the list in a sequential order or index with value starting from 0 as count 1
               .main-header .container div:nth(2)
               .meta-navigation.container *:nth(0)

     nth-child()
     unlike nth(), nth-child filters only the child with type and location 
               [role='menubar'] *:nth-child(1)

     here, it selects all the first child elements of the type <li>
               [role='menubar'] li:nth-child(1)









     first-child
     first-child is similar to nth-child(1)
               [role='menubar'] li:first-child


     last-child
     last-child is similar to first-child but locates the child's last elements
               [role='menubar'] li:last-child

     
first-of-type
     locates the parent's first elements w.r.t type
               [role='menubar'] li:first-of-type

     
last-of-type
     locates the parent's last elements w.r.t type
               [role='menubar'] li:last-of-type

     only-of-type
     matches all the given type (say, h1 tag) under a specific element
               .main-header .container h1:only-of-type

     hover
     locates element on hover over
               *[href='/psf/membership/']:hover

     
E:focus

     locates element on focus
               *[href='/psf/membership/']:focus

     
link

     locates element if hyperlinked
               *[href='/psf/membership/']:link

     visited
     locates already visited hyperlink
               *[href='/psf/membership/']:visited



18 comments:

  1. Selenium is very useful tool in testing, thanks for sharing this. If you need any help of ROR developers in India then email us at: info@cryptextechnologies.com

    ReplyDelete
  2. This is really a great post. Thank you for taking time to provide us some of the useful and exclusive information with us. Keep on blogging!!

    App Store Optimization Services in Chennai

    ReplyDelete
  3. CSS LOCATORS is very good concept. The way of explanation is very good. we can understand very easily. Keep posting latest updates of selenium. Selenium Online Training

    ReplyDelete
  4. Well explained. Got to learn new things from your Blog on Appium.
    Appium training in chennai

    ReplyDelete
  5. Well explained. Got to learn new things from your Blog on Appium.
    Appium training in chennai

    ReplyDelete
  6. very impressive content thank you for offering such great info very helpful for students and professionals.great work and efforts like us.we have been in to this selenium online trainings for the past 12 years.best regards from rstrainings hyderabad.
    Selenium Online Trainings in hyderabad

    testing tools Online Trainings

    ReplyDelete
  7. Great and really helpful article! Adding to the conversation, providing more information, or expressing a new point of view...Nice information and updates. Really i like it and everyday am visiting your site..

    Selenium Training in Chennai

    ReplyDelete
  8. Thanks for sharing great information in your blog. Got to learn new things from your Blog . It was very nice blog to learn about Selenium.selenium training in chennai

    ReplyDelete


  9. Thanks for posting this useful content, Good to know about new things here, Let me share this, . cisco training in pune

    ReplyDelete
  10. Really i enjoyed very much. And this may helpful for lot of peoples. So you are provided such a nice and great article within this.
    Back to original

    ReplyDelete
  11. Nice Blog, Thank you for sharing nice article. It's useful to us.

    Online Selenium Training

    ReplyDelete

  12. I read your articles very excellent and the i agree our all points because all is very good information provided this through in the post.

    Web Design Company in Chennai

    ReplyDelete
  13. I read your articles very excellent and the i agree our all points because all is very good information provided this through in the post.

    Digital Marketing Company in Chennai

    ReplyDelete
  14. Inspiring writings and I greatly admired what you have to say , I hope you continue to provide new ideas for us all and greetings success always for you..Keep update more information..

    Digital Marketing Company in India

    ReplyDelete
  15. It was very nice blog to learn about Selenium.Thanks for sharing new things.selenium training in chennai

    ReplyDelete
  16. Truly a very good article on how to handle the future technology. After reading your post,thanks for taking the time to discuss this, I feel happy about and I love learning more about this topic
    Isoft Innovations Facebook
    Isoft Innovation Chennai

    ReplyDelete