Learn CSS Selectors – Testing Challenge
The time has come for a new challenge. As you probably know having effective CSS selectors in your automated test suite has a number of advantages. There are some situations where you need to be resourceful to hit a specific element and skip others with the same CSS selector. There are many situations that can easily become cumbersome to handle. In one of my previous blog articles I covered the basics and advanced topics related to CSS selectors. This challenge is a sequel to that post. Now we can practice our knowledge and learn CSS selectors by doing.
The assignment
At this link https://flukeout.github.io/ you can access the webpage where you can see your first task. I am not affiliated to the creators of this webpage. There are 32 levels and on each level you will have to write different CSS selector in the editor to pass to the next level. On the right hand side there is a menu where you can skip to certain levels. On the same side you can see an example of current CSS selector.
If you get stuck, you can hover of the elements to highlight them in HTML viewer or you can click on “Help, I’m stuck!” label. You can go back to CSS Selector cheatsheet if you need help.
Wrapping up
Selecting the right selector can make a lot of difference in readability and maintenance of your test scripts. Improving these skills will separate you from others in Quality assurance domain and it will show to your colleagues you have admirable expertise when it comes to test automation. If you have any questions or you need help, please share your question in the comment section. If you find issues with the webpage for the challenge, I urge you to contact the creator through his GitHub pages. I hope you will learn something new about CSS selectors.
