Using CSS Selector as a Locator:
CSS Selector is the combination of an element selector and a selector value which identifies the web element within a web page. The composite of an element selector and selector value is known as Selector Pattern.
Selector Pattern is constructed using HTML tags, attributes and their values. The central theme behind the procedure to create CSS Selector and X path are very much similar underlying the only difference in their construction protocol.
Like X path, CSS selector can also locate web elements having no ID, class or Name.
So now gearing ahead, let us discuss the primitive types of CSS Selectors:
CSS Selector: ID
In this sample, we would access “Email” text box present in the login form at Gmail.com.
The Email textbox has an ID attribute whose value is defined as “identifierID”. Thus ID attribute and its value can be used to create CSS Selector to access the email textbox.
Creating CSS Selector for web element
Step 1: Locate/inspect the web element (“Email” textbox in our case) and notice that the HTML tag is “input” and value of ID attribute is “identifierId” and both of them collectively make a reference to the “Email Textbox”. Hence the above data would be used to create CSS Selector.
Css=Input[#identifierId]
Syntax
css=<HTML tag><#><Value of ID attribute>
- HTML tag – It is the tag which is used to denote the web element which we want to access.
- # – The hash sign is used to symbolize ID attribute. It is mandatory to use hash sign if ID attribute is being used to create CSS Selector.
- Value of ID attribute – It is the value of an ID attribute which is being accessed.
- The value of ID is always preceded by a hash sign.
CSS Selector: Class
In this sample, we would access “password” textbox present below the login form at Facebook.com.
The “password” textbox has a Class attribute whose value is defined as “inputtext”. Thus Class attribute and its value can be used to create a CSS Selector to access the designated web element.
Css=input.inputtext
Locating an element using Class as a CSS Selector is very much similar to using ID, the only difference lies in their syntax formation.
Creating a CSS Selector for web element
Step 1: Locate/inspect the web element (“Password” textbox in our case) and notice that the HTML tag is “input” and value of ID attribute is “pass” and both of them collectively make a reference to the “Password textbox”.
Syntax
css=<HTML tag><.><Value of Class attribute>
- . – The dot sign is used to symbolize Class attribute. It is mandatory to use dot sign if a Class attribute is being used to create a CSS Selector.
- The value of Class is always preceded by a dot sign.
CSS Selector: Attribute
In this sample, we would access the “first name” textbox present below the login form at Facebook.com.
The “first name” textbox has a type attribute whose value is defined as “type”. Thus type attribute and its value can be used to create a CSS Selector to access the designated web element.
Css=input[type=’text’]
Creating a CSS Selector for web element
Step 1: Locate/inspect the web element (“First Name” textbox in our case) and notice that the HTML tag is “input”, the attribute is type and value of type attribute is “text” and all of them together make a reference to the “first name” textbox.
Syntax
css=<HTML tag><[attribute=Value of attribute]>
- Attribute – It is the attribute we want to use to create CSS Selector. It can value, type, name etc. It is recommended to choose an attribute whose value uniquely identifies the web element.
- Value of attribute – It is the value of an attribute which is being accessed.
CSS Selector: ID/Class and attribute
In this sample, we would access the “Password” text box present in the login form at Facebook.com.
The “Password” text box has an ID attribute whose value is defined as “Pass”, type attribute whose value is defined as “password”. Thus ID attribute, type attribute and their values can be used to create CSS Selector to access the designated web element.
Css=input[type=’password’][id=’pass’]
Creating a CSS Selector for web element
Step 1: Locate/inspect the web element (“Password” text box in our case) and notice that the HTML tag is “input”, attributes are ID and type and their corresponding values are ”Pass” and “password” and all of them together make a reference to the “Password” textbox.
Syntax
css=<HTML tag><. Or #><value of Class or ID attribute><[attribute=Value of attribute]>