Automation testing
6. CSS Selectors for Automation
Id
selects simplest id tag. AKA id="main"
#main
Class

  • selects all elements with class="post-area post" - you are correct, you need to add dots instead of spaces if you use class
.post-area.post
Multiple selectors

  • selects all div elements that have id="myArticle" AKA div id="myArticle"
div #myArticle
  • selects same div but with a class="container main" AKA div class="container main"
div.container.main
Attributes

  • selects all elements with a tag data-original-title="back to top". You simply choose tag and add [] around it
[data-original-title="back to top"]
Someone called all of these "pseudo selectors"

  • It target first element of whatever is behind it
#top a :first-child
  • It targets last element. Example:
#top a :last-child
  • It target the nth element of whatever is behind it
#top a :nth-child(1) OR #top a :nth-child(2)
If you have any question ask me on instagram: @codemify_
We help ambitious people to get into Tech with no prior experience.