Unlike Xpaths, we don’t have any tool to generate CSS selectors for us. We need to generate CSS Selectors to locate the Web Element on the web page.
CSS Selector is constructed using HTML tags, attributes, and their values. The central theme behind the procedure to create CSS Selector and XPath are very much similar underlying the only difference in their construction protocol.
To use CSS Selectors first we need to generate them for Web Elements. Let’s see the structure of CSS Selectors —
Here tag is our HTML tag(like – div, input, name etc), attribute is our HTML attribute (like – Id, class etc), and Value is the value of that HTML attribute.
If you liked this video, then please subscribe to our YouTube Channel for more video tutorials.
To generate CSS Selectors, You need to find out the HTML structure of the Web Element. To extract the Web Element HTML structure we need to use Element Inspector like FireBug.
Let’s see, How we can generate the CSS Selector locators for the Web Element. Let’s generate the CSS locator for First name web element on the FaceBook signup page.
Open facebook signs up a page in your browser.
Open the fireBug.
Click on Inspect Element in the firebug.
Click on your target web Element.
It will show the HTML of that Web Element in your firebug HTML console. Now we can generate the CSS locator for the Web Element very easily.
Above, We can clearly see the HTMl structure of the First name field Facebook signup page.
Now we will generate the CSS Selector for this element. As per our CSS structure (tag[attribute=’value’]). So CSS selector for this element should be –
CSS Locator — input[id=’u_0_1′]
So this is our CSS locator for First Name web element on the Facebook signup page.
Create CSS Selector with the help of Multiple HTML Attributes
Sometimes we need to create the CSS selectors on the basis of multiple attributes. Let’s understand this with an example. Suppose we have Two Buttons on our web page ‘Submit1’ and ‘Submit2’.
Suppose the HTML structure of these buttons is like —
<div class=”Button” Value=”Submit1″>Submit1</div>
<div class=”Button” Value=”Submit2″>Submit2</div>
So in above example, we have Two Buttons on the same web page with same Class but different values. So in such case, we need to generate CSS selectors with the help of multiple attributes.
Structure to generate CSS with multiple structures –
So the CSS selector for the above buttons are –
CSS for Button2 – div[class=’Button’][value=’Submit1′]
CSS for Button2 – div[class=’Button’][value=’Submit2′]
Verify CSS Selector
It’s very easy to verify your created CSS locators. We can do this using firebug search console. Let’s see How we can verify CSS Locator against the target Web Element (We are assuming, you are on your target web page in the browser)-
Open the FireBug .
Click on HTML option available in the Firebug header bar.
Click on Inspect Element icon.
Now paste your CSS Locator in a Search bar.(Present in right side in firebug header)
It will highlight your element in the HTML console. If your CSS Locator is incorrect then the search bar become Red.
Now let’s see, How search console become appear, If we enter the incorrect CSS selectors.
So, We have seen enough to create CSS Selector for Web Elements.
Advantage of CSS Selector over XPath –
CSS is much faster and simpler than the XPath.
In IE XPath works very slow, whereas CSS works faster when compared to XPath.