Automation testing
6. CSS Selectors for Automation
Id
selects simplest id tag. AKA id="main"
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.