86. Introduction to CSS selectors

As we already know that we can identify UI elements on any page using CSS Locator (Please refer to Post #28 ). But we have used it in our earlier post without knowing its basics. If we know the basics of CSS , we can use it effectively in Selenium Automation.

XPath Statements or CSS Selectors? Which is preferred ?

XPath statements slow down the tests where as CSS selectors run faster than the equivalent XPath.   So CSS Selectors are preferred out of all the available locators to identify the elements.

What should you already know ?

In order to understand the CSS selectors you should have knowledge on HTML (If you don't have any knowledge on HTML you can start learning it from http://w3schools.com/html/default.asp first before going to the next post ).

What is CSS ?

CSS stands for Cascading Style Sheets. CSS defines how HTML elements are to be displayed (i.e. The styles of the HTML elements are defined in the CSS document).

Suppose if you have specified that all the headings i.e. elements between the  <h1> to <h6> tags should be displayed in red color in the CSS document. When the HTML document uses this CSS document, all the heading tags in the HTML document will import the style defined for the headings in the external CSS document and display all the headings in Red color.

CSS documents save a lot of time for the developers. By changing the style properties in CSS document, the style of the elements in the HTML code changes. That is the developer wont have to go through each and every step in HTML code to change the style of the elements. 

Suppose the developer has to change the color of the headings from red to blue. By changing the color property of headings in CSS will save the time of the developers. If not he has to find all the heading tags in the HTML code and change the style properties for every tag.

What are CSS selectors ?

In CSS, selectors are the patterns used to select the elements. 

Examples of selectors:

• .intro (Selects all the elements with the class attribute specified as class="intro" )
• #firstname (Selects all the elements with the id attribute specified as id='firstname' )
• * (Selects all the elements)
• p (Select all the <p> elements in HTML code of the web page)

In this way there are many selectors in CSS which are used to locate the elements. 

Lets go through these CSS selectors in the Upcoming posts.


Please comment below to feedback or ask questions.

Selecting the whole web page using CSS Selectors will be explained in the next post.