{"id":3749,"date":"2016-06-10T06:50:49","date_gmt":"2016-06-10T10:50:49","guid":{"rendered":"https:\/\/qxf2.com\/blog\/?p=3749"},"modified":"2018-04-03T10:36:09","modified_gmt":"2018-04-03T14:36:09","slug":"how-to-write-css-selectors","status":"publish","type":"post","link":"https:\/\/qxf2.com\/blog\/how-to-write-css-selectors\/","title":{"rendered":"How to write CSS selectors"},"content":{"rendered":"

Why this post?<\/h3>\n

Testers need to know multiple ways of locating an element in a webpage as different strategies have to be used based on the context since each has its own advantage. The Cascading Style Sheet(CSS) is defined to structure and style the HTML in the webpage. These CSS patterns can be used to uniquely identify elements in the webpage. This post will help you get started with CSS selectors. I have modeled this post to address the difficulties I faced learning CSS selectors online.<\/p>\n\n

Setup<\/h3>\n

A couple of difficulties I faced while learning CSS is that most posts are pretty mundane and very abstract. I have made an effort to not do the same. Every example I have used in this post is derived from the Qxf2 tutorial page<\/a> that will never change. That way you can practice writing CSS selectors to your heart’s content.<\/p>\n

Install the CSS and XPath checker<\/a> plugin for Chrome, open the tutorial page on a new tab and follow along.<\/p>\n\n

Overview<\/h3>\n

This post has been structured in a way that it:
\n1. gets you started with the basic patterns
\n2. introduces you to positional pseudo-classes
\n3. tabulates a few useful patterns.<\/p>\n

1)Basic patterns<\/h5>\n

Basic patterns include identifying elements by their tag, by their id, by their name attribute and their class. For example, let us try deriving CSS selectors for the Phone No text field in the tutorial page.<\/p>\n

To view the html properties of the Phone No field, right click on it and select inspect.<\/p>\n

\"Phone_html\"<\/a>
\nTo select the Phone No textfield,
\n\"Phone_Css_id_2\"<\/a>
\nor
\n\"Phone_Css_id\"<\/a>
\n\"Phone_no\"<\/a>
\nAlthough #phone can be used to locate the text field,there can be other CSS locators too for the Phone No text field.You can practice the remaining basic patterns (HTML tag, id, class) by referring to the table below. <\/p>\n\n\n\n\n\n\n\n
Selector<\/b><\/td>\nExample<\/b><\/td>\nExample Description<\/b><\/td>\n<\/tr>\n<\/thead>\n
element<\/td>\ninput<\/em><\/td>\nThis pattern selects all input elements in the web page.<\/td>\n<\/tr>\n
.class<\/td>\ndiv.checkbox (or) .checkbox<\/em><\/td>\nThis pattern selects the element with the class .checkbox<\/td>\n<\/tr>\n
[attribute=’value’]<\/td>\ninput[type=’phone’] (or) [type=’phone’] <\/em><\/td>\nThis pattern selects the input element whose type attribute value is phone.<\/td>\n<\/tr>\n<\/table>\n

Consider the following HTML property for the Example Table,
\n\"Example_Table\"<\/a>
\nThe CSS selector for the above table can be [name='Example Table']<\/code> or to specify that the value starts with a particular word [name^='Example']<\/code> or [name$='Table']<\/code> if the value ends with word Table. [name*='Example] or [name*='Table'] <\/code> can be used to specify that the value of the attribute contains the particular word.
\n\"name_cont_css\"<\/a><\/p>\n\n

2)Pseudo-class<\/h5>\n

Sometimes you are lucky and every element in your application has a name or an id or a unique class. However, when you start dealing with tables and dynamic data, it is good to know about Pseudo-classes. Pseudo-classes are used to locate an element based on their state\/position. Pseudo-classes are preceded by ‘:’. Let us try writing selectors for the buttons in the example form with pseudo-classes.
\nLet us try deriving a CSS selector for the Click me! button using a pseudo-class. The HTML snippet for the Click me! button is,
\n\"click_me_button\"<\/a>
\nThe CSS selector using pseudo-class is,
\n \"Click_me_CSS\"<\/a>
\n\"click_me_example_form\"<\/a>
\nNow the HTML snippet for Gender button is,
\n\"gender_button\"<\/a>
\nThe CSS selector for the Gender button can be,
\n\"first_child_css\"<\/a>
\nDo you notice 2 matches instead of one? Wondering why?? The Click me! button despite being the only child is also taken into consideration for the first-child<\/code> pseudo class. Hence the pseudo-class has to be used in combination with any other basic patterns. Therefore the CSS selector for the gender button is,
\n\"Gender_CSS\"<\/a>
\n\"Gender_example_form\"<\/a>
\nIt is not possible to discuss all the Pseudo-classes(for more pseudo classes click here<\/a>.) but anyone who wants to learn CSS should start by knowing the difference between the most commonly used position based pseudo-classes – nth-child<\/code> and nth-of-type<\/code> classes. Let us try and learn the difference with the following example,
\nConsider the HTML properties of the Example Form in the tutorial page:<\/p>\n

\r\n\t    
\r\n\t      
\r\n\t      
\r\n\t      
div.form-group:nth-of-type(2)<\/pre>\n
The nth-of-type<\/code> pseudo-class selects any element that is second of the type
\nImagine if developer decides to have a gender button next to the name field, the HTML properties after the new change would look like this,<\/p>\n
\r\n\t    
\r\n\t