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



21 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. 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
  5. 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

  6. 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
  7. 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
  8. Good blog post which provided a interesting information about css locators.keep updating...
    SEO Companies in India

    ReplyDelete
  9. Really This Blog Provides All Information About Selenium Course .please Provide More Information On Selenium Grid

    ReplyDelete

  10. Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition.

    python Training in Bangalore | python Training in Bangalore

    ReplyDelete
  11. Sebelum menjalankan permainan, setiap pemain akan diberikan waktu untuk menyusun kartu yang telah dibagikan
    asikqq
    dewaqq
    sumoqq
    interqq
    pionpoker
    bandar ceme terpercaya
    hobiqq
    paito warna terlengkap
    bocoran sgp

    ReplyDelete
  12. Thanks for sharing this kind of content in your blog its very helpful for me and you put very knowledgeable content if anyone search for best institute for selenium course check this out Contact Here-+91-9311002620 Or VisitWebsite-https://www.htsindia.com/Courses/Software-Testing/selenium-training-course-institute

    ReplyDelete
  13. Plumbing & HVAC Services San Diego
    Air Star Heating guarantees reliability and quality for all equipment and services.
    Air Star Heating is specializing in providing top-quality heating, ventilating, air conditioning, and plumbing services to our customers and clients.
    Our company is leading the market right now. By using our seamless and huge array of services. Our customers can now have the privilege of taking benefit from our services very easily and swiftly. To cope up with the desires and needs of our clients we have built an excellent reputation. We are already having a huge list of satisfied customers that seem to be very pleased with our services.

    Plumbing & HVAC Services in San Diego. Call now (858) 900-9977 ✓Licensed & Insured ✓Certified Experts ✓Same Day Appointment ✓Original Parts Only ✓Warranty On Every Job.
    Visit:- https://airstarheating.com

    ReplyDelete
  14. Compre documentos en línea, documentos originales y registrados.
    Acerca de Permisodeespana, algunos dicen que somos los solucionadores de problemas, mientras que otros se refieren a nosotros como vendedores de soluciones. Contamos con cientos de clientes satisfechos a nivel mundial. Hacemos documentos falsos autorizados y aprobados como Permiso de Residencia Español, DNI, Pasaporte Español y Licencia de Conducir Española. Somos los fabricantes y proveedores de primer nivel de estos documentos, reconocidos a nivel mundial.

    Comprar permiso de residencia,
    permiso de residenciareal y falso en línea,
    Compre licencia de conducir en línea,
    Compre una licencia de conducir española falsa en línea,
    Comprar tarjeta de identificación,
    Licencia de conducir real y falsa,
    Compre pasaporte real en línea,

    Visit Here fpr more information. :- https://permisodeespana.com/licencia-de-conducir-espanola/
    Address: 56 Guild Street, London, EC4A 3WU (UK)
    Email: contact@permisodeespana.com
    WhatsApp: +443455280186

    ReplyDelete
  15. Hurrah, that’s what I was exploring for, what stuff! present here at this webpage, thanks, admin of this web page.

    BCom Result 2021 - BCom 1st 2nd 3rd Year Exam Result
    BCom 1st year result 2021 | BCom 2nd year result 2021 | BCom 3rd year result 2021.

    ReplyDelete
  16. Additionally, I appreciate your writing style; it's clear and engaging, making it easy to follow along. Visit to Selenium Classes in Pune

    ReplyDelete