Hello @Jino,
CSS Selector is pretty easy to use. Here is a detailed way of using the ID locator (CSS Selector).
Here's an example where we would access the “Email” text box present in the login form at Gmail.com.
The Email textbox has an ID attribute whose value is defined as “Email”. Thus ID attribute and its value are often wont to create CSS Selector to access the e-mail 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 the value of the ID attribute is “Email” and both of them collectively make a regard to the “Email Textbox”. Hence the above data would be wont to create CSS Selector.
Verify the locator value
Step 1: Type “css=input#Email” i.e. the locator value within the target box up the Selenium IDE and click on on the Find button. Notice that the e-mail Text box would be highlighted.
Syntax
css=<HTML tag><#><Value of ID attribute>
- HTML tag – it's the tag which is employed to denote the online element which we would like to access.
- # – The hash sign is used to symbolize ID attribute. It is mandatory to use hash sign if ID attribute is getting used to make CSS Selector.
- Value of ID attribute – it's the worth of an ID attribute which is being accessed.
- The value of ID is usually preceded by a hash sign.
Hope this helps.
